728x90
CSS란?
Cascading Style Sheet
- 정보(HTML)와 디자인(CSS)의 분리
- 문서의 레이아웃과 스타일 정의
- HTML로 작성된 정보를 꾸며주는 언어
CSS 구성 요소
선택자 { 속성 : 속성값; }
h1 {
font-size: 20px;
font-family: sans-serif;
color: blue;
background-color: yellow;
text-align: center;
}선택자
- 디자인을 적용할 HTML 영역
속성
- 어떤 디자인을 적용할지 정의
속성값
- 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;) 필수 입력
CSS 연동 방법 세 가지
Inline Style Sheet
<h1 style="color: red;">coding 101</h1>
- 태그 안에 직접 원하는 스타일을 적용
Internal Style Sheet
<head>
<style>
h1 { background-color: yellow; }
</style>
</head>
- <style> 태그 안에 넣기
External Style Sheet
<head>
<link rel="stylesheet" href="style.css">
</head>
- <link> 태그로 불러오기
- html, css 각각의 문서 안에서 따로 관리해서 상대적으로 가독성이 높고 유지보수가 쉬움
728x90
반응형
'Front-End' 카테고리의 다른 글
| [CSS] 속성의 상속 (0) | 2023.02.27 |
|---|---|
| [CSS] CSS 선택자 - Type / Class / ID (0) | 2023.02.27 |
| [HTML/CSS] Block 요소와 Inline 요소 (0) | 2023.02.27 |
| [HTML] 구조를 잡을 때 사용하는 태그 (0) | 2023.02.27 |
| [HTML] HTML 기본 태그 (0) | 2023.02.27 |