분류 전체보기 (69) 2023년 팬톤 올해의 컬러 - Viva Magenta 2023년 팬톤이 선정한 올해의 컬러 Viva Magenta 비바 마젠타 Pantone의 올해의 색상인 Viva Magenta 18-1750은 활기와 활력으로 진동합니다. 레드 계열의 자연에 뿌리를 둔 그늘이며 새로운 힘의 신호를 표현합니다. Viva Magenta 18-1750 HEX #BB2649 RGB ( 187, 38, 73 ) CMYK ( 0%, 80%, 61%, 27% ) HSB ( 346°, 80%, 73% ) 2022년 팬톤 올해의 컬러 - Very Peri 2022년 팬톤이 선정한 올해의 컬러 Very Peri 베리 페리 용기 있는 존재감으로 개인의 독창성과 창의력을 자극하는 새로운 팬톤 컬러 Very Peri 17-3938 HEX #6667AB RGB ( 102, 103, 171 ) CMYK ( 40%, 40%, 0%, 33% ) HSB ( 239°, 40%, 67% ) [CSS] 툴팁(tooltip) 만들기 간단하게 툴팁을 만드는 방법입니다. 툴팁 텍스트해당 글자에 마우스를 올리면 나타나는 보충 설명를 볼 수 있습니다. 1. HTML 툴팁 텍스트해당 글자에 마우스를 올리면 나타나는 보충 설명를 볼 수 있습니다. 2. CSS .text { position: relative; border-bottom: 1px dotted #0026dd; color: #0026dd; cursor: default; } .tooltip { visibility: hidden; min-width: 150px; padding: 8px; background: #000; border-radius: 6px; font-size: 13px; color: #fff; position: absolute; top: 26px; left: 50%; z-in.. [jQuery] 위로 슬라이드 되는 메뉴 만들기 위로 슬라이드 되며 펼쳐지는 메뉴를 만드는 방법입니다. 사이트 하단에 '관련 사이트' 링크 리스트를 만들 때에 사용할 수 있습니다. 관련 사이트 관련 사이트 1 관련 사이트 2 관련 사이트 3 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 관련 사이트 관련 사이트 1 관련 사이트 2 관련 사이트 3 3. CSS .family_menu { position: relative; display: inline-block; *display: inline; *zoom: 1; } .btn_family { height: 45px; padding: 0 30px 0 15px; background: #fff; border: 1px solid #333; font-size: 15px; color: #000; cursor:.. [CSS] display와 visibility 차이 display 는 요소를 인라인 속성으로 보여줄지, 블록 속성으로 보여줄지 등 요소의 표시 방법을 지정합니다. visibility 는 요소의 표시 또는 숨김 여부를 지정합니다. display: none 과 visibility: hidden 이 속성들은 둘 다 요소를 숨겨 보이지 않게 합니다. 요소를 숨기는 기능은 똑같지만 차이점이 있습니다. display: none 은 요소의 영역까지 없애기 때문에, 마치 페이지에 해당 요소가 없는 것처럼 표시됩니다. visibility: hidden 은 요소는 숨기지만 영역은 그대로 남겨두므로, 해당 요소의 영역이 공백으로 표시됩니다. 다음 예시에서 빨강, 노랑, 초록 중 가운데 있는 노랑을 숨겨보겠습니다. 빨강 노랑 초록 display: none .yellow { d.. [CSS] 글자 간격(자간) 조절하기 글자 사이의 간격을 늘리거나 줄이고 싶다면 letter-spacing 속성을 사용할 수 있습니다. letter-spacing 속성의 기본값은 0 입니다. 속성 값에는 px, em 등의 단위를 사용할 수 있습니다. 자간을 늘리고자 한다면 아래와 같이 양수 값을 넣으면 됩니다. p { letter-spacing: 10px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquen.. [CSS] a 태그 스타일 적용 및 밑줄 제거 태그는 4가지 상태를 가지고 있습니다. a:link 사용자가 링크를 방문하지 않은 기본 상태 a:visited 사용자가 링크를 방문한 후의 상태 a:hover 사용자가 링크에 마우스를 올릴 때의 상태 a:active 사용자가 링크를 클릭하는 순간의 상태 각 상태별로 text-decoration , background , color , font-size 등 이외의 다양한 스타일 속성을 각각 적용할 수 있습니다. 스타일을 적용할 경우 상태의 순서는 반드시 아래와 같이 작성해주세요. a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-d.. [CSS] 줄바꿈 방지하기 내용이 길어 콘텐츠 영역을 넘어가게 되면 기본적으로 줄바꿈이 됩니다. 아래와 같이 설정하면 자동 줄바꿈을 방지할 수 있습니다. div { white-space: nowrap; } 이전 1 2 3 4 5 6 ··· 9 다음
