CSS 기본 문법: 스타일링의 기초 다지기
안녕하세요, 여러분! 오늘은 CSS 시리즈 두 번째 포스팅으로, CSS의 기본 문법에 대해 알아보겠습니다. CSS의 기본 문법을 이해하면 웹 페이지를 더 아름답고 효율적으로 디자인할 수 있습니다. 그럼, 선택자, 속성, 값, 주석 등을 통해 CSS의 기본 문법을 차근차근 살펴보겠습니다.
1. 선택자(Selectors)
선택자는 스타일을 적용할 HTML 요소를 지정하는 역할을 합니다. 선택자는 다양한 종류가 있으며, 상황에 맞게 적절한 선택자를 사용하는 것이 중요합니다.
- 태그 선택자(Tag Selector): 특정 HTML 태그에 스타일을 적용합니다.
p { color: blue; }- 클래스 선택자(Class Selector): 특정 클래스에 속하는 요소에 스타일을 적용합니다. 클래스 선택자는 마침표(.)로 시작합니다.
.highlight { background-color: yellow; }- 아이디 선택자(ID Selector): 특정 아이디를 가진 요소에 스타일을 적용합니다. 아이디 선택자는 샵(#)으로 시작합니다.
#header { font-size: 24px; }- 속성 선택자(Attribute Selector): 특정 속성을 가진 요소에 스타일을 적용합니다.
input[type="text"] { border: 1px solid black; }- 후손 선택자(Descendant Selector): 특정 요소 내에 있는 하위 요소에 스타일을 적용합니다.
div p { color: green; }- 자식 선택자(Child Selector): 특정 요소의 직계 자식 요소에 스타일을 적용합니다.
ul > li { list-style-type: none; }
2. 속성과 값(Properties and Values)
CSS는 속성과 값을 이용해 스타일을 정의합니다. 속성은 변경하고자 하는 스타일의 종류를 나타내며, 값은 속성에 적용될 구체적인 설정을 의미합니다. 속성과 값은 콜론(:)으로 구분하며, 선언 블록 내에서 중괄호({})로 감쌉니다.
예시:
h1 {
color: red;
font-size: 32px;
}위 예시에서 color는 글자 색상을 의미하는 속성이며, red는 그 값을 나타냅니다. font-size는 글자 크기를 의미하는 속성이며, 32px는 그 값을 나타냅니다.
3. 주석(Comments)
주석은 코드 내에 설명을 추가하는 데 사용되며, 브라우저는 주석을 무시합니다. CSS 주석은 /*로 시작하여 */로 끝납니다. 주석을 사용하면 코드의 가독성을 높이고, 다른 개발자와의 협업 시 유용합니다.
예시:
/* 이것은 주석입니다 */
p {
color: blue; /* 이 부분은 글자 색상을 파란색으로 설정합니다 */
}4. CSS 작성 규칙
CSS를 작성할 때는 몇 가지 기본 규칙을 따르는 것이 좋습니다. 이는 코드의 가독성을 높이고, 유지보수를 쉽게 하기 위함입니다.
- 일관된 들여쓰기: 코드의 가독성을 높이기 위해 일관된 들여쓰기를 사용합니다.
body { background-color: #f0f0f0; } h1 { color: #333; text-align: center; }- 선언 블록의 정렬: 속성과 값을 정렬하여 가독성을 높입니다.
p { font-size: 16px; line-height: 1.5; margin: 10px 0; }- 주석 사용: 코드의 각 섹션에 주석을 추가하여 설명을 덧붙입니다.
/* 헤더 스타일 */ #header { background-color: #333; color: white; padding: 10px 0; } /* 본문 스타일 */ .content { margin: 20px; font-family: Arial, sans-serif; }
실습 예제
위에서 배운 내용을 바탕으로 간단한 실습을 해보겠습니다. 아래 코드는 HTML과 CSS를 함께 사용하여 간단한 웹 페이지를 스타일링하는 예제입니다.
HTML 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 기본 문법 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="header">CSS 기본 문법</h1>
<p class="highlight">이것은 하이라이트된 문장입니다.</p>
<p>이것은 일반 문장입니다.</p>
<div>
<p>이것은 div 안의 문장입니다.</p>
</div>
</body>
</html>CSS 코드 (styles.css):
/* 헤더 스타일 */
#header {
color: red;
font-size: 32px;
text-align: center;
}
/* 하이라이트 스타일 */
.highlight {
background-color: yellow;
}
/* 일반 문장 스타일 */
p {
font-size: 16px;
color: blue;
}
/* div 안의 문장 스타일 */
div p {
color: green;
}output
마무리
오늘은 CSS의 기본 문법에 대해 알아보았습니다. 선택자, 속성, 값, 주석, 그리고 CSS 작성 규칙에 대해 살펴보았죠. 다음 포스팅에서는 텍스트 스타일링에 대해 자세히 알아보겠습니다. 기대해 주세요!
[CSS] 1. CSS 기초 개념 소개
CSS 기초 개념 소개: 웹 스타일링의 시작안녕하세요, 여러분! 오늘부터 시작하는 CSS 시리즈 첫 번째 포스팅에서는 CSS의 기초 개념에 대해 알아보겠습니다. CSS는 웹 페이지의 스타일과 레이아웃을
codeplayground.tistory.com
[CSS] 3. 텍스트 스타일링
텍스트 스타일링: 글꼴, 크기, 색상 설정하기안녕하세요, 여러분! 오늘은 CSS 시리즈 세 번째 포스팅으로, 텍스트 스타일링에 대해 알아보겠습니다. 웹 페이지에서 텍스트는 가장 중요한 요소 중
codeplayground.tistory.com
'프로그래밍 언어 > CSS' 카테고리의 다른 글
| [CSS] 3. 텍스트 스타일링 (1) | 2024.06.12 |
|---|---|
| [CSS] 1. CSS 기초 개념 소개 (0) | 2024.06.10 |
