CSS의 text-align 속성을 사용하면 요소 안의 텍스트를 수평 방향으로 정렬할 수 있습니다. 이 속성에는 left(왼쪽 정렬), right(오른쪽 정렬), justify(양쪽 맞춤), center(가운데 정렬) 네 가지 값을 지정할 수 있습니다.문법(Syntax)CSS text-align 속성의 기본 문법은 다음과 같습니다.Selector { text-align: /*value*/ }예제 1다음 예제는 CSS text-align 속성의 다양한 사용법을 보여줍니다.<!DOCTYPE html>
CSS의 z-index 속성을 사용하면 개발자가 여러 요소를 서로 겹쳐 쌓는(stacking) 레이아웃을 손쉽게 구현할 수 있습니다. z-index는 양수 또는 음수 값을 가질 수 있으며, 값이 클수록 화면에서 앞쪽(위)에 배치됩니다.z-index 사용 시 주의사항참고: 서로 겹치는 요소들에 z-index가 지정되어 있지 않다면, 문서(document)에서 마지막에 작성된 요소가 가장 위에 표시됩니다.예제 1: 음수 z-index로 요소 쌓기다음은 z-index 속성을 활용한 첫 번째 예제입니다.<!DOCTYPE html>
::first-letter 가상 요소란? CSS의 ::first-letter 가상 요소(의사 요소)는 요소 콘텐츠의 첫 번째 글자만 선택하여 별도의 스타일을 적용할 수 있게 해줍니다. 신문이나 잡지에서 흔히 볼 수 있는 드롭캡(drop cap) 효처럼 단락의 첫 글자를 크고 눈에 띄게 강조하고 싶을 때 유용하게 활용됩니다. 단, 주의할 점이 있습니다. 이 가상 요소는 인라인(inline) 레벨 요소에는 동작하지 않습니다. 인라인 요소에 적용하려면 먼저 display: block; 또는 display: inline-block;으로
미디어 종속 스타일시트란 무엇인가?미디어 종속 스타일시트(Media Dependent Stylesheet)는 기본적인 CSS 스타일시트와 동일하지만, 미디어 타입(media type)이 문서가 표시되는 기기의 유형과 일치할 때에만 HTML 문서에 적용되는 스타일시트입니다.예를 들어 화면(screen)용 스타일과 인쇄(print)용 스타일을 각각 다르게 지정하면, 같은 HTML 문서라도 모니터에서 볼 때와 종이로 출력할 때 서로 다른 모습으로 렌더링됩니다.미디어 종속 스타일시트를 만드는 3가지 방법@media At-Rule 사용하기@
CSS의 @media 규칙은 하나의 스타일시트 안에서 인쇄(print), 화면(screen), 전체(all) 등 서로 다른 미디어 유형에 맞춰 각각 다른 스타일을 적용할 수 있게 해주는 강력한 기능입니다. 반응형 웹 디자인의 핵심 요소로, 미디어 유형 목록과 해당 미디어에 적용할 CSS 선언 블록을 함께 작성합니다.기본 문법@media 규칙의 기본 문법은 다음과 같습니다.@media not | only mediatype and (표현식) { CSS 코드; }여기서 not이나 only는 선택
CSS :nth-child() 의사 클래스(가상 클래스)는 부모 요소 안에서 n번째 자식에 해당하는 요소를 선택할 때 사용합니다. 특정 순서의 요소만 골라 색상이나 폰트 등 다른 스타일을 적용해야 할 때 매우 유용하며, 리스트·테이블·카드 레이아웃 등에서 널리 활용됩니다.문법(Syntax)기본 문법은 다음과 같습니다.:nth-child(n){ /* 선언부 */ }괄호 안에는 숫자뿐 아니라 odd, even, 또는 2n+1 같은 수식도 지정할 수 있어, 짝수/홀수 번째 항목을 일괄 선택하는
CSS 가상 요소(Pseudo-element)는 실제 HTML 태그를 추가하지 않으면서 요소의 특정 부분만 선택해 스타일을 적용할 수 있게 해주는 강력한 선택자입니다. 예를 들어 텍스트의 첫 글자(first-letter), 첫 줄(first-line)처럼 문서 구조에는 존재하지 않는 부분도 꾸밀 수 있습니다.특히 ::before와 ::after 가상 요소를 활용하면 각각 요소의 앞과 뒤에 새로운 콘텐츠를 삽입할 수 있어, 번호 매기기나 장식용 요소 추가 등 다양한 작업을 CSS만으로 처리할 수 있습니다.기본 문법CSS에서 가상 요소
웹 개발에서 HTML 페이지에 CSS 스타일을 적용하는 방법은 크게 세 가지입니다. 각 방식은 용도와 장단점이 뚜렷하므로, 상황에 맞게 선택하는 것이 중요합니다.CSS를 포함하는 세 가지 방식인라인(Inline) 방식HTML 요소의 style 속성에 직접 CSS 스타일을 작성하는 방법입니다. 간단한 테스트나 일회성 스타일 적용에는 편리하지만, 코드 재사용성이 떨어지고 유지보수가 어려워 실무에서는 내부 또는 외부 방식으로 CSS 파일을 모듈화하는 것이 권장됩니다.내부(Internal) 방식HTML 문서의 <head> 태그
HTML 문서에 CSS를 적용하는 방법은 크게 세 가지입니다. 요소에 직접 스타일을 지정하는 인라인(inline) 방식, <head> 안의 <style> 태그에 작성하는 내부(internal) 방식, 그리고 별도의 CSS 파일을 연결하는 외부(external) 방식이 그것입니다. 기본 문법 HTML 문서에 CSS를 포함할 때 사용하는 기본 문법은 다음과 같습니다. /* 인라인 */ <element style="/*스타일 선언*/"></element> /* 내부 */ &l
CSS의 요소 유형 선택기(element type selector)는 문서 내에서 특정 태그 이름을 가진 모든 요소를 한 번에 선택하는 기본적인 선택기입니다. 예를 들어 li 선택기를 사용하면 페이지 안의 모든 <li> 요소에 동일한 스타일이 적용됩니다.문법(Syntax)element { /* 선언부 */ }선택자 자리에 HTML 태그 이름을 그대로 작성하면 되며, 별도의 점(.)이나 해시(#) 같은 기호가 필요하지 않습니다.예제 1아래 예제는 요소 유형 선택기를 활용해 li와 div 요소에 스타일
CSS 하위 선택자(descendant selector)는 첫 번째 요소의 자손 중에서 두 번째 선택자와 요소 이름이 일치하는 모든 요소를 선택할 때 사용합니다. 여기서 자손은 바로 아래 단계인 자식뿐만 아니라, 몇 단계든 깊게 중첩된 모든 후손 요소까지 포함한다는 점이 핵심입니다.문법CSS 하위 선택자의 기본 문법은 다음과 같습니다.element element { /* 선언부 */ }첫 번째 element는 조상(ancestor) 요소를, 두 번째 element는 그 안에서 찾고자 하는 자손(descend
outline-width 속성이란?outline-width 속성은 요소의 테두리 바깥쪽에 특정 두께의 선을 그릴 때 사용합니다. border 속성과 비슷해 보이지만 중요한 차이가 있습니다. 아웃라인(outline)은 요소의 실제 크기(dimension)에 포함되지 않기 때문에, 레이아웃이나 요소 배치에 영향을 주지 않으면서 시각적인 강조 효과를 낼 수 있습니다.문법(Syntax)CSS outline-width 속성의 기본 문법은 다음과 같습니다.Selector { outline-width:
CSS의 min-width 속성은 요소의 콘텐츠 박스(content box)에 고정된 최소 너비를 지정할 때 사용합니다. 이 속성이 적용되면 요소의 너비가 아무리 작게 설정되더라도 콘텐츠 박스는 min-width로 지정한 값보다 좁아지지 않습니다.문법(Syntax)CSS min-width 속성의 기본 문법은 다음과 같습니다.Selector { min-width: /*value*/ }예제 1min-width 속성의 첫 번째 활용 예제를 살펴보겠습니다.<!DOCTYPE html> <html>
CSS에서 사용하는 절대 단위(Absolute Units)와 상대 단위(Relative Units)는 모두 거리(Distance) 단위 범주에 속합니다. 두 단위의 가장 큰 차이는 기준점입니다. 절대 단위는 화면이나 출력 환경과 무관하게 고정된 물리적 값을 가지는 반면, 상대 단위는 다른 요소나 뷰포트를 기준으로 길이가 결정됩니다.CSS 상대 단위(Relative Units)상대 단위는 특정 요소의 길이를 다른 요소 또는 뷰포트를 기준으로 정의합니다. 예를 들어 vh 단위는 뷰포트(viewport)의 높이를 기준으로 값이 계산됩니다
CSS의 min-height 속성을 사용하면 요소 콘텐츠 박스(content box)의 최소 높이를 고정할 수 있습니다. 이 속성이 적용되면 실제 height 값이 min-height보다 작더라도 콘텐츠 박스가 그 이하로 줄어들지 않습니다.즉, 콘텐츠 양이 적은 경우에도 일정한 최소 높이를 유지해야 하는 레이아웃을 만들 때 매우 유용합니다.문법(Syntax)CSS min-height 속성의 기본 문법은 다음과 같습니다.Selector { min-height: /*값*/ }사용 가능한 값길이
CSS의 clear 속성은 float(부동) 처리된 요소 주변에서 흐르는 콘텐츠를 어느 쪽 면에서 제거할지 지정할 때 사용합니다. 즉, 요소가 왼쪽 또는 오른쪽에 떠 있는 다른 요소와 겹치지 않도록 배치를 조절하는 역할을 합니다.clear 속성의 주요 값left – 왼쪽에 떠 있는(float: left) 요소 아래로 내려갑니다.right – 오른쪽에 떠 있는(float: right) 요소 아래로 내려갑니다.both – 양쪽 모두에 떠 있는 요소를 피해 아래로 이동합니다.none – 기본값으로, float 요소의 영향을 받지 않습니다
CSS는 요소 자체 또는 요소 내부의 콘텐츠를 수평, 수직, 중앙 방향으로 정렬할 수 있는 다양한 옵션을 제공합니다. 상황에 맞는 정렬 기법을 익혀두면 레이아웃 작업이 훨씬 수월해집니다. 수평 정렬 인라인(Inline) 요소텍스트, 앵커(a), span 등 인라인 또는 인라인 블록 요소는 CSS의 text-align 속성을 사용하여 수평 정렬할 수 있습니다. 블록 레벨(Block-level) 요소div, p 같은 블록 레벨 요소는 CSS의 margin 속성으로 수평 정렬합니다. 단, 요소의 너비가 부모 요소 기준 100%라면 정렬
CSS에서 요소의 position 속성을 absolute(절대)로 설정하면, 해당 요소는 static이 아닌 위치 값을 가진 가장 가까운 조상(부모) 요소를 기준으로 배치됩니다. 만약 그러한 조상 요소가 존재하지 않는다면 뷰포트(초기 컨테이닝 블록)를 기준으로 위치하게 됩니다.절대 위치 지정된 요소는 left, right, top, bottom과 같은 CSS 위치 속성을 통해 정확한 좌표를 지정할 수 있으며, 일반 문서 흐름(normal flow)에서 완전히 분리되므로 주변 요소의 배치에는 영향을 주지 않습니다.절대 위치 지정의 핵
CSS의 float(부동) 속성은 박스나 콘텐츠를 배치하고 서식을 지정할 때 사용하는 대표적인 위치 지정 도구입니다. 이 속성을 활용하면 요소를 컨테이너의 왼쪽 또는 오른쪽으로 띄워 배치할 수 있으며, 이미지 주변으로 텍스트가 흐르게 만드는 등 다양한 레이아웃 구성에 활용됩니다.float 속성의 주요 값float 속성에는 다음 네 가지 값을 지정할 수 있습니다.left − 요소가 컨테이너의 왼쪽으로 떠다닙니다.right − 요소가 컨테이너의 오른쪽으로 떠다닙니다.none − 요소가 떠다니지 않습니다.
CSS :first-child 의사 클래스는 어떤 부모 요소의 첫 번째 자식 요소에 해당하는 요소를 선택하는 선택자입니다. 목록의 첫 항목이나 테이블의 첫 번째 열처럼 특정 위치에 있는 요소만 다르게 스타일링하고 싶을 때 매우 유용하게 활용됩니다. 문법(Syntax) :first-child 의사 클래스의 기본 문법은 다음과 같습니다. :first-child{ /*선언부*/ } 예제 1: 테이블 첫 번째 열 스타일링하기 다음은 :first-child 의사 클래스를 사용하여 테이블의 첫 번째 셀(td, th)에서만 왼쪽 테두리를