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