모든 HTML 요소는 고유한 기본 display 값을 가지고 있으며, CSS의 display 속성을 통해 언제든지 이를 변경할 수 있습니다. 마찬가지로 모든 요소의 visibility는 기본적으로 visible로 설정되어 있지만, CSS의 visibility 속성으로 자유롭게 제어할 수 있습니다. 이 글에서는 두 속성이 어떻게 다르고, 각각 어떤 값들을 지원하는지 예제와 함께 자세히 살펴보겠습니다.CSS display 속성의 주요 값display 속성은 요소가 화면에 어떤 방식으로 배치될지 결정하는 핵심 속성입니다. 아래 표는 di
CSS overflow 속성이란?요소에 지정한 크기보다 내용이 많아지면 콘텐츠가 박스 밖으로 삐져나오는데, 이를 오버플로(overflow)라고 합니다. CSS의 overflow 속성을 사용하면 이렇게 넘친 콘텐츠를 원하는 방식으로 처리할 수 있습니다. 콘텐츠를 잘라내거나(clip), 스크롤바를 제공해 숨겨진 영역을 확인할 수 있게 하거나, 박스 밖으로 그대로 렌더링할 수도 있습니다.overflow 속성의 주요 값visible — 기본값. 넘친 콘텐츠가 요소 밖으로 그대로 표시됩니다.hidden — 요소 경계를 벗어난 부분을 잘라내고
CSS 테두리(Border)란 무엇인가? CSS의 border 속성은 요소의 테두리를 정의하는 데 사용되는 속성입니다. border-width(두께), border-style(스타일), border-color(색상)를 하나로 묶어 지정할 수 있는 단축 속성(shorthand)입니다. 또한 상·하·좌·우 각 변을 개별적으로 스타일링할 수 있고, border-radius를 활용해 둥근 모서리 효과도 손쉽게 구현할 수 있습니다. CSS 아웃라인(Outline)이란 무엇인가? 반면 outline 속성은 레이아웃 공간을 전혀 차지하지 않으
CSS 차원 속성이란? CSS에는 width, height, max-height 등 여러 가지 차원(dimension) 속성이 있으며, 이를 활용하면 요소 콘텐츠 박스(content box)의 크기를 자유롭게 제어할 수 있습니다. 차원 속성은 반응형 웹 디자인에서 특히 중요합니다. 고정된 픽셀(px) 값 대신 퍼센트(%)나 뷰포트 단위(vw, vh)를 함께 사용하면 다양한 화면 크기에 유연하게 대응하는 레이아웃을 만들 수 있습니다. 주요 차원 속성 정리 height / width — 요소의 기본 높이와 너비를 지정합니다. min-
텍스트 줄의 높이는 CSS의 line-height 속성으로 정의할 수 있습니다. 이 속성은 양수 값만 허용하며, 단위 없는 숫자, 백분율(%), px·em 등의 길이 단위 등 다양한 방식으로 지정할 수 있습니다. 줄 높이를 적절히 조절하면 텍스트의 가독성과 디자인 완성도를 크게 높일 수 있습니다.구문CSS line-height 속성의 기본 구문은 다음과 같습니다.Selector { line-height: /*value*/ }예제 1다음 예제는 요소별로 서로 다른 line-height 값을 적용하는 방법을 보여
CSS에서 height(높이)와 width(너비) 속성은 요소의 콘텐츠 영역에만 적용됩니다. 즉, 이 속성들로 지정한 크기에는 마진(margin), 패딩(padding), 테두리(border)가 포함되지 않습니다.참고로, 패딩과 테두리까지 포함한 전체 크기를 기준으로 계산하고 싶다면 box-sizing: border-box; 속성을 함께 사용하면 됩니다.기본 문법CSS height 속성의 기본 문법은 다음과 같습니다.Selector { height: /*값*/ }CSS width 속성의 기본 문법은 다음과 같습니다.Selec
CSS의 max-height 속성을 사용하면 요소 콘텐츠 박스의 최대 높이를 고정값으로 지정할 수 있습니다. 이 속성이 적용되면 실제 콘텐츠의 높이가 지정된 값보다 크더라도 요소가 그 이상으로 늘어나지 않습니다.기본 문법CSS max-height 속성의 기본 문법은 다음과 같습니다.Selector { max-height: /*값*/ }그럼 CSS max-height 속성의 실제 사용 예제를 살펴보겠습니다.예제 1 – 버튼 클릭으로 maxHeight 변경하기<!DOCTYPE html&g
HTML 문서에서 텍스트를 정렬하려면 CSS 속성을 활용하면 됩니다. 수평 정렬에는 text-align 속성을 사용하고, 수직 정렬에는 padding-top과 padding-bottom, 또는 line-height 속성을 사용합니다.기본 문법위에서 언급한 CSS 속성들의 기본 문법은 다음과 같습니다.Selector { text-align: center | left | right | justify | inherit | initial; } Selector { padding: /*값*/; } Selector { li
CSS 의사 클래스(가상 선택자)인 :link, :visited, :hover, :active를 사용하면 링크의 상태별로 서로 다른 스타일을 적용할 수 있습니다. 일반 텍스트와 차별화된 링크 디자인은 사용자에게 해당 요소가 클릭 가능하다는 것을 직관적으로 알려주므로, 웹 페이지의 사용성과 접근성을 높이는 데 큰 도움이 됩니다.선택자 선언 순서(LVHA)가 중요한 이유네 가지 의사 클래스는 모두 동일한 특이도(specificity)를 가지기 때문에, CSS 특성상 나중에 선언된 규칙이 먼저 선언된 규칙보다 우선 적용됩니다. 따라서 의
CSS에서는 하나의 스타일 시트 안에 다른 CSS 파일을 불러올 수 있습니다. 이때 사용하는 것이 바로 @import 규칙입니다. @import는 문서 내에서 외부 스타일 시트를 연결하는 역할을 하며, 주로 한 스타일 시트가 다른 스타일 시트에 의존하는 경우에 활용됩니다.@import 규칙은 반드시 문서의 최상단, 즉 <head> 내부의 @charset 선언 뒤에 위치해야 합니다.@import 규칙의 기본 문법@import 규칙의 기본적인 작성 형식은 다음과 같습니다.@import /*url 또는 미디어 쿼리 목록*/여기
CSS의 max-width 속성은 요소 콘텐츠 박스(content box)에 최대 너비를 지정하는 속성입니다. 이 속성을 적용하면 지정된 width 값이 max-width보다 크더라도 요소의 콘텐츠 박스가 그 값을 초과하여 확장되지 않습니다.max-width 속성의 주요 값none – 기본값으로, 최대 너비에 제한을 두지 않습니다.length – px, em, rem, cm 등 고정 단위로 최대 너비를 지정합니다.% – 부모(포함) 요소 너비를 기준으로 백분율로 지정합니다.initial – 속성을 기본값(none)으로 되돌립니다.i
CSS를 활용하면 요소의 개별 면 주변 공간을 세밀하게 제어할 수 있습니다. CSS의 margin 속성은 margin-top(위쪽), margin-right(오른쪽), margin-bottom(아래쪽), margin-left(왼쪽) 네 가지 하위 속성을 한 번에 다룰 수 있는 축약형(shorthand) 속성입니다. 특히 마진에는 음수 값도 허용되므로, 이를 활용하면 요소를 의도적으로 겹치게 배치하는 등 다양한 레이아웃 연출이 가능합니다. 문법(Syntax) CSS margin 관련 속성의 기본 문법은 다음과 같습니다. Selec
CSS의 border 속성은 요소에 테두리를 정의할 때 사용합니다. 이 속성 하나만으로 테두리의 두께(border-width), 스타일(border-style), 색상(border-color)을 한 번에 지정할 수 있어 표(table)뿐 아니라 모든 HTML 요소에 폭넓게 활용됩니다.문법(Syntax)Selector { border: /*value*/ }border 속성의 값은 일반적으로 테두리 두께, 스타일, 색상 순서로 작성하며, 예를 들어 border: 3px double green;
CSS 마진(Margin) 축약 속성이란? CSS margin 축약(shorthand) 속성은 요소의 여백 영역을 한 번에 정의할 때 사용합니다. 이 속성은 값을 시계 방향(top → right → bottom → left)으로 적용하며, 즉 위쪽(margin-top), 오른쪽(margin-right), 아래쪽(margin-bottom), 왼쪽(margin-left) 순서로 지정됩니다. 값 개수에 따른 동작 방식 값 1개: 네 방향 모두 동일한 여백이 적용됩니다. 값 2개: 첫 번째 값은 위/아래, 두 번째 값은 왼쪽/오른쪽에
CSS에서는 요소의 상·하·좌·우 각 면에 대해 서로 다른 패딩 값을 개별적으로 지정할 수 있습니다. padding-top, padding-right, padding-bottom, padding-left 속성은 각각 위, 오른쪽, 아래, 왼쪽 방향의 안쪽 여백을 담당합니다.또한 padding 단축 속성(shorthand)을 사용하면 시계 방향(위 → 오른쪽 → 아래 → 왼쪽) 순서로 값을 나열하여 같은 결과를 더 간결하게 얻을 수 있습니다. 참고로 값을 하나만 지정하면 네 면 모두에 적용되며, 두 개를 지정하면 첫 번째 값은 위/아
CSS의 caption-side 속성은 테이블 캡션 박스를 수직 방향으로 배치할 때 사용합니다. 이 속성에는 top과 bottom 두 가지 값을 지정할 수 있으며, 별도로 설정하지 않으면 캡션은 기본적으로 테이블 상단에 배치됩니다.구문CSS caption-side 속성의 기본 구문은 다음과 같습니다.Selector { caption-side: /*값*/}예제 1다음 예제는 caption-side 속성을 활용해 캡션을 테이블 하단에 배치하는 방법을 보여줍니다.<!DOCTYPE html&g
HTML 문서의 모든 요소는 CSS에 의해 하나의 직사각형 박스(box)로 취급됩니다. 이것이 CSS의 기본 레이아웃 방식이며, 필요에 따라 자유롭게 커스터마이징할 수 있습니다. 요소의 위치 지정, 콘텐츠 배치, 그리고 주변 요소와의 간격 조절은 모두 CSS 박스 모델을 기준으로 이루어집니다. 먼저 다음 이미지를 통해 박스 모델의 전체 구조를 살펴보겠습니다. 출처: w3.org CSS 박스 모델의 4가지 구성 요소 1. 콘텐츠(Content) 텍스트, 이미지, 동영상 등 실제 데이터가 표시되는 영역입니다. width와 height
CSS의 cursor 속성을 활용하면 HTML 문서 내 각 요소마다 마우스 커서의 모양을 자유롭게 지정할 수 있습니다. 링크 위에서 화살표가 손 모양으로 바뀌거나, 텍스트 위에서 I자 형태로 변하는 것도 모두 이 속성 덕분입니다. 이 글에서는 cursor 속성의 기본 문법과 함께 사용 가능한 39가지 값을 하나씩 살펴보겠습니다. 기본 문법 CSS cursor 속성의 문법은 다음과 같습니다. 선택자 { cursor: /*값*/ } cursor 속성의 주요 값 아래 표는 CSS curso
CSS의 letter-spacing 속성을 사용하면 텍스트에서 글자와 글자 사이의 간격(자간)을 간편하게 조절할 수 있습니다. 이 속성은 normal, px, em, pt 등 다양한 단위의 값을 가질 수 있으며, 음수 값을 지정하면 글자 간격을 좁혀 더욱 촘촘한 느낌을 연출할 수도 있습니다.문법(Syntax)Selector { letter-spacing: /*value*/ }아래 예제들을 통해 CSS letter-spacing 속성의 실제 사용법을 살펴보겠습니다.예제 1첫 번째 예제는 순서 있는 목록(li) 항목에 lette
CSS의 overflow 속성은 크기가 정해진 컨테이너보다 콘텐츠가 클 때, 콘텐츠 자체의 크기를 조정하지 않고 어떻게 표시할지를 제어하는 데 유용합니다. 이 속성을 사용하면 넘치는 콘텐츠를 잘라내거나(clip), 스크롤바를 제공해 잘린 부분을 볼 수 있게 하거나, 컨테이너 밖으로 콘텐츠를 그대로 렌더링할 수 있습니다. 컨테이너 밖으로 흘러넘친다는 의미에서 이름도 overflow입니다. 기본 문법 CSS overflow 속성의 기본 문법은 다음과 같습니다. Selector { overflo