CSS 기초
CSS(Cascading Style Sheets)는 HTML 문서에 스타일(색상·크기·레이아웃)을 적용하는 언어입니다.
CSS 적용 방법 3가지
| 방법 | 위치 | 특징 |
|---|---|---|
| 인라인(Inline) | HTML 태그의 style 속성 |
한 요소에만 적용. 우선순위 가장 높음 |
| 내부(Internal) | <head> 안 <style> 태그 |
한 HTML 파일 전체에 적용 |
| 외부(External) | 별도 .css 파일 + <link> |
여러 HTML 파일에 공통 적용. 가장 권장 |
CSS 기본 문법 구조
CSS 규칙 구조
선택자 {
속성: 값;
속성: 값;
}
/* 예시 */
h1 {
color: red;
font-size: 24px;
}
예제: 내부 스타일 작성 (커피 전문점)
내부 스타일 — <style> 태그 사용
<head>
<style>
body { background-color: yellow; }
h1 { color: red; }
p.first { color: green; }
p.second { color: blue; }
</style>
</head>
<body>
<h1>Welcome to Web Coffee!</h1>
<p class="first">첫 번째 단락 — 녹색</p>
<p class="second">두 번째 단락 — 파란색</p>
</body>
CSS 주석:
/* 내용 */ 형식으로 작성합니다.
HTML 주석(<!-- -->)과 다르므로 혼동하지 마세요.
CSS 선택자
선택자(Selector)는 스타일을 적용할 HTML 요소를 지정합니다.
| 선택자 종류 | 문법 | 설명 |
|---|---|---|
| 요소(타입) 선택자 | h1 { } |
해당 태그 전체에 적용 |
| 클래스 선택자 | .classname { } |
class="classname"인 모든 요소에 적용 |
| 태그+클래스 | p.first { } |
<p class="first">에만 적용 |
| ID 선택자 | #idname { } |
id="idname"인 요소에 적용. 페이지당 1개 |
| 전체 선택자 | * { } |
모든 요소에 적용 |
자주 쓰는 CSS 속성
| 속성 | 예시 값 | 설명 |
|---|---|---|
color |
red, #ff0000, rgb(255,0,0) |
글자 색상 |
background-color |
yellow, #ddeedd |
배경 색상 |
font-size |
16px, 1.2rem, 120% |
글자 크기 |
text-align |
left, center, right |
텍스트 정렬 |
padding |
0.5rem, 10px 20px |
안쪽 여백 |
예제: 클래스 선택자
CSS
.mainArea {
background-color: yellow;
}
.mainArea h1 {
color: red;
}
.mainArea p.first {
color: green;
}
.formArea {
background-color: #ddeedd;
}
footer {
background: #949087;
text-align: center;
padding: 0.5rem;
}
HTML
<section class="mainArea"> <h1>제목</h1> <p class="first">녹색 단락</p> </section> <section class="formArea"> <!-- 연두색 배경 폼 영역 --> </section> <footer> <p>하단 정보</p> </footer>
시맨틱 태그
시맨틱(Semantic) 태그는 태그 이름 자체가 의미를 가집니다. 검색 엔진(SEO)과 스크린 리더(접근성)가 문서 구조를 올바르게 이해하도록 돕습니다.
시맨틱 태그 vs 비시맨틱 태그
| 구분 | 예시 | 특징 |
|---|---|---|
| 시맨틱 태그 | <header>, <nav>, <main> |
역할과 의미가 명확 → SEO, 접근성 향상 |
| 비시맨틱 태그 | <div>, <span> |
의미 없음 → 레이아웃·스타일 목적으로만 사용 |
HTML5 시맨틱 태그 7가지
| 태그 | 역할 | 일반적인 내용 |
|---|---|---|
<header> |
페이지 또는 섹션의 머리말 | 로고, 사이트 제목, 소개 |
<nav> |
내비게이션 링크 모음 | 메뉴, 목차, 페이지 링크 |
<main> |
페이지의 주요 콘텐츠 | 본문. 페이지당 1개만 사용 |
<section> |
관련 콘텐츠의 묶음 | 장(chapter), 탭 패널 |
<article> |
독립적으로 배포 가능한 콘텐츠 | 블로그 포스트, 뉴스 기사 |
<aside> |
주요 콘텐츠와 간접적으로 관련된 부분 | 사이드바, 광고, 관련 링크 |
<footer> |
페이지 또는 섹션의 꼬리말 | 저작권, 연락처, 사이트맵 |
예제: 시맨틱 구조 문서
시맨틱 태그 기본 구조 (ex-semantic-01.html)
<body>
<header>
<h1>HTML, CSS, JAVASCRIPT를 이용한 웹 페이지의 작성</h1>
<p>HTML5를 사용하여 웹페이지 작성하는 방법을 학습합니다.</p>
</header>
<nav>
<h2>목차</h2>
<ul>
<li><a href="#html">HTML5</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#js">JAVASCRIPT</a></li>
</ul>
</nav>
<section>
<article id="html">
<h2>HTML5</h2>
<p>HTML을 이용하여 문서의 구조와 내용을 기술합니다.</p>
</article>
<article id="css">
<h2>CSS3</h2>
<p>CSS을 이용하여 문서의 스타일을 기술합니다.</p>
</article>
</section>
<footer>
<p>Author: <a href="mailto:hong@example.com">hong@example.com</a></p>
</footer>
</body>
section vs article:
<section>은 관련 콘텐츠를 묶는 컨테이너(챕터 등).
<article>은 그 자체로 독립적인 단위(블로그 글, 댓글 등).
article은 section 안에 중첩될 수 있습니다.
시맨틱 태그 + CSS
시맨틱 태그에 클래스와 CSS를 결합하면 구조와 스타일을 분리하면서도 유지보수가 쉬운 코드를 만들 수 있습니다.
예제: 커피전문점 통합 구조
CSS — 시맨틱 태그에 스타일 적용
<style>
.mainArea { background-color: yellow; }
.mainArea h1 { color: red; }
.mainArea p.first { color: green; }
.mainArea p.second { color: blue; }
.formArea { background-color: #ddeedd; }
footer {
background: #949087;
text-align: center;
padding: 0.5rem;
}
</style>
HTML — 시맨틱 구조
<body>
<header>
<h1>구조화 문서</h1>
</header>
<main>
<section class="mainArea">
<!-- CSS 스타일 영역: 노란 배경 -->
</section>
<section class="menuArea">
<!-- 메뉴 목록 -->
</section>
<section class="formArea">
<!-- 주문 폼: 연두색 배경 -->
</section>
</main>
<footer>
<p><small>© 시맨틱 태그 연습</small></p>
</footer>
</body>
input type="password"
3주차에 배운 input 태그에 4주차에서 추가된 타입입니다.
| type 값 | 화면 표시 | 사용 예 |
|---|---|---|
text |
입력한 글자 그대로 표시 | 이름, 닉네임 |
password |
입력한 글자를 ●●●로 마스킹 | 비밀번호, 암호 |
password 입력 예시
닉네임: <input type="text" name="nickname"><br> 암호: <input type="password" name="pw">