Html Tips

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

  1. line-height 와 height의 차이점

    먼저 line-height는 글자가 한 줄에서 차지하는 높이를 말합니다. line-height가 10px이라고 한다면 한 줄에서 글자가 폰트 크기를 포함하여 총 10px의 높이를 차지한다는 걸 의미하게 됩니다. 위 그림을 보시면 ABC와 맞닿아 있는 위, 아래의 선을 제외하고 ...
    Date2023.04.02 Category :css 팔공산 Views1011
    Read More
  2. css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리

    css 작성할 때 종종 em rem까지는 작성할 때도 있긴 한데, 보통은 귀찮아서 반응형일 때는 %에 의존하고 그 외에는 그냥 대부분 px처리 해버리곤 한다.. 하지만 폰트나 블록 영역 크기를 조절할 때 사용하는 요 요소들을 적절히 사용해주면 보다 간단하면서도 ...
    Date2022.04.25 Category :css 팔공산 Reply1 Views2346
    Read More
  3. No Image

    flex로 세로 가로 정렬 하기

    팝업창이나 모달창을 화면에 중앙에 띄울때 여러 방법들이 있으나 요즘 가장 많이 쓰는 방법은 바로 flex. flex 효과 중 익스에서 안먹히는 것들이 있어 초기에는 자주 안 썼으나 지금은 익스를 많이 배제하므로 Pass~~ <div class="box"> <p> 팝업창이나 모달...
    Date2022.04.22 Category :html 팔공산 Reply1 Views894
    Read More
  4. 버튼 클릭시 클립보드에 복사하는 방법

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

    Hover시 테두리두께 설정

    이미지나 게시글 출력후 마우스 Hover시 테두리라인 색상이나 두께를 나타내고자 할때 A같이 코드를 주면 두께만큼 아래 위로 영역이 움직입니다. A 내용 영역 <style type="text/css"> .a { background:black; color:white; width:200px; text-align:center; ...
    Date2021.11.05 Category :css 팔공산 Views2430
    Read More
  6. 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 팔공산 Views820
    Read More
  7. No Image

    display 속성: inline, block, inline-block

    CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다. 여러가지 display 속성값 중에서 가장 기본이지만 은근히 햇갈릴 수 있는 inline과 block, inline-block에 대해서 알아보도록 하...
    Date2021.02.02 Category :css 팔공산 Views902
    Read More
  8. 접기, 펼치기 folding기능 - <details> 와 <summary>로 간단하게 구현하기

    보통의 경우 접기, 펼치기 폴딩기능을 적용할려면 js를 사용해서 많이 구현합니다. 근데 js없이 Html과 Css만으로 간단하게 구현되는 코드가 있습니다. 바로 <details> 와 <summary> 코드인데요. <details>코드만 적용해도 아래와 같이 적용됩니다. <details> ...
    Date2021.01.23 Category :html 팔공산 Reply4 Views23332
    Read More
  9. 글 색상을 랜덤으로 출력하기

    제목 그대로 글 색상을 랜덤으로 출력하는 방법입니다. html파일에 script를 아래와 같이 작성 <script> jQuery(function($){ for(var i=0 ; i < $(".random_colors").length; i++){ var f_color = "#"+(parseInt(Math.random()*0xffffff)).toString(16); $("....
    Date2020.11.30 Category :css 팔공산 Views973
    Read More
  10. div 영역에 Width:100%; height:100%; 적용해 보기 - display:table

    < left right > 위와 같은 모양의 div 영역을 만들때 생각보다 width:100%; height:100%; 지정하기가 쉽지를 않다. <style> .etc { width:100%; height:100%; color:#000; background:#bbb; margin:5px; padding:5px 10px; border:1px solid #000; } .etc .lef...
    Date2020.10.12 Category :css 팔공산 Views1469
    Read More
  11. 홈페이지에 화려한 에니메이션 효과를 주기 - aos animate

    Mh Justice Layout 을 만들면서 각 화면당 에니메이션 적용을 했었는데 https://freehtml5.co 에 있는 레이아웃을 보고 이전에 적용했던 에니메이션보다 효과가 뛰어나서 적용해 보았습니다. aos 에니메이션의 특징은 화면이 리플레쉬가 되지 않고도, 화면이 ...
    Date2020.08.29 Category :JavaScript 팔공산 Views2744
    Read More
  12. 웹퍼블리셔가 알고있어야 할 display:table 속성

    오늘 다룰 주제는 사이트에서 많이 사용되는 형태인 동일한 넓이와 간격을 가지고 있는 컨텐츠 (정확한 명칭을 몰라서 ㅎㅎ....) 에 대해 알아보도록 하겠습니다. (글이 지루하신 분은 Ctrl + F 를 눌러 '결론' 을 검색해 주시지 마세요. 읽고서 댓글로 짱똘 ...
    Date2020.02.20 Category :css 팔공산 Reply4 Views998
    Read More
  13. No Image

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

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

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

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

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

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

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

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

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

    css3를 지원하는 브라우즈에서 이미지나 문구를 에니메이션 처럼 꾸미는 방법으로 webkit-animation을 많이 사용합니다. https://moonhouse.co.kr/423394 스케치북5 게시판에 댓글달기 추천 문구에 적용하는 방법을 소개합니다. 1. skin.xml 에 추가 <var name...
    Date2018.01.31 팔공산 Views621
    Read More
목록
Board Pagination Prev 1 2 3 4 Next
/ 4