국비 코딩 수업 2일차 CSS 마스터하기: 선택자부터 박스 모델, 스타일 상속까지 완벽 정복!

국비 코딩 수업 2일차 CSS 마스터하기: 선택자부터 박스 모델, 스타일 상속까지 완벽 정복!

웹 디자인의 꽃, CSS! 국비 코딩 수업 이틀차, CSS의 세계에 발을 들여놓으셨나요? 어렵고 복잡해 보이는 CSS도 차근차근 배우면 어렵지 않아요! 오늘은 CSS 선택자부터 박스 모델, 스타일 상속까지 핵심 개념을 짚어보고, 실제 예제와 함께 익혀보는 시간을 가져보도록 하겠습니다.

1. CSS 선택자: 웹 요소를 골라내는 마법

CSS를 사용하여 특정 웹 요소의 스타일을 변경하려면 먼저 그 요소를 정확하게 선택해야 합니다. 이때 사용하는 것이 바로 CSS 선택자입니다. 선택자는 마치 마법 주문처럼 원하는 요소를 정확하게 가리켜 스타일을 적용할 수 있게 해주는 중요한 역할을 합니다.

1.1 기본 선택자

• * (Universal Selector): 모든 HTML 요소를 선택합니다. 예를 들어 * { font-size: 16px; }는 모든 요소의 글꼴 크기를 16픽셀로 설정합니다. 너무 광범위하게 사용하면 다른 스타일을 덮어쓸 수 있으니 주의해야 합니다.
• Type Selector: HTML 태그 이름으로 요소를 선택합니다. 예를 들어 p { color: blue; }는 모든 <p> 태그의 텍스트 색상을 파란색으로 변경합니다.
• Class Selector (.class-name): HTML 요소의 class 속성 값으로 요소를 선택합니다. 예를 들어 <div class="my-class">...</div> 요소는 .my-class { background-color: red; }를 통해 배경색을 빨간색으로 설정할 수 있습니다. 여러 요소에 같은 클래스를 적용하여 일관된 스타일을 유지하는 데 유용합니다.
• ID Selector (#id-name): HTML 요소의 id 속성 값으로 요소를 선택합니다. id는 각 페이지에서 유일해야 하며, 특정 요소를 정확히 지정할 때 사용합니다. 예를 들어 <div id="unique-box">...</div> 요소는 #unique-box { width: 300px; }를 통해 너비를 300픽셀로 설정할 수 있습니다. 하나의 id는 한 페이지에 오직 한 번만 사용해야 합니다.

1.2 복합 선택자

여러 기본 선택자를 조합하여 더욱 정교하게 요소를 선택할 수 있습니다.

• Descendant Selector (ancestor descendant): 조상 요소 안에 있는 모든 후손 요소를 선택합니다. 예를 들어 div p { color: green; }는 <div> 요소 내부에 있는 모든 <p> 요소의 텍스트 색상을 녹색으로 설정합니다.
• Child Selector (parent > child): 부모 요소의 직접 자식 요소만 선택합니다. div > p { color: purple; }는 <div> 요소의 직접 자식인 <p> 요소만 선택합니다.
• Adjacent Sibling Selector (prev + next): 이전 형제 요소 바로 다음에 오는 형제 요소를 선택합니다. 예를 들어 h2 + p { font-weight: bold; }는 <h2> 태그 바로 다음에 오는 <p> 태그의 글꼴을 굵게 만듭니다.
• General Sibling Selector (prev ~ siblings): 이전 형제 요소 다음에 오는 모든 형제 요소를 선택합니다. 예를 들어 h2 ~ p { font-style: italic; }는 <h2> 태그 다음에 오는 모든 <p> 태그의 글꼴을 기울임꼴로 만듭니다.

1.3 가상 클래스 선택자

요소의 상태나 위치에 따라 스타일을 다르게 적용할 수 있도록 해주는 선택자입니다.

• :hover: 마우스 커서가 요소 위에 있을 때 적용되는 스타일을 정의합니다. 예를 들어 a:hover { color: red; }는 링크에 마우스를 올렸을 때 텍스트 색상을 빨간색으로 변경합니다.
• :active: 마우스 버튼을 누르고 있는 동안 적용되는 스타일을 정의합니다.
• :focus: 요소가 포커스를 가졌을 때(예: 입력창 클릭 시) 적용되는 스타일을 정의합니다. input:focus { border: 2px solid blue; } 처럼 사용합니다. tabindex 속성을 활용하면 focus를 가질 수 없는 요소에도 focus를 적용할 수 있어요.
• :first-child, :last-child, :nth-child(): 부모 요소의 첫 번째, 마지막, n번째 자식 요소를 선택합니다.
• :not(): 특정 선택자를 제외한 모든 요소를 선택합니다. div:not(.exclude) { ... } 처럼 사용합니다. .exclude 클래스를 제외한 모든 <div> 요소에 스타일을 적용하겠다는 의미입니다.

1.4 가상 요소 선택자

요소의 앞이나 뒤에 콘텐츠를 추가할 때 사용하는 선택자이며, :: 콜론 두 개를 사용한다는 점을 기억하세요!

• ::before: 요소의 콘텐츠 앞에 콘텐츠를 추가합니다. 예를 들어 p::before { content: "참고: "; }는 모든 <p> 태그의 앞에 “참고: ” 라는 텍스트를 삽입합니다.
• ::after: 요소의 콘텐츠 뒤에 콘텐츠를 추가합니다.

1.5 속성 선택자

HTML 요소의 속성을 기반으로 요소를 선택할 수 있습니다.

• [attribute]: 특정 속성을 가진 모든 요소를 선택합니다.
• [attribute=value]: 특정 속성과 값을 가진 요소를 선택합니다.

2. CSS 박스 모델: 웹 요소의 구조 이해하기

CSS 박스 모델은 웹 페이지 요소를 상자(박스)**로 간주하고, 각 상자의 구성 요소인 **콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 나누어 요소의 크기와 위치를 조절하는 방식입니다.

이해하기 쉽게 표로 정리해 드릴게요!

요소	설명	예시
콘텐츠 (content)	요소의 실제 내용 (텍스트, 이미지 등)	텍스트, 이미지
패딩 (padding)	콘텐츠와 테두리 사이의 공간	padding: 10px;
테두리 (border)	요소의 경계선	border: 1px solid black;
마진 (margin)	요소와 다른 요소 사이의 공간	margin: 20px;

박스 모델은 CSS 레이아웃의 기본이며, 웹 디자인에서 가장 중요한 개념 중 하나입니다.

다양한 속성을 조합하여 요소의 크기와 위치를 정확하게 제어할 수 있어요.

3. 인라인 요소와 블록 요소: 요소의 행동 이해하기

HTML 요소는 크게 인라인 요소와 블록 요소로 나뉩니다. 두 요소의 특징을 비교해보면 다음과 같습니다.

• 인라인 요소: <span>, <a>, <img> 등. 줄바꿈이 없고, 가로 방향으로만 공간을 차지합니다. width와 height 속성을 적