Home > Rhymix > Html

Html Tips

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

  1. 굵은 폰트만 따로 글꼴 지정하는 방법

    홈피를 만들다 보면 전체 레이아웃이나 게시판 스킨에 적용하는 폰트를 지정 할 수 있는데, 해당 폰트가 일반적인 글꼴에서는 마음에 드는데 굵은 글꼴에서는 마음에 들지 않을 수 있는데, 이런 경우 적용 가능한 css /* 굵은 폰트 지정 */ @import url('https...
    Category :css Views44
    Read More

  2. 잠시 보고 사라지게 만드는 javascript

    홈피 작업을 하다 보면 어떤 기능들은 페이지 출력시 간혹 필요는 한데, 보통때는 필요가 없어서 자리만 차지하고 있는 것들이 있죠. 이런 것들을 모아서 지정 시간이 지나면 화면에서 사리지게 만드는 javascript. (참고로 sketchbook5_MH 게시판 스킨을 예로...
    Category :JavaScript Views39
    Read More

  3. 하단 영역을 브라우즈의 최하단에 고정시키는 방법

    <div id="page"> <!--상단 메뉴 영역--> <nav class="gtco-nav"> <div class="container"> </div> </nav> <!-- Content 전용섹션 --> <div class="gtco-content"> </div> <!--하단 copyright 영역--> <footer id="gtco-footer"> <div class="container"> </div...
    Category :css Views33
    Read More

  4. 테두리(border) 상자에 화살표 모양 css로 출력하기

    보통 테두리를 만들때 아래와 같이 border를 사용하여 라인의 굵기와 형태 색상을 지정하고 background-color를 사용하여 배경색상을 출력합니다. // Html <div class="CommArea"> 내용글 </div> // css .CommArea { position:relative; width:100%; border:1p...
    Category :css Views986
    Read More

  5. 접기, 펼치기 folding기능 - <details> 와 <summary>로 간단하게 구현하기

    보통의 경우 접기, 펼치기 폴딩기능을 적용할려면 js를 사용해서 많이 구현합니다. 근데 js없이 Html과 Css만으로 간단하게 구현되는 코드가 있습니다. 바로 <details> 와 <summary> 코드인데요. <details>코드만 적용해도 아래와 같이 적용됩니다. <details> ...
    Category :html Reply6 Views33,298 평점 : 5.0점
    Read More

  6. 스크롤 바(Scrollbar) 스타일링

    스크롤 바를 꾸미는 간단한 방법 .mhcomm_normal::-webkit-scrollbar { width:5px; } .mhcomm_normal::-webkit-scrollbar-thumb { border:5px solid orange; }
    Category :css Views728
    Read More

  7. DIV 영역 자체에 링크 거는 방법

    DIV 영역 그 자체에 링크를 걸어서 DIV 영역을 클릭하면, 지정된 주소(URL)로 이동하도록 하려면 아래와 같이 스타일(style) 속성으로 지정해 주면 된다. [DIV 영역 자체에 링크 걸기] <div style=" cursor: pointer;" onclick="location.href='목적지 링크주...
    Reply4 Views32,634 평점 : 5.0점
    Read More
  8. No Image

    현재 시간 실시간으로 카운트 출력

    <span id="clock">{date("Y-m-d H:i:s", time());}</span> <!--// 현재 시간 실시간 카운트 --> <script> var srv_time = "{date("F d, Y H:i:s", time())}"; var now = new Date(srv_time); setInterval("server_time()", 1000); function server_time() { no...
    Category :JavaScript Views1,306
    Read More

  9. line-height 와 height의 차이점

    먼저 line-height는 글자가 한 줄에서 차지하는 높이를 말합니다. line-height가 10px이라고 한다면 한 줄에서 글자가 폰트 크기를 포함하여 총 10px의 높이를 차지한다는 걸 의미하게 됩니다. 위 그림을 보시면 ABC와 맞닿아 있는 위, 아래의 선을 제외하고 ...
    Category :css Views1,858
    Read More

  10. css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리

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

    flex로 세로 가로 정렬 하기

    팝업창이나 모달창을 화면에 중앙에 띄울때 여러 방법들이 있으나 요즘 가장 많이 쓰는 방법은 바로 flex. flex 효과 중 익스에서 안먹히는 것들이 있어 초기에는 자주 안 썼으나 지금은 익스를 많이 배제하므로 Pass~~ <div class="box"> <p> 팝업창이나 모달...
    Category :html Reply1 Views1,399
    Read More

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

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

    Hover시 테두리두께 설정

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

    display 속성: inline, block, inline-block

    CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다. 여러가지 display 속성값 중에서 가장 기본이지만 은근히 햇갈릴 수 있는 inline과 block, inline-block에 대해서 알아보도록 하...
    Category :css Views1,527
    Read More

  17. 글 색상을 랜덤으로 출력하기

    제목 그대로 글 색상을 랜덤으로 출력하는 방법입니다. html파일에 script를 아래와 같이 작성 <script> jQuery(function($){ for(var i=0 ; i < $(".random_colors").length; i++){ var f_color = "#"+(parseInt(Math.random()*0xffffff)).toString(16); $("....
    Category :css Views1,633
    Read More

  18. 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...
    Category :css Views2,575
    Read More

  19. 홈페이지에 화려한 에니메이션 효과를 주기 - aos animate

    Mh Justice Layout 을 만들면서 각 화면당 에니메이션 적용을 했었는데 https://freehtml5.co 에 있는 레이아웃을 보고 이전에 적용했던 에니메이션보다 효과가 뛰어나서 적용해 보았습니다. aos 에니메이션의 특징은 화면이 리플레쉬가 되지 않고도, 화면이 ...
    Category :JavaScript Views3,528
    Read More

  20. 웹퍼블리셔가 알고있어야 할 display:table 속성

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

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

    윤삼님이 Xetown에 올려주신 내용을 가져왔습니다. https://xetown.com/tips/1182610 간혹 보면 테이블 가로 사이즈가 화면사이즈보다 넓어서 화면 구성이 원활하지 않을 때가 있습니다. 저도 게시판 스킨에 확장변수 다중검색 애드온을 얹어서 아카이브 사이...
    Views2,501
    Read More
QR 이미지
목록
쓰기
Board Pagination Prev 1 2 3 4 Next
/ 4