소개
이 랩에서는 구조화된 HTML 문서를 생성하고 타겟 스타일을 적용하여 CSS 자손 선택자 (descendant selectors) 의 강력함을 탐구합니다. 이 랩은 기본 HTML 파일을 생성하고, 단락이 있는 div 요소를 추가한 다음, CSS 를 사용하여 div 내의 단락에 특정 스타일을 적용하는 과정을 안내합니다. 자손 선택자를 사용하면 다른 요소 내에 중첩된 요소에 스타일을 적용하여 웹 페이지 디자인을 정밀하게 제어할 수 있습니다. 단계별 프로세스를 따르면, 보다 정교하고 미묘한 웹 페이지 레이아웃을 만드는 데 필수적인 기술인 자손 선택자를 이해하고 구현하는 실질적인 경험을 얻을 수 있습니다.
기본 구조를 갖춘 HTML 파일 생성
이 단계에서는 CSS 자손 선택자 (descendant selectors) 를 탐구하기 위한 기반이 될 기본 HTML 파일 구조를 생성합니다. HTML 은 웹 콘텐츠의 구조를 제공하며, 잘 구성된 문서를 만드는 것은 웹 개발의 첫 번째 단계입니다.
WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하거나 파일 생성 메뉴를 사용하여 index.html이라는 새 파일을 생성합니다.
다음은 생성할 기본 HTML 구조입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Descendant Selector Example</title>
</head>
<body>
<!-- Content will be added in subsequent steps -->
</body>
</html>
이 HTML 구조의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 HTML5 문서임을 선언합니다.<html lang="en">은 언어 사양이 있는 루트 요소입니다.<head>는 문서에 대한 메타데이터를 포함합니다.<meta charset="UTF-8">는 올바른 문자 인코딩을 보장합니다.<title>은 브라우저 탭에 표시되는 페이지 제목을 설정합니다.<body>는 페이지의 주요 콘텐츠가 배치될 위치입니다.
파일을 생성한 후 ~/project 디렉토리에 저장합니다. 이 기본 구조는 다음 단계에서 콘텐츠를 추가하고 CSS 스타일을 적용하기 위한 깨끗한 시작점을 제공합니다.
Div 요소와 문단 추가
이 단계에서는 HTML 파일에 <div> 요소와 <p> (단락) 요소를 추가하는 방법을 배웁니다. 이러한 요소는 웹 페이지에서 콘텐츠를 구조화하는 데 기본이며, 자손 선택자 (descendant selectors) 가 어떻게 작동하는지 이해하는 데 도움이 됩니다.
WebIDE 를 사용하여 이전 단계에서 생성한 index.html 파일을 엽니다. <p>가 포함된 <div>를 포함하도록 <body> 섹션을 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Descendant Selector Example</title>
</head>
<body>
<div>
<p>
This is a paragraph inside a div element. We'll use this to demonstrate
descendant selectors in CSS.
</p>
</div>
</body>
</html>
새로운 요소를 살펴보겠습니다.
<div>는 콘텐츠를 그룹화하고 구조화하는 데 사용되는 컨테이너 요소입니다.<p>는 텍스트 단락을 나타냅니다.- 단락은 div 내에 중첩되어 부모 - 자식 관계를 생성합니다.
이 구조는 HTML 요소가 어떻게 중첩될 수 있는지를 보여주며, 이는 자손 선택자를 이해하는 데 중요합니다. 이 예에서 <p>는 <div>의 자손입니다.
변경 사항이 유지되도록 파일을 저장합니다. 다음 단계에서는 CSS 자손 선택자를 사용하여 이 단락의 스타일을 지정하는 방법을 배웁니다.
CSS 에서 자손 선택자 정의
이 단계에서는 CSS 자손 선택자 (descendant selectors) 에 대해 배우고 이를 정의하는 방법을 배웁니다. 자손 선택자는 다른 요소 내부에 중첩된 요소를 대상으로 하여 특정 중첩된 요소에 스타일을 적용할 수 있도록 합니다.
WebIDE 를 사용하여 ~/project 디렉토리에 styles.css라는 새 파일을 생성합니다. 이 파일은 자손 선택자를 정의할 CSS 스타일시트가 됩니다.
기본 자손 선택자를 만드는 방법은 다음과 같습니다.
/* Descendant selector syntax: parent-element descendant-element */
div p {
/* CSS styles will be applied to paragraphs inside div elements */
}
자손 선택자를 자세히 살펴보겠습니다.
div는 부모 요소입니다.p는 자손 요소입니다.div와p사이의 공백은 자손 관계를 나타냅니다.<div>내의 모든<p>요소는 이 선택자에 의해 스타일이 지정됩니다.
이제 CSS 파일을 HTML 에 연결합니다. index.html을 열고 <head> 섹션에 스타일시트에 대한 링크를 추가합니다.
<head>
<meta charset="UTF-8" />
<title>CSS Descendant Selector Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
이렇게 하면 HTML 문서가 CSS 스타일시트에 연결되어 다음 단계에서 스타일 지정을 준비합니다.
자손 선택자를 사용하여 문단 스타일 지정
이 단계에서는 앞서 정의한 자손 선택자를 사용하여 div 내부의 단락에 스타일을 적용합니다. 이는 CSS 자손 선택자가 특정 중첩된 요소를 대상으로 스타일을 지정하는 방법을 보여줍니다.
styles.css 파일을 열고 다음 CSS 규칙을 추가합니다.
div p {
color: blue;
font-size: 18px;
font-weight: bold;
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
}
CSS 속성을 자세히 살펴보겠습니다.
color: blue;는 텍스트 색상을 파란색으로 변경합니다.font-size: 18px;는 텍스트 크기를 늘립니다.font-weight: bold;는 텍스트를 굵게 만듭니다.background-color: #f0f0f0;는 밝은 회색 배경을 추가합니다.padding: 10px;는 단락 내부에 공간을 추가합니다.border-radius: 5px;는 배경의 모서리를 둥글게 만듭니다.
이러한 스타일은 div 의 자손인 단락에만 적용됩니다. 즉, div 요소 외부에 있는 다른 단락은 영향을 받지 않습니다.
styles.css 파일을 저장합니다. 웹 브라우저에서 index.html 파일을 열면 이러한 규칙에 따라 스타일이 지정된 단락을 볼 수 있습니다. 스타일 지정은 자손 선택자가 중첩된 요소를 정확하게 타겟팅하는 방법을 보여줍니다.
스타일링 확인 및 선택자 메커니즘 이해
이 마지막 단계에서는 HTML 에 더 많은 요소를 추가하고 선택자의 타겟팅 메커니즘을 이해하여 자손 선택자가 어떻게 작동하는지 살펴봅니다.
index.html을 수정하여 추가 중첩 요소를 포함합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Descendant Selector Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<p>This paragraph will be styled by the descendant selector.</p>
<section>
<p>This nested paragraph will also be styled!</p>
</section>
</div>
<p>This paragraph outside the div will NOT be styled.</p>
</body>
</html>
선택자의 구체성을 보여주기 위해 styles.css를 업데이트합니다.
div p {
color: blue;
font-size: 18px;
font-weight: bold;
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
}
자손 선택자에 대한 주요 관찰 사항:
<div>내부의 단락만 스타일이 지정됩니다.- 중첩된 요소 (예:
<section>내부의 단락) 도 스타일이 지정됩니다. <div>외부의 단락은 스타일이 지정되지 않은 상태로 유지됩니다.- 선택자는 모든 중첩 깊이에서 작동합니다.
이 예제는 자손 선택자가 문서 구조 내의 특정 요소를 타겟팅할 수 있도록 하여 중첩된 요소의 스타일 지정을 정밀하게 제어하는 방법을 보여줍니다.
요약
이 랩에서는 참가자들이 구조화된 HTML 문서를 생성하고 CSS 자손 선택자를 적용하는 기본 사항을 배웁니다. 이 과정은 웹 콘텐츠 개발의 기반을 제공하는 DOCTYPE, html, head 및 body 태그와 같은 필수 요소를 포함하는 기본적인 HTML 파일 구조를 설정하는 것으로 시작합니다. 그런 다음 참가자들은 단락을 포함하는 div 요소를 추가하여 HTML 계층 구조 내에서 자손 선택자를 사용하여 중첩된 요소를 타겟팅하고 스타일을 지정하는 방법을 탐구할 수 있도록 준비합니다.
이 랩은 개발자가 문서 구조 내의 관계를 기반으로 특정 요소에 스타일을 적용할 수 있도록 함으로써 CSS 자손 선택자가 어떻게 작동하는지 시연하는 데 중점을 둡니다. 간단한 HTML 문서를 생성하고 점진적으로 CSS 스타일을 추가함으로써 학습자는 CSS 선택자를 사용하여 중첩된 요소를 정확하게 타겟팅하고 스타일을 지정하는 방법을 이해하는 실질적인 경험을 얻습니다.
