목차
반응형
1. 개요
이 글에서는 CSS가 무엇인지, 어떤 방식으로 스타일을 적용할 수 있는지, 그리고 실제로 HTML 요소에 스타일을 적용할 수 있는 다양한 선택자들을 정리한다. 간단한 실습을 통해 CSS의 핵심 원리를 직접 확인할 수 있도록 구성했다.
이번 포스팅에서는 CSS의 기본 구조와 선택자 에 대해 공부해 보자.
2. 내용
2.1. CCS란 무엇인가
CSS (Cascading Style Sheets)는 HTML 요소의 시각적 표현을 담당하는 스타일 언어이다.
HTML이 웹페이지의 구조를 담당한다면, CSS는 그 구조에 디자인을 입히는 역할을 한다.
대표적인 기능
- 글꼴 크기, 색상 지정
- 박스 크기 및 여백 조정
- 화면 위치 조절
- 애니메이션 등 시각 효과 부여
2.2. 스타일 적용 방법
Inline 방식
- 요소 안에 style 속성으로 직접 작성
<p style="color: red;">Hello</p>
Internal 방식
- <style> 태그 안에 문서 내에 작성
- <head> 태그 안에 위치해야 함
- 예시 설명 : HTML 문서에 있는 모든 <p> 요소에 대해 color 색을 적용
<style>
p {
color: red;
}
</style>
External 방식
- 별도 .css 파일을 연결
- <head> 태그 안에 위치해야 함
<link rel="stylesheet" href="style.css">
2.3. 기본 선택자
CSS 선택자는 어떤 HTML 요소에 스타일을 적용할지를 지정하는 도구
tag(태그) 선택자
- 특정 태그 전체에 적용
- 예시 : p { color: blue; }
- 적용 대상 : 모든 <p> 요소에 적용
class 선택자
- 특정 class 이름이 있는 요소에 적용
- . 을 이용함
- 예시 : .title { font-size: 20px; }
- 적용 대상 :<div class="title">
id 선택자
- 특정 id를 이름이 있는 요소에 적용
- # 을 이용함
- 예시 : #main { padding: 10px; }
- 적용 대상 : <section id="main">
3. 코드 예시
파일 구성
/project-folder
├── index.html
└── style.css
html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>CSS 연결 예제</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 class="main-title">안녕하세요!</h1>
<p id="description">이 페이지는 외부 CSS 파일을 사용합니다.</p>
<div class="box">박스 요소</div>
</body>
</html>
style.css
/* 태그 선택자 */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
/* 클래스 선택자 */
.main-title {
color: #2c3e50;
font-size: 32px;
margin-bottom: 10px;
}
/* ID 선택자 */
#description {
color: #555;
font-size: 18px;
margin-bottom: 20px;
}
/* 혼합된 스타일 예시 */
.box {
background-color: white;
border: 2px solid #3498db;
padding: 15px;
width: 200px;
text-align: center;
}
4. Git 코드 링크
html : https://github.com/suhan77/study_typescript/blob/main/html_css_link.html
css : https://github.com/suhan77/study_typescript/blob/main/css_link.css
반응형
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] Flexbox를 이용한 레이아웃 정렬 (3) | 2025.06.29 |
|---|---|
| [CSS] 박스 모델(Box Model)과 레이아웃 기초 (0) | 2025.06.29 |