CSS 구문과 구조 (CSS Syntax and Structure)
CSS 구문의 기본 구조 (Basic Structure of CSS Syntax)
역사적 배경 (Historical Background)
CSS는 1996년에 CSS1 사양으로 처음 도입되었습니다. HTML의 스타일을 정의하기 위해 개발된 이 언어는 시간이 지나면서 점점 더 복잡하고 강력한 기능을 포함하게 되었습니다. CSS 구문은 스타일 시트를 구성하는 기본 요소입니다.
개념 및 원리 (Concept and Principles)
CSS는 선택자(Selector), 속성(Properties), 값(Values)으로 구성됩니다. CSS 규칙은 선택자로 시작하며, 중괄호 {} 안에 속성과 값을 포함합니다.
선택자 {
속성: 값;
}
예제 (Example)
p {
color: blue;
font-size: 16px;
}
이 코드는 모든 <p> 요소의 텍스트 색상을 파란색으로, 글꼴 크기를 16픽셀로 지정합니다.
선택자(Selectors): 태그, 클래스, ID, 속성 선택자 (Selectors: Tag, Class, ID, Attribute Selectors)
역사적 배경 (Historical Background)
CSS1에서는 태그 선택자, 클래스 선택자, ID 선택자가 도입되었으며, CSS2에서는 속성 선택자가 추가되었습니다. 이러한 선택자는 HTML 요소를 구체적으로 선택하여 스타일을 적용할 수 있게 합니다.
태그 선택자 (Tag Selector)
태그 선택자는 특정 HTML 태그를 가진 모든 요소를 선택합니다.
h1 {
color: red;
}
이 코드는 모든 <h1> 요소의 텍스트 색상을 빨간색으로 지정합니다.
클래스 선택자 (Class Selector)
클래스 선택자는 특정 클래스 이름을 가진 요소를 선택합니다.
.intro {
font-size: 20px;
}
이 코드는 class="intro"인 모든 요소의 글꼴 크기를 20픽셀로 설정합니다.
아이디 선택자 (ID Selector)
아이디 선택자는 특정 ID를 가진 요소를 선택합니다.
#main {
padding: 10px;
background-color: lightgray;
}
이 코드는 id="main"인 요소의 패딩을 10픽셀, 배경색을 밝은 회색으로 설정합니다.
속성 선택자 (Attribute Selector)
속성 선택자는 특정 속성을 가진 요소를 선택합니다.
a[target="_blank"] {
color: orange;
}
이 코드는 target="_blank" 속성을 가진 모든 <a> 태그의 텍스트 색상을 주황색으로 지정합니다.
속성(Properties)와 값(Values)
역사적 배경 (Historical Background)
CSS의 속성과 값은 웹 요소의 다양한 스타일링 요구를 충족시키기 위해 지속적으로 발전해 왔습니다. CSS1에서는 색상, 글꼴, 여백 등 기본 속성이 포함되었으며, 이후 버전에서는 더욱 복잡하고 다양한 속성이 추가되었습니다.
개념 및 원리 (Concept and Principles)
속성은 스타일을 정의하는 이름이고, 값은 그 스타일의 구체적인 설정입니다. 속성은 콜론 :으로 구분되며, 세미콜론 ;으로 끝납니다.
선택자 {
속성: 값;
}
예제 (Example)
div {
margin: 20px;
padding: 10px;
border: 2px solid black;
}
이 코드는 모든 <div> 요소에 20픽셀의 마진, 10픽셀의 패딩, 2픽셀 두께의 검은색 실선 테두리를 적용합니다.
주석(Commenting) 처리 (Commenting in CSS)
역사적 배경 (Historical Background)
주석은 CSS 코드에 설명이나 메모를 추가하기 위한 방법으로, CSS1 사양에서 처음 도입되었습니다. 주석은 코드의 가독성을 높이고 유지 보수성을 향상시키는 데 중요한 역할을 합니다.
개념 및 원리 (Concept and Principles)
CSS 주석은 /*로 시작하여 */로 끝납니다. 주석 안의 내용은 브라우저에 의해 무시됩니다.
/* 주석 내용 */
예제 (Example)
/* 이 코드는 모든 <h1> 태그의 색상을 파란색으로 설정합니다 */
h1 {
color: blue;
}
/* 클래스 선택자 예제 */
.intro {
font-size: 20px;
}
주석을 사용하면 코드에 대한 설명을 추가하여 다른 개발자나 미래의 자신이 쉽게 이해할 수 있도록 합니다.
종합 예제 (Comprehensive Example)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 구문과 구조 예제</title>
<style>
/* 태그 선택자 */
h1 {
color: navy;
}
/* 클래스 선택자 */
.highlight {
background-color: yellow;
}
/* 아이디 선택자 */
#container {
padding: 20px;
border: 1px solid gray;
}
/* 속성 선택자 */
a[target="_blank"] {
text-decoration: none;
}
/* 주석 예제 */
/* 이 주석은 코드 설명을 위한 것입니다 */
</style>
</head>
<body>
<div id="container">
<h1>CSS 구문과 구조</h1>
<p class="highlight">이 문장은 강조 표시되어 있습니다.</p>
<a href="https://www.example.com" target="_blank">외부 링크</a>
</div>
</body>
</html>
이 예제는 다양한 CSS 선택자와 주석을 사용하여 HTML 요소를 스타일링하는 방법을 보여줍니다. 각각의 선택자와 속성은 특정 HTML 요소에 스타일을 적용하는 데 사용되며, 주석은 코드의 가독성을 높이는 데 사용됩니다.