-
[코드스테이츠 TIL] CSS 선택자 : CLASS, IDStudy/HTML & CSS 2019. 11. 22. 21:53반응형
[ CSS ]
Cascading Style Sheets의 약자 웹 페이지 구성요소의 스타일을 정의하는 언어
CSS를 HTML에 적용하는 세가지 방법
1. inline
HTML의 특정 태그에 직접 style을 적용
<h1 style="color: red; font-style: italic">Hello world<h1>2. HTML 내부에 stylesheet 작성
<style> 태그 이용하여 <head> 태그 안에 삽입
태그를 선택하는 규칙(Selector)에 따라 일괄 적용
<!DOCTYPE html> <html> <head> <title>Page title</title> <style> h1 { color: red; font-style: italic; } /* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */ </style> </head> <body> <h1>Hello world</h1> <div>Contents here <span>Here too!<span> </div> </body> </html>3. HTML 외부에 stylesheet 작성
<link>태그 이용
css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입
<!DOCTYPE html> <html> <head> <title>Page title</title> <link rel="stylesheet" type="text/css" href="myFirstStyle.css" /> </head> <body> <h1>Hello world</h1> <div>Contents here <span>Here too!<span> </div> </body> </html>[ CSS SELECTOR ]
CSS 선택자 : CSS에서 요소(element)를 선택하는 규칙
1. 각각의 ELEMENT에 고유한 ID를 부여 : #ID
id 속성 이용
#identifier와 같이 #을 이용해 고유한 id를 선택
<!-- 생략 --> <h1 id="hello">Hello world</h1> <h1 id="codestates">Code States</h1> <!-- 생략 -->#hello { color: red; } #codestates { color: blue; }2. 종류(CLASS)를 만들고 ELEMENT에 CLASS 부여 : .CLASS
각기 다른 특성을 가진 종류를 만들고, 해당 element에 적용
여러 태그에 class를 부여할 수 있으며, 한 태그에 여러 class 적용도 가능
.className과 같이 .(dot)을 이용해 class 선택
<!-- 생략 --> <h1 class="red underline">Hello world</h1> <h1 class="blue">Code States</h1> <!-- 생략 -->.red { color: red; } .blue { color: blue; } .underline { text-decoration: underline; }Class 선택자와 Id 선택자 비교
CLASS ID 자유롭게 이름 붙임 자유롭게 이름 붙임 동일한 값을 갖는 element는 많음 문서 내에서 단 하나의 element가 유일한 값을 가짐 element가 여러 값을 가질 수 있음 element는 단 하나의 값을 가짐 스타일의 분류(classification)에 사용 특정 element를 이름 붙이는 데 사용 반응형'Study > HTML & CSS' 카테고리의 다른 글
CSS 가상 class 선택자 & Transition 전환 속성 & Transform 속성 (0) 2019.11.24 [코드스테이츠 TIL] CSS LAYOUT : Display, Box model, Positioning, Float (0) 2019.11.23 [생활코딩] 5. CSS 선택자 & 선택자 우선순위 (0) 2019.08.07 [생활코딩] 4. CSS의 등장 & CSS의 문법 (0) 2019.08.06 [생활코딩] 3. 웹의 역사 & 웹호스팅 & 웹서버 (0) 2019.08.05