조회 수 2138 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

위로 아래로 인쇄
?

단축키

Prev이전 문서

Next다음 문서

위로 아래로 인쇄
Extra Form
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?
Comment '1'

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

  1. 버튼 클릭시 클립보드에 복사하는 방법

    엣지브라우즈 : 크롬(웨일)브라우즈 : 위와 같이 해당문구를 복사버턴 클릭시 클립보드로 복사하는 소스입니다. <p class="box01"> 엣지브라우즈 : <input value="edge://flags/#block-insecure-private-network-requests" readonly> <button onclick="copy_to...
    Date2021.12.31 팔공산 Views2014
    Read More
  2. No Image

    CSS 색상 이름 rgb , 16진수 자료( css 색상표 )

    색상 256 복합수 16진수 코드 Snow 255 250 250 #FFFAFA GhostWhite 248 248 255 #F8F8FF WhiteSmoke 245 245 245 #F5F5F5 Gainsboro 220 220 220 #DCDCDC FloralWhite 255 250 240 #FFFAF0 OldLace 253 245 230 #FDF5E6 Linen 250 240 230 #FAF0E6 AntiqueWhi...
    Date2021.02.15 팔공산 Views832
    Read More
  3. No Image

    HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때

    윤삼님이 Xetown에 올려주신 내용을 가져왔습니다. https://xetown.com/tips/1182610 간혹 보면 테이블 가로 사이즈가 화면사이즈보다 넓어서 화면 구성이 원활하지 않을 때가 있습니다. 저도 게시판 스킨에 확장변수 다중검색 애드온을 얹어서 아카이브 사이...
    Date2019.03.01 팔공산 Views2023
    Read More
  4. CSS 말줄임 처리하기

    일반적으로 글자가 넘어가는 경우를 대비해서 백엔드단계에서 글자수를 특정지어서 자르는 방법을 많이 사용합니다. 헌데 이방법을 사용할시 영어, 숫자, 한글의 자간이 달라 일관되지 않는 모습을 보이는 경우가 많아서 뷰 단계에서 글자가 넘어갈경우 말줄임...
    Date2018.11.13 팔공산 Views1745
    Read More
  5. No Image

    폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법

    폰트에 속성을 주는 방법은 <font >태그와 다른 태그 안의 스타일(style) 속성 두 가지를 쓸 수 있겠다. 이전에는 폰트를 적용할 때 <font > ~~ </font>와 같이 하였는데, HTML5에서는 <font>태그를 지원하지 않는다. 물론, HTML5가 일반화되고 브라우저 버전...
    Date2018.09.26 팔공산 Reply6 Views16550
    Read More
  6. DIV 영역 자체에 링크 거는 방법

    DIV 영역 그 자체에 링크를 걸어서 DIV 영역을 클릭하면, 지정된 주소(URL)로 이동하도록 하려면 아래와 같이 스타일(style) 속성으로 지정해 주면 된다. [DIV 영역 자체에 링크 걸기] <div style=" cursor: pointer;" onclick="location.href='목적지 링크주...
    Date2018.09.23 팔공산 Reply4 Views27733
    Read More
  7. DIV 화면 정중앙에 박스 배치하기

    DIV로 만든 박스를 화면 정중앙에 배치하는 방법은 생각보다 간단하지가 않습니다. 특히 박스의 가로 크기가 변하는 경우는 더욱더 어렵습니다. 예를 들면 Popup위젯의 경우가 해당됩니다. - 일반적인 코드 - <style> #content { position:absolute; height:20...
    Date2018.09.19 팔공산 Views1005
    Read More
  8. DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; )

    DIV 가로 중앙 정렬, 세로 중앙 정렬 코딩을 할 때 가장 기본이 되지만 또 가장 어려웠던 부분이었다. display:flex; 이 코드를 알고 나서 정말 쉽게 코딩이 가능해졌다. 바깥쪽 div, 즉 부모 div에 display:flex; 를 선언하면. 안쪽 엘리먼트, 즉 자식div에 ...
    Date2018.09.19 팔공산 Views2129
    Read More
  9. 커서(cursor) 모양 정리

    마우스 커서 모양에 대해 알아보겠습니다. 보통 cursor 작업을 하면 pointer 위주로 작업을 합니다. 하지만 pointer 외에 아주 많는 cursor 가 있습니다. 그종류에 대해 소스와 샘플을 올려봅니다. 적절한 cursor 지정을 통해 사용자 편의를 고려해보시기 바랄...
    Date2018.07.19 팔공산 Views473
    Read More
  10. webkit-animation 적용 방법

    css3를 지원하는 브라우즈에서 이미지나 문구를 에니메이션 처럼 꾸미는 방법으로 webkit-animation을 많이 사용합니다. https://moonhouse.co.kr/423394 스케치북5 게시판에 댓글달기 추천 문구에 적용하는 방법을 소개합니다. 1. skin.xml 에 추가 <var name...
    Date2018.01.31 팔공산 Views622
    Read More
  11. 각종 css3를 자동으로 만들어주는 사이트

    {CSS3} animation / transform / transition 각종 css3를 자동으로 만들어주는 사이트 http://www.css3maker.com/index.html * animation 참고 사이트 http://daneden.github.io/animate.css/ - css3 animaion을 적용하기 위해선 속성 변화를 주기 위해 키프레...
    Date2017.11.07 팔공산 Views1278
    Read More
  12. html에 사용되는 Character Entities(특수기호)

    &Tab; &#x00009; &#9; CHARACTER TABULATION &NewLine; &#x0000A; &#10; LINE FEED (LF) ! &excl; &#x00021; &#33; EXCLAMATION MARK " &quot; &QUOT; &#x00022; &#34; QUOTATION MARK # &num; &#x00023; &#35; NUMBER SIGN $ &dollar; &#x00024; &#36; DOLLAR...
    Date2017.11.04 팔공산 Views1819
    Read More
  13. 이미지 마우스 hover시 좌우 기울이기

    아래의 이미지와 같이 마우스 hover시 좌우로 기울이는 코드 img { border:1px solid #D4D4D4; padding:5px; } img:hover{ border:1px solid #666666; filter:alpha(opacity=70); opacity:.7; box-shadow:0 0 10px rgba(0,0,0,.2);filter:alpha(opacity=100);o...
    Date2017.10.27 팔공산 Views696
    Read More
  14. 모바일웹에서 스마트폰으로 전화바로연결 코드

    모바일웹(스마트폰)에서 자동으로 전화 걸기 태그 는 아주 간단합니다 아래 코드만 입력하면 끝입니다. 스마트폰에서 터치하면 자동으로 등록된 전화번호가 키패드로 바로 보이고 거기서 통화 버튼만 누르면 된다. <a href="tel:010-1234-1234">전화걸기 여기 ...
    Date2017.06.16 팔공산 Views2569
    Read More
  15. 반응형 CSS 테이블

    이용 요금 안내 준성수기 : 7/1~7/14, 8/16~8/30 성 수 기 : 7/15~8/15 객실명 평형 입실인원 기준/최대 비수기 준성수기 7/1~7/14 8/16~8/30 성수기 7/15~8/15 101 20평 67m2 6인/10인 주중:20만 주말:23만 주중:23만 주말:26만 30만 102 10평 34m2 2인/4인 ...
    Date2017.06.13 팔공산 Views1372
    Read More
  16. 실시간 환율조회 html

    환율위젯 https://kr.fxexchangerate.com/exchange-rates-widget.html 미국 달러 환율변환기 https://kr.fxexchangerate.com/currency-converter-widget.html 통화 변환기 아래는 베트남동을 참가한 위젯들 <!-- Currency Converter Script - FxExchangeRate.c...
    Date2017.04.18 팔공산 Views1657
    Read More
  17. HTML 만으로 마우스오버 구현하는 방법

    [URL링크시] <a href="#" onMouseOver="this.innerHTML='마우스오버시 변경되는 텍스트'" onMouseOut="this.innerHTML='마우스가 범위를 벗어날시 변경되는 텍스트'">기본적으로 표시되는 텍스트</a> a href = "#": 누를시 이동되는 주소를 작성하면 됩니다. ...
    Date2017.01.07 팔공산 Reply1 Views10525
    Read More
  18. No Image

    <div> 와 같은 블록 요소를 가운데 정렬하는 방법

    1. div안에 div가운데 정렬하는 방법 <div class="container" style="text-align: center; margin: 0 auto;" > <div style="border: 1px solid; display: inline-block;"> </div> </div> 바깥 쪽 div에는 text-align과 margin값을 준다. 안에 있는 div의 displ...
    Date2016.12.26 팔공산 Reply1 Views17093
    Read More
  19. float 속성을 가진 div 100% 설정하는 방법

    css작업하다보면 간혹 곤욕스러운 경우가 많습니다. 대표적인게 float 속성인데요.. div, p 태그는 대표적인 block속성을 가지고 있는데요.. 이게 float을 만나면 inlin-block으로 속성이 변경됩니다. 만약 아래 그림처럼 레이아웃을 만들려고 하는데...box2는...
    Date2016.04.21 팔공산 Views1440
    Read More
  20. No Image

    배경이미지 슬라이드 스크립트

    <script language='JavaScript'> document.write('<st'+'yle>'); document.write('body{ background-attachment:fixed; background-repeat: no-repeat;');//배경이미지고정/반복않음 document.write('background-position: 0 0;}'); // 배경이미지 위치 docume...
    Date2016.04.19 팔공산 Reply1 Views2138
    Read More
목록
Board Pagination Prev 1 2 3 Next
/ 3
"