728x90
반응형
SMALL
CSS
: 각 요소들이 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어로,
홈페이지의 스타일 즉, 디자인적인 부분을 서술한다.
문서의 구조(웹문서구조 html)와 표편(스타일시트)를 분리함으로써 문서 구조의 수정 없이 스타일의 변경만으로 다양한 표현을 할 수 있다는 것을 의미한다.
- 기본 구조
선택자(Selector) { 속성(property) : 값(value); }
* 스타일은 기본적으로는 마지막에 작성된 순서대로 표현되어진다.
스타일 문법의 종류
1. 외부 스타일 시트 (External style sheet)
: 외부에 작성된 .css문서 즉 스타일 시트 파일을 연결해여 적용하는 방식이다.
<link> 를 이용해서 외부에 있는 .css 파일과 연결을 해 준다.
<head>
<link rel="stylesheet" type="text/css" href="파일경로">
</head>
2. 내부 스타일 시트 (Internal style sheet)
: <head>와 </head> 사이에 <style> 태그를 사용해서 CSS 스타일을 적용하는 방식이다.
<head>
<style>
body{
background-color: black;
}
</style>
</head>
3. 인라인 스타일 시트 (Inline style)
: HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법
<body>
<h1 style="color:blue">
</body>
728x90
반응형
LIST
'Front-End > CSS 3' 카테고리의 다른 글
| [프론트엔드][CSS3] 6. color, background 관련 스타일 (0) | 2021.07.06 |
|---|---|
| [프론트엔드][CSS3] 5. text 관련 스타일 (0) | 2021.07.05 |
| [프론트엔드][CSS3] 4. font 관련 스타일 (0) | 2021.06.30 |
| [프론트엔드][CSS3] 3. 선택자 (2) (0) | 2021.06.30 |
| [프론트엔드][CSS3] 2. 선택자 (1) (0) | 2021.06.30 |
