CSS(Cascading Style Sheets): 웹 문서의 모양과 디자인(스타일) 을 정의하는 언어
선택자와 선언 블록으로 구성됨
선택자(selector) {
속성(property): 값(value);
}
| 구분 | 설명 | 예시 |
|---|---|---|
| Inline Style | 태그에 직접 스타일 적용 | <p **style="color:red;"**> |
| Internal Style (내부 스타일 시트) | <style> 태그 내에 작성 |
<style>**p {color:blue;}**</style> |
| External Style (외부 스타일 시트) | .css 파일을 링크 |
<link rel="stylesheet" href="style.css"> |
@charset "EUC-KR";
p{
color: green;
font-size: 40px;
}
span{
color: green;
font-size: 40px;
}
h2{
color: green;
font-size: 40px;
}
<link><link>는 “외부 리소스와의 관계(rel)”를 정의하는 범용 연결 태그
CSS 연결은 가장 대표적이지만,
실제로는 아이콘, 폰트, SEO, 성능 최적화, RSS 등 다양하게 쓰인다.
| 용도 | rel 값 | href 예시 | 설명 |
|---|---|---|---|
| 외부 CSS 연결 | stylesheet |
style.css |
가장 일반적 |
| 파비콘 | icon / shortcut icon |
/favicon.ico |
브라우저 탭 아이콘 |
| RSS 피드 | alternate |
/feed.xml |
RSS 구독용 |
| 사이트맵 | sitemap |
/sitemap.xml |
검색엔진용 |
| 정규 URL | canonical |
https://example.com/... |
SEO용 |
| 폰트 | preconnect / stylesheet |
Google Fonts | 웹폰트 최적화 |
| 미리 로드 | preload / prefetch |
JS, 이미지, HTML | 성능 최적화 |
| 다국어 버전 | alternate + hreflang |
/en/, /ko/ |
언어별 페이지 연결 |
| PWA 정보 | manifest |
/manifest.json |
웹앱 설정 |
인라인 > 내부 스타일시트 > 외부 스타일시트 > 브라우저 기본값
선언 위치에 따라 불러와지는게 다르니 주의할 것
| 속성 | 설명 | 예시 |
|---|---|---|
width / height |
요소의 가로, 세로 크기 지정 | width: 200px; height: 100px; |
max-width / min-width |
최대·최소 크기 제한 | max-width: 600px; |
margin |
바깥 여백 (요소 간 거리) | margin: 10px 20px; |
padding |
안쪽 여백 (내용과 테두리 사이 거리) | padding: 20px; |
border |
테두리 설정 (두께, 선종류, 색상) | border: 2px solid black; |
box-sizing |
width에 padding·border 포함 여부 결정 (content-box, border-box) |
box-sizing: border-box; |
💡 margin과 padding은 4방향 단축 표기가 가능