이 랩에서는 웹 개발에 사용되는 기본적인 CSS 선택자를 탐구하고, 웹 페이지 요소의 스타일링을 위한 실용적인 기술에 중점을 둡니다. 이 랩은 다양한 CSS 선택자가 어떻게 작동하는지 실습을 통해 이해할 수 있도록 하며, 기본적인 태그 선택자부터 시작하여 클래스 및 ID 선택자와 같은 보다 구체적인 선택 방법으로 점차적으로 진행합니다.
참가자들은 HTML 파일을 생성하고, 태그 선택자를 적용하여 요소를 균일하게 스타일링하고, 클래스 선택자를 구현하여 특정 스타일을 지정하며, ID 선택자를 사용하여 개별 요소를 고유하게 수정하는 방법을 배우게 됩니다. 또한 이 랩에서는 CSS 선택자 우선 순위 및 !important 규칙 사용과 같은 중요한 개념을 다루어, 학생들이 CSS 스타일링 기술을 통해 웹 페이지 디자인을 효과적으로 제어하고 사용자 정의하는 방법에 대한 포괄적인 이해를 개발할 수 있도록 합니다.
이 단계에서는 HTML 파일을 생성하고 CSS 에서 기본적인 태그 선택자를 적용하는 방법을 배우게 됩니다. 태그 선택자는 HTML 요소의 태그 이름을 타겟팅하여 스타일을 지정하는 기본적인 방법입니다.
먼저, 프로젝트 디렉토리에 HTML 파일을 생성해 보겠습니다. WebIDE 를 열고 ~/project 디렉토리로 이동합니다. index.html이라는 새 파일을 생성합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Tag Selector Example</title>
<style>
/* 여기에 CSS 를 추가합니다 */
</style>
</head>
<body>
<h1>Welcome to CSS Selectors</h1>
<p>This is a paragraph about CSS tag selectors.</p>
<div>This is a div element.</div>
</body>
</html>이제 HTML 요소의 스타일을 지정하기 위해 태그 선택자를 적용해 보겠습니다. <style> 태그 안에 다음 CSS 를 추가합니다.
/* h1 에 대한 태그 선택자 */
h1 {
color: blue;
text-align: center;
}
/* p 에 대한 태그 선택자 */
p {
font-size: 16px;
color: green;
}
/* div 에 대한 태그 선택자 */
div {
background-color: lightgray;
padding: 10px;
}이 파일을 저장하고 브라우저에서 열면 다음을 볼 수 있습니다.
<h1> 요소는 파란색으로 표시되고 가운데 정렬됩니다.<p> 요소는 녹색으로 표시되고 16px 글꼴 크기를 갖습니다.<div> 요소는 밝은 회색 배경과 패딩을 갖습니다.브라우저에서의 예시 출력:
이 단계에서는 CSS 에서 클래스 선택자를 사용하여 공유 클래스 속성을 가진 여러 요소의 스타일을 지정하는 방법을 배우게 됩니다. 클래스 선택자는 특정 요소 그룹에 스타일을 적용할 수 있도록 하여 태그 선택자에 비해 더 많은 유연성을 제공합니다.
WebIDE 에서 이전 단계의 index.html 파일을 엽니다. 클래스 속성을 포함하도록 HTML 을 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Class Selector Example</title>
<style>
/* 여기에 클래스 선택자를 추가합니다 */
</style>
</head>
<body>
<h1 class="main-title">Welcome to CSS Class Selectors</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is a normal paragraph.</p>
<div class="highlight">This is a highlighted div.</div>
</body>
</html>이제 특정 클래스를 가진 요소의 스타일을 지정하기 위해 CSS 에 클래스 선택자를 추가합니다.
/* .highlight 에 대한 클래스 선택자 */
.highlight {
background-color: yellow;
color: black;
font-weight: bold;
padding: 5px;
}
/* .main-title 에 대한 클래스 선택자 */
.main-title {
color: blue;
text-align: center;
font-size: 24px;
}이 파일을 저장하고 브라우저에서 열면 다음을 볼 수 있습니다.
highlight 클래스를 가진 요소는 노란색 배경을 갖습니다.highlight 클래스를 가진 요소만 특별한 스타일을 갖습니다.브라우저에서의 예시 출력:
이 단계에서는 웹 페이지에서 고유한 단일 요소의 스타일을 지정하는 데 사용되는 ID 선택자에 대해 배우게 됩니다. 여러 요소에 적용할 수 있는 클래스 선택자와 달리, ID 선택자는 특정 개별 요소를 타겟팅합니다.
WebIDE 에서 이전 단계의 index.html 파일을 엽니다. ID 속성을 포함하도록 HTML 을 수정합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS ID Selector Example</title>
<style>
/* 여기에 ID 선택자를 추가합니다 */
</style>
</head>
<body>
<h1 class="main-title">Welcome to CSS ID Selectors</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p id="special-paragraph">This is a unique paragraph with an ID.</p>
<div class="highlight" id="main-content">
This is a highlighted div with an ID.
</div>
</body>
</html>이제 특정 요소의 스타일을 지정하기 위해 CSS 에 ID 선택자를 추가합니다.
/* #special-paragraph 에 대한 ID 선택자 */
#special-paragraph {
color: purple;
font-style: italic;
border-bottom: 2px solid green;
}
/* #main-content 에 대한 ID 선택자 */
#main-content {
background-color: lightblue;
padding: 10px;
font-weight: bold;
}이 파일을 저장하고 브라우저에서 열면 다음을 볼 수 있습니다.
special-paragraph인 단락은 보라색, 이탤릭체로 표시되고 녹색 하단 테두리가 있습니다.main-content인 div 는 밝은 파란색 배경과 굵은 텍스트를 갖습니다.브라우저에서의 예시 출력:
이 단계에서는 CSS 선택자 구체성 (specificity) 과 요소의 스타일을 지정할 때 서로 다른 유형의 선택자가 어떻게 우선 순위를 갖는지 배우게 됩니다. 선택자 우선 순위를 이해하면 여러 선택자가 동일한 요소를 타겟팅할 때 어떤 스타일이 적용될지 제어하는 데 도움이 됩니다.
WebIDE 에서 이전 단계의 index.html 파일을 엽니다. 선택자 우선 순위를 보여주기 위해 HTML 및 CSS 를 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selector Priorities</title>
<style>
/* 여기에 선택자 우선 순위를 보여줍니다 */
</style>
</head>
<body>
<div id="priority-demo" class="highlight">
<p>Understanding CSS Selector Priorities</p>
</div>
</body>
</html>이제 서로 다른 선택자의 우선 순위를 보여주는 CSS 를 추가합니다.
/* 태그 선택자 (가장 낮은 우선 순위) */
p {
color: green;
font-size: 16px;
}
/* 클래스 선택자 (중간 우선 순위) */
.highlight {
color: blue;
border: 2px solid gray;
}
/* ID 선택자 (가장 높은 우선 순위) */
#priority-demo {
color: red;
font-weight: bold;
}
/* 인라인 스타일은 가장 높은 우선 순위를 갖습니다 (이 예제에서는 표시되지 않음) */선택자 우선 순위 계층 (낮음에서 높음 순):
이 파일을 저장하고 브라우저에서 열면 다음을 볼 수 있습니다.
브라우저에서의 예시 출력:
이 단계에서는 다른 모든 스타일링 규칙을 재정의하는 강력한 방법인 CSS 의 !important 규칙에 대해 배우게 됩니다. 드물게 사용해야 하지만 특정 상황에서는 유용할 수 있습니다.
WebIDE 에서 이전 단계의 index.html 파일을 엽니다. !important 규칙을 보여주기 위해 HTML 을 업데이트합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS !important Rule</title>
<style>
/* 여기에 !important 규칙을 시연합니다 */
</style>
</head>
<body>
<div id="important-demo" class="highlight">
<p>Understanding the !important CSS Rule</p>
</div>
</body>
</html>이제 !important 규칙이 다른 선택자를 어떻게 재정의하는지 보여주는 CSS 를 추가합니다.
/* 일반 태그 선택자 */
p {
color: green;
font-size: 16px;
}
/* 클래스 선택자 */
.highlight {
color: blue;
border: 2px solid gray;
}
/* ID 선택자 */
#important-demo {
color: red;
}
/* !important 규칙 (가장 높은 우선 순위) */
p {
color: purple !important;
font-weight: bold !important;
}!important 규칙에 대한 주요 사항:
이 파일을 저장하고 브라우저에서 열면 다음을 볼 수 있습니다.
!important 규칙이 다른 선택자보다 우선합니다.브라우저에서의 예시 출력:
!important가 다른 스타일링 규칙을 어떻게 재정의하는지 보여줍니다.이 랩에서는 참가자들이 웹 개발을 위한 기본적인 CSS 선택자 기술을 탐구했습니다. 제목, 단락, div 컨테이너와 같은 HTML 요소의 스타일을 지정하기 위해 기본적인 태그 선택자로 시작했습니다. 색상, 정렬, 글꼴 크기 및 배경 속성을 적용함으로써 학습자들은 태그 이름을 사용하여 특정 HTML 요소를 타겟팅하는 실질적인 경험을 얻었습니다.
이 랩은 점차적으로 더 발전된 선택자 방법을 소개하여 클래스 선택자가 여러 요소에 걸쳐 타겟팅된 스타일링을 허용함으로써 더 큰 스타일링 유연성을 제공하는 방법을 보여주었습니다. 실습을 통해 참가자들은 CSS 스타일을 동적으로 생성하고 적용하는 방법을 배우고, 선택자 계층 구조의 핵심 원리와 웹 디자인에서 정확한 요소 타겟팅의 중요성을 이해했습니다.
