CSS 문법
문법 형식
- 선택자와 선언부로 구분
- 선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역
- 선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역(중괄호({}) 안에 작성)
- 선언부에 작성하는 스타일은 반드시 속성과 값을 한 쌍으로 작성(값의 뒤에 세미콜론을 넣으면 여러 스타일을 연속해서 작성 가능)
1
2
3
4
h1{
font-size:24px;
color:red;
}
주석
- 코드 설명
- 웹 브라우저 소스 보기에 노출되므로 중요 정보 작성 금지
1
/*주석내용*/
CSS 적용
- 작성한 CSS를 HTML 문서에 적용하는 대표적인 방법 3가지
- 내부 스타일 시트
- 외부 스타일 시트
- 인라인 스타일
내부 스타일 시트
- HTML 파일 내부에 CSS 코드 작성하는 방법
- HTML에서 제공하는 style 태그의 콘텐츠로 CSS 코드 작성
- 보통 head 태그 안에 사용
- 장점 : body 태그에 작성된 내용이 사용자에게 노출되기 전에 CSS를 불러와 빠르게 디자인 적용 가능
- 단점 : 웹 브라우저에서 HTML 문서를 해석할 때마다 CSS 코드를 매번 다시 읽기 때문에 성능상으로는 좋지 못함
1
2
3
4
5
6
7
8
9
10
11
<head>
<title>내부 스타일시트(Internal Style Sheet)</title>
<style>
h1{
color:cornflowerblue;
}
</style>
</head>
<body>
<h1>내부 스타일시트</h1>
</body>
내부 스타일시트
외부 스타일 시트
- CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방법(확장자는 css) : 연결 시 link 태그 사용
- 대부분 실무에서 사용
- 코드 유지 보수에 편리
- 성능적으로도 가장 좋음
1
2
3
4
<!-- 프로젝트 폴더(CODE)에 style.css파일 작성 -->
h1{
color:red;
}
1
2
3
4
5
6
7
8
<!-- 같은 폴더에 index.html 파일 작성 -->
<haed>
<title>외부 스타일 시트(External Style Sheet)</title>
<link rel="stylesheet" hrdf="style.css">
</head>
<body>
<h1>외부 스타일 시트</h1>
</body>
인라인 스타일
-
- HTML 태그에서 사용할 수 있는 style 속성에 CSS코드를 작성하는 방법
- 태그에 직접 CSS코드를 작성하는 방식이라서 CSS의 기본 문법 형식에서 선택자 부분이 필요 없음
- HTML 태그에서 사용할 수 있는 style 속성에 CSS코드를 작성하는 방법
1
2
3
<body>
<h1 style="color:mediumpurple; font-size:24px">인라인 스타일</h1>
</body>