Html Tips
홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다
-
Colorbox 사용법 2탄
기본적인 이미지 팝업 Colorbox 사용법을 이전 게시글에 작성했는데 이번에는 레이아웃이나 게시판에 일반적인 팝업창을 띄우는 방법을 남깁니다. 먼저 설치방법은 이전 게시글 에 있는 방법으로 따라하세요. 1. 일반적인 레이아웃에 적용방법 •/layouts/해당... -
Colorbox 사용법
이미지를 팝업으로 화면에 띄우는 대표적인 플러그인이 LightBox 입니다. 데모 : https://moonhouse.co.kr/lb 원소스 : https://lokeshdhakar.com/projects/lightbox2 지금껏 주로 사용을 해 오다. Mh Gallery 프로그램을 만들다 좀더 나은 것을 찾다가 발견한... -
css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리
css 작성할 때 종종 em rem까지는 작성할 때도 있긴 한데, 보통은 귀찮아서 반응형일 때는 %에 의존하고 그 외에는 그냥 대부분 px처리 해버리곤 한다.. 하지만 폰트나 블록 영역 크기를 조절할 때 사용하는 요 요소들을 적절히 사용해주면 보다 간단하면서도 ... -
No Image
flex로 세로 가로 정렬 하기
팝업창이나 모달창을 화면에 중앙에 띄울때 여러 방법들이 있으나 요즘 가장 많이 쓰는 방법은 바로 flex. flex 효과 중 익스에서 안먹히는 것들이 있어 초기에는 자주 안 썼으나 지금은 익스를 많이 배제하므로 Pass~~ <div class="box"> <p> 팝업창이나 모달... -
버튼 클릭시 클립보드에 복사하는 방법
엣지브라우즈 : 크롬(웨일)브라우즈 : 위와 같이 해당문구를 복사버턴 클릭시 클립보드로 복사하는 소스입니다. <p class="box01"> 엣지브라우즈 : <input value="edge://flags/#block-insecure-private-network-requests" readonly> <button onclick="copy_to... -
No Image
Hover시 테두리두께 설정
이미지나 게시글 출력후 마우스 Hover시 테두리라인 색상이나 두께를 나타내고자 할때 A같이 코드를 주면 두께만큼 아래 위로 영역이 움직입니다. A 내용 영역 <style type="text/css"> .a { background:black; color:white; width:200px; text-align:center; ... -
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... -
No Image
display 속성: inline, block, inline-block
CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다. 여러가지 display 속성값 중에서 가장 기본이지만 은근히 햇갈릴 수 있는 inline과 block, inline-block에 대해서 알아보도록 하... -
접기, 펼치기 folding기능 간단하게 구현하기
보통의 경우 접기, 펼치기 폴딩기능을 적용할려면 js를 사용해서 많이 구현합니다. 근데 js없이 Html과 Css만으로 간단하게 구현되는 코드가 있습니다. 바로 <details> 와 <summary> 코드인데요. <details>코드만 적용해도 아래와 같이 적용됩니다. <details> ... -
글 색상을 랜덤으로 출력하기
제목 그대로 글 색상을 랜덤으로 출력하는 방법입니다. html파일에 script를 아래와 같이 작성 <script> jQuery(function($){ for(var i=0 ; i < $(".random_colors").length; i++){ var f_color = "#"+(parseInt(Math.random()*0xffffff)).toString(16); $(".... -
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... -
홈페이지에 화려한 에니메이션 효과를 주기 - aos animate
Mh Justice Layout 을 만들면서 각 화면당 에니메이션 적용을 했었는데 https://freehtml5.co 에 있는 레이아웃을 보고 이전에 적용했던 에니메이션보다 효과가 뛰어나서 적용해 보았습니다. aos 에니메이션의 특징은 화면이 리플레쉬가 되지 않고도, 화면이 ... -
웹퍼블리셔가 알고있어야 할 display:table 속성
오늘 다룰 주제는 사이트에서 많이 사용되는 형태인 동일한 넓이와 간격을 가지고 있는 컨텐츠 (정확한 명칭을 몰라서 ㅎㅎ....) 에 대해 알아보도록 하겠습니다. (글이 지루하신 분은 Ctrl + F 를 눌러 '결론' 을 검색해 주시지 마세요. 읽고서 댓글로 짱똘 ... -
No Image
HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때
윤삼님이 Xetown에 올려주신 내용을 가져왔습니다. https://xetown.com/tips/1182610 간혹 보면 테이블 가로 사이즈가 화면사이즈보다 넓어서 화면 구성이 원활하지 않을 때가 있습니다. 저도 게시판 스킨에 확장변수 다중검색 애드온을 얹어서 아카이브 사이... -
CSS 말줄임 처리하기
일반적으로 글자가 넘어가는 경우를 대비해서 백엔드단계에서 글자수를 특정지어서 자르는 방법을 많이 사용합니다. 헌데 이방법을 사용할시 영어, 숫자, 한글의 자간이 달라 일관되지 않는 모습을 보이는 경우가 많아서 뷰 단계에서 글자가 넘어갈경우 말줄임... -
No Image
폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법
폰트에 속성을 주는 방법은 <font >태그와 다른 태그 안의 스타일(style) 속성 두 가지를 쓸 수 있겠다. 이전에는 폰트를 적용할 때 <font > ~~ </font>와 같이 하였는데, HTML5에서는 <font>태그를 지원하지 않는다. 물론, HTML5가 일반화되고 브라우저 버전... -
DIV 영역 자체에 링크 거는 방법
DIV 영역 그 자체에 링크를 걸어서 DIV 영역을 클릭하면, 지정된 주소(URL)로 이동하도록 하려면 아래와 같이 스타일(style) 속성으로 지정해 주면 된다. [DIV 영역 자체에 링크 걸기] <div style=" cursor: pointer;" onclick="location.href='목적지 링크주... -
DIV 화면 정중앙에 박스 배치하기
DIV로 만든 박스를 화면 정중앙에 배치하는 방법은 생각보다 간단하지가 않습니다. 특히 박스의 가로 크기가 변하는 경우는 더욱더 어렵습니다. 예를 들면 Popup위젯의 경우가 해당됩니다. - 일반적인 코드 - <style> #content { position:absolute; height:20... -
DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; )
DIV 가로 중앙 정렬, 세로 중앙 정렬 코딩을 할 때 가장 기본이 되지만 또 가장 어려웠던 부분이었다. display:flex; 이 코드를 알고 나서 정말 쉽게 코딩이 가능해졌다. 바깥쪽 div, 즉 부모 div에 display:flex; 를 선언하면. 안쪽 엘리먼트, 즉 자식div에 ... -
커서(cursor) 모양 정리
마우스 커서 모양에 대해 알아보겠습니다. 보통 cursor 작업을 하면 pointer 위주로 작업을 합니다. 하지만 pointer 외에 아주 많는 cursor 가 있습니다. 그종류에 대해 소스와 샘플을 올려봅니다. 적절한 cursor 지정을 통해 사용자 편의를 고려해보시기 바랄...