고정 헤더 영역
상세 컨텐츠
본문
✨ 들어가며
지금까지 HTML로 웹페이지의 구조를 만들어봤습니다. 하지만 구조만 있는 페이지는 마치 색도 없는 도화지와 같습니다.
웹페이지에 색상, 글꼴, 간격, 레이아웃 등 시각적인 표현을 더하려면 CSS가 필요합니다.
이 글에서는 CSS가 무엇인지, 어떻게 HTML에 적용하는지, 그리고 기본 스타일 속성부터 실습해보며 "디자인의 첫걸음"을 함께 시작합니다.
✨ 1. CSS란 무엇인가요?
- CSS (Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 언어입니다.
💡 Cascading은 "폭포처럼 흐르는"이라는 뜻으로, 스타일이 위에서 아래로 적용되는 특성을 말합니다. - HTML이 구조라면, CSS는 표현입니다. 구조 위에 색과 모양을 입히는 역할을 합니다.
✨ 2. 스타일 적용 방법
CSS는 아래 세 가지 방식으로 HTML에 적용할 수 있습니다:
- 인라인 스타일 (inline): 태그 내부에 직접 style 속성으로 작성
- 내부 스타일 (internal):
<style>태그를 이용해 HTML 문서 내에 작성 - 외부 스타일 (external): 별도 CSS 파일을 링크
→ 이 글에서는 가장 쉽게 따라할 수 있는 내부 스타일 방식으로 실습합니다.
더보기
더보기
📜 배경지식
예전에는 HTML에 직접 디자인을 다 넣었어요. (인라인 스타일 방식) 예:<font color="red">
그런데 페이지가 복잡해지면서 "디자인 따로, 구조 따로" 방식이 필요해졌고, 그래서 CSS가 만들어졌습니다.
✨ 3. CSS 기본 속성 실습
↓ 아래 HTML 코드를 메모장이나 VS Code에 붙여넣고, .html로 저장한 뒤 브라우저에서 확인해보세요.
💡 파일명 예시: my-first-css.html (확장자 .html을 꼭 붙여야 브라우저가 웹페이지로 인식합니다)
📝 실습 따라하기 (!차근차근!)
메모장 또는 VS Code를 엽니다
- 아래 코드를 전체 선택 → 복사 → 붙여넣기 합니다
- 파일 → 다른 이름으로 저장을 선택합니다
- 파일명을
my-first-css.html로 입력하고 저장합니다- 저장된 파일을 더블클릭하면 브라우저에서 열립니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 첫 실습</title>
<style>
body {
background-color: #f9f9f9; /* 배경색을 연한 회색으로 */
font-family: sans-serif; /* 글꼴을 고딕체로 */
}
h1 {
color: darkblue;
font-size: 32px; /* 글자 크기를 지정 */
}
p {
color: #333; /* 글자 색을 진한 회색으로 */
padding: 10px;
}
.highlight {
background-color: yellow; /* 해당 영역의 배경색을 지정 */
margin: 0; /* 배경색이 지정된 영역과 바깥쪽 영역 사이의 간격을 없앰 */
}
.box {
border: 1px solid #ccc; /* 해당 영역의 테두리 스타일을 지정 */
}
</style>
</head>
<body>
<h1>나의 첫 CSS 실습</h1>
<p>이 문단은 일반 스타일이 적용된 상태입니다.</p>
<div class="box">
<p class="highlight">이 문단은 강조 스타일을 사용합니다.</p>
</div>
</body>
</html>위 코드를 저장하고 브라우저에서 열면 아래와 같은 화면이 표시됩니다.
🚨 잘 안 된다면? (문제해결)
화면이 하얗게만 나온다면: 파일 확장자가 .html인지 확인하세요
스타일이 적용 안 된다면: <style> 태그가 <head> 안에 있는지 확인하세요
한글이 깨진다면: <meta charset="UTF-8"> 줄이 있는지 확인하세요
🖐️ 잠깐!
→ "방금 본 결과가 어떻게 만들어졌는지 코드를 분석해볼까요?"
CSS는 선택자(Selector)와 선언 블록(Declaration Block)으로 구성됩니다:
선택자 {
속성: 값;
속성: 값;
}
/* 예시 */
h1 {
color: darkblue;
font-size: 32px;
}- 선택자 (h1): 스타일을 적용할 HTML 요소를 선택
- 중괄호 { }: 스타일 규칙들을 감싸는 블록
- 속성 (color, font-size): 변경하고 싶은 스타일의 종류
- 값 (darkblue, 32px): 속성에 적용할 구체적인 값
- 세미콜론 (;): 각 스타일 규칙의 끝을 표시
→ 이 하나의 덩어리를 "CSS 규칙(Rule)" 또는 "룰셋(Ruleset)"이라고 부릅니다.
🤔 그런데 왜 <style> 태그를 <head> 안에 넣었을까요?
<head>는 웹페이지의 "설정 정보"를 담는 공간이고, CSS는 페이지 전체의 디자인 설정이기 때문입니다. 마치 요리를 시작하기 전에 조리법을 미리 준비해두는 것과 같아요!
🤔색상을 표현하는 방식이 여러가지인가요?
- 이름으로 표현: darkblue, yellow (영어 색상명)
- 16진수 코드: #f9f9f9 (연한회색), #333 (진한회색)
💡 #333은 #333333의 줄임 표현입니다 (같은 숫자가 반복될 때 줄여 쓸 수 있어요)🤔룰셋에 포함되지 않는 설명부분은 뭔가요?
/* */ 기호로 감싸진 글씨는 주석이라고 합니다. 코드에 설명이나 메모를 추가할 때 사용하며 브라우저에 영향을 주지 않아요.
특정 코드를 일시적으로 주석처리하여 비활성화 할 수도 있습니다.
- 시작: /*
- 끝: */
- 한 줄이든 여러 줄이든 동일한 방식으로 주석 처리됩니다.
- HTML의 <!-- -->와는 다릅니다. CSS에서는 반드시 /* */를 사용해야 합니다.
✨ 4. CSS 선택자 기초
- 태그 선택자:
p { }처럼 태그 이름으로 선택 - 클래스 선택자:
.highlight { }처럼 마침표(.)와 함께 사용 - ID 선택자:
#main-title { }처럼 샵(#)을 붙여 사용
→ 클래스는 여러 요소에 재사용 가능하고, ID는 한 페이지에 하나만 사용해야 합니다.
✨ 마무리
이제 HTML에 CSS를 더해 웹페이지를 꾸미는 방법을 알게 되었습니다. 이 글에서 소개한 스타일 속성들과 선택자만 잘 익혀도, 실용적인 웹페이지 만들기의 기초를 탄탄히 다질 수 있습니다.
다음 글에서는 "박스 모델"과 웹 레이아웃의 개념을 통해, 더 정교한 배치와 디자인을 배우게 됩니다.
'프로그래밍 언어 > Front-End' 카테고리의 다른 글
| [Web UI 기초 #부록] 시맨틱 태그 심화: Feedly와 RSS로 이해하는 <article> (1) | 2025.06.16 |
|---|---|
| [Web UI 기초 #4] 시맨틱 태그로 HTML 구조화하기 (7) | 2025.06.09 |
| [Web UI 기초 #3] 내 첫 HTML 문서 만들기 - 기본 구조부터 핵심 태그까지 (1) | 2025.06.02 |
댓글 영역