오늘은 CSS 규칙에 대해 알아볼 거예요. CSS는 웹 페이지의 스타일을 꾸미는 데 사용되는 언어입니다.
초보자도 쉽게 이해할 수 있도록 CSS의 기본 개념과 규칙을 설명할게요.
1. CSS란 무엇인가요?
CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다.
HTML로 구조를 만들고, CSS로 그 구조에 색상, 글꼴, 여백 등을 추가하여 멋지게 꾸미는 것이죠.
1.1 CSS의 주요 목적
- 디자인: 웹 페이지의 색상, 글꼴, 배경 등을 설정합니다.
- 레이아웃: 요소들의 위치와 크기를 조절합니다.
- 반응형 디자인: 다양한 화면 크기에 맞춰 레이아웃을 조정합니다.
2. CSS 규칙의 기본 구조
CSS 규칙은 크게 선택자(selector)와 선언부(declaration block)로 나뉘어요.
2.1 선택자 (Selector)
선택자는 스타일을 적용할 HTML 요소를 지정하는 부분입니다. 여러 종류의 선택자가 있습니다.
- 요소 선택자: HTML 태그를 선택합니다. 예를 들어, p는 모든 단락을 선택합니다.
p {
color: blue; /* 모든 단락의 글씨를 파란색으로 설정 */
}- 클래스 선택자: 특정 클래스가 지정된 요소를 선택합니다. 클래스는 .으로 시작합니다.
.example {
font-size: 20px; /* 'example' 클래스를 가진 요소의 글꼴 크기를 20px로 설정 */
}- 아이디 선택자: 특정 아이디가 지정된 요소를 선택합니다. 아이디는 #으로 시작합니다.
#header {
background-color: yellow; /* 'header' 아이디를 가진 요소의 배경색을 노란색으로 설정 */
}2.2 선언부 (Declaration Block)
선언부는 중괄호 {} 안에 들어가는 스타일 속성들을 포함합니다. 속성과 값은 콜론 :으로 구분하고, 각 선언은 세미콜론 ;으로 끝납니다.
p {
color: blue; /* 글씨 색상 설정 */
font-size: 16px; /* 글꼴 크기 설정 */
}
3. CSS 속성의 종류
CSS 속성은 스타일을 정의하는 중요한 부분입니다. 자주 사용하는 속성 몇 가지를 소개할게요.
- 색상 관련 속성
- color: 글자 색상을 설정합니다.
- background-color: 배경 색상을 설정합니다.
- 글꼴 관련 속성
- font-size: 글꼴의 크기를 설정합니다.
- font-family: 글꼴 종류를 설정합니다.
- 여백 관련 속성
- margin: 요소의 외부 여백을 설정합니다.
- padding: 요소의 내부 여백을 설정합니다.
- 크기 관련 속성
- width: 요소의 너비를 설정합니다.
- height: 요소의 높이를 설정합니다.
예시
h1 {
color: red; /* 제목 색상을 빨간색으로 설정 */
font-size: 32px; /* 제목 크기를 32px로 설정 */
margin: 20px; /* 제목의 외부 여백을 20px로 설정 */
}4. CSS 주석
CSS에서는 주석을 사용하여 코드에 설명을 추가할 수 있어요. 주석은 코드에 영향을 주지 않으며, 가독성을 높이는 데 도움을 줍니다.
주석 작성 방법
/* 이것은 주석입니다. CSS 코드는 여기서 멈춥니다. */
p {
color: blue; /* 단락 글씨 색상 */
}5. CSS 적용 방법
CSS를 웹 페이지에 적용하는 방법에는 크게 3가지가 있어요.
1. 인라인 스타일: HTML 태그에 직접 스타일을 작성합니다.
<h1 style="color: blue;">안녕하세요!</h1>
2. 내부 스타일 시트: HTML 문서의 <head> 섹션에 <style> 태그를 사용합니다.
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
3. 외부 스타일 시트: 별도의 CSS 파일을 만들어 HTML 문서에서 링크합니다.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
CSS 규칙을 이해하면 웹 페이지의 디자인을 자유롭게 꾸밀 수 있어요. 선택자와 선언부를 통해 다양한 스타일을 적용해보세요.
CSS는 조금씩 배우면서 실습해보는 것이 가장 좋답니다. 궁금한 점이나 추가 질문이 있다면 댓글로 남겨주세요!
구독!! 공감과 댓글,
광고 클릭은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > CSS' 카테고리의 다른 글
| CSS선택자를 크롬 개발자 도구(DevTools)로 확인하기 (5) | 2024.10.01 |
|---|---|
| CSS 파일에 대해 알아보자! - 초보자를 위한 간단한 가이드 (4) | 2024.10.01 |
| CSS 기본 문법 및 속성 정리 - 초보자도 바로 따라 할 수 있는 가이드 (1) | 2024.09.27 |
| CSS 여백(padding, margin) 완벽 가이드 - 초보자도 바로 따라 할 수 있는 가이드 (1) | 2024.09.27 |
| CSS에서 크기 조절하기 - 초보자도 바로 따라 할 수 있는 가이드 (0) | 2024.09.27 |
