CSS를 HTML에 적용하는 세가지 방법
-
inline
-
HTML 내부에 stylesheet 작성
-
HTML 외부에 stylesheet 작성
1. INLINE
HTML의 특정 태그에 직접 style을 적용
h1 style="color: red; font-style: italic" Hello world h1
-
h1태그에 style이라는 속성을 부여해서 적용
-
색상은 빨간색, 스타일은 기울임꼴임을 명시
2. HTML 내부에 STYLESHEET 작성
-
<style> 태그 이용
-
보통 <head> 태그 안에 삽입
-
태그를 선택하는 규칙(Selector)에 따라 일괄 적용
head
style
h1 { color: red; font-style: italic; }
/* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */
/style
/head
3. HTML 외부에 STYLESHEET 작성
-
<link>태그 이용
-
css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입
"index.html"
{
link rel="stylesheet" type="text/css" href="myFirstStyle.css" /
}
"myFirstStyle.css"
{
h1 { color: red; font-style: italic; }
}
CSS SELECTOR
CSS에서 요소(element)를 선택하는 규칙
-
Note: 태그라는 용어는 시작 및 종료 태그와 같이 마크업(Markup)을 의미하며, 요소는 의미를 갖는 하나의 구조를 의미합니다
SOLUTION 1: 각각의 ELEMENT에 고유한 ID를 부여
-
id 속성 이용
-
#identifier와 같이 #을 이용해 고유한 id를 선택
index.html
h1 id="hello" Hello world /h1
h1 id="codestates" Code States /h1
myFirstStyle.css
#hello { color: red; }
#codestates { color: blue; }
index.html
h1 class="red underline" Hello world /h1
myFirstStyle.css
.red { color: red; }
.underline { text-decoration: underline; }
'TIL > TIL' 카테고리의 다른 글
| 프로토타이핑 (0) | 2020.02.13 |
|---|---|
| CLASS 선택자와 ID 선택자 (0) | 2020.02.13 |
| HTML basic functions (0) | 2020.02.13 |
| WEBPACK with ES6(babel) (0) | 2020.02.12 |
| WEBPACK (0) | 2020.02.11 |
comment