728x90
CSS(Cascading Style Sheets)는 HTML이나 XML 같은 마크업 언어 요소의 스타일을 지정하는 스타일 시트 언어이다. 웹 페이지의 디자인과 레이아웃을 담당하여 HTML과 함께 웹 개발의 필수 요소로 사용된다.
1. 적용 방법
(1) 인라인 스타일
HTML 요소의 style 속성을 이용하는 방법이다.
<p style="color: red; font-size: 20px;">인라인 스타일</p>(2) 내부 스타일 시트
<head> 내부에 <style> 태그를 사용하여 정의한다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<style>
p {
font-size: 20px;
color: red;
}
</style>
</head>(3) 외부 스타일 시트
별도의 CSS 파일을 만들어 HTML 파일에서 연결한다. <link> 요소에 href 속성으로 CSS 파일을 입력한다. 여러 페이지에서 동일한 스타일을 쉽게 관리할 수 있다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>2. 선택자(Selectors)
CSS에서 특정 요소를 선택할 때 사용된다.
(1) class 선택자
사용법: .className
클래스 선택자는 여러 요소를 그룹화하고 해당 그룹에 스타일을 적용한다. 하나의 요소가 여거 클래스를 가질 수 있고 여러 요소가 동일한 클래스를 가질 수도 있다.
<p class="highlight">클래스 선택자 예시</p>.highlight {
background-color: yellow;
}(2) id선택자
사용법: #idName
id 선택자는 문서 내 유일한 식별자를 가진 요소를 선택한다. id는 유일성을 보장하기 위해 사용되기 때문에 문서 내에 id가 중복되면 안된다.
<div id="header">
id 선택자 예시
</div>#header {
color: red;
font-size: 24px;
}(3) 기본 선택자
p, h1, div, body 등 HTML 태그명을 사용한다.
p {
font-size: 16px;
}3. 주요 스타일 속성
- color: 글자 색상 지정
- font-size: 글자 크기 설정
- font-family: 글꼴 지정
- text-align: 텍스트 정렬 (left, center, right)
- line-height: 줄 간격 조정
- width, height: 요소의 너비와 높이 지정
- margin: 요소 외부 여백 설정
- padding: 요소 내부 여백 설정
- display: 블록, 인라인, 플렉스 등 요소의 표시 방식 결정
- position: 요소의 위치 지정 (static, relative, absolute, fixed)
- background-color: 배경 색상 지정
- border: 요소의 테두리 스타일 설정
- border-radius: 테두리의 둥글기 지정
4. 실습하기
이전 게시물에서 실습한 HTML 파일에 CSS 스타일을 적용시킨다.
728x90
'HTML, CSS' 카테고리의 다른 글
| HTML 기초 (0) | 2025.04.02 |
|---|---|
| CSS 이론 (2) - 박스 모델 / 우선순위 / 단위 (0) | 2025.03.26 |
| HTML 구조 및 요소(태그) (0) | 2025.03.22 |