○ CSS
● CSS(Cascading Style Sheet)
html 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이다
CSS로 작성된 코드를 Style Sheet라고 부른다
○ html에 CSS를 적용시키는 방법
● Inline Style Sheet
html 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법으로 우선 순위가 가장 높다
ex) <p style="color:blue">인라인 스타일 시트</p>
해당 태그(p)가 선택자(Selector)가 되고, CSS 코드에는 속성(Property)과 값(Value)만 들어간다
- 선택자 : 무엇을 꾸밀지 정한다
- 속성 : 어떤 모양을 꾸밀지 정한다
- 값 : 어떻게 꾸밀지 정한다
=> 속성과 값을 합쳐서 선언(declaration)이라고 한다
꾸미는 데 한계가 있으며, 재사용이 불가능하다는 단점이 있다
● Internal Style Sheet
html 문서 안에 스타일 코드를 넣는 방법이다
<style> 태그 안에 CSS 코드를 넣는다
ex) <style>
p { color:blue; }
</style>
<style> 태그는 보통 <head> 태그 안에 넣으나, html 문서의 어디에 넣어도 잘 적용된다
html 문서 안의 여러 요소를 한 번에 꾸밀 수 있지만, 다른 html 문서에는 적용할 수 없다
● Linking Style Sheet
별도의 CSS 파일을 만들고 html 문서와 연결하는 방법이다
CSS 파일을 적용시키고 싶은 문서에 <link> 태그로 연결한다
CSS 파일의 확장자는 .css이다. 적용을 원하는 html 문서에 다음의 코드를 추가한다
ex) <link rel="stylesheet" href="style.css">
장점은 여러 html 문서에서 사용이 가능하다
○ 셀렉터(Selector)
| 셀렉터 이름 | 선택하는 것 | 예시 |
|---|---|---|
| 엘리먼트 셀렉터 (태그 또는 타입 셀렉터) | 특정 타입의 모든 html 엘리먼트 | 태그 { } (p { }, div { }) |
| 아이디 셀렉터 | html 페이지에서 특정 아이디를 가진 엘리먼트 | #아이디 이름 (#id) |
| 클래스 셀렉터 | html 페이지에서 특정 클래스를 가진 엘리먼트 | .클래스 이름 (.class) |
| 속성 셀렉터 | html 페이지에서 특정 속성을 갖는 페이지의 엘리먼트 | 태그[ 속성[="값"] ] (input[type="text"]) |
| 수도(Pseudo) 셀렉터 | 특정 타입의 엘리먼트지만 특정 상태에 있을 때 | 태그:상태
(a:hover(마우스를 올려놓았을 때), input[type="text"]:fous(포커스를 받았을 때)) |
| 셀렉터 이름 | 선택하는 것 | 예시 |
|---|---|---|
| 자식 셀렉터 | 부모 태그 바로 밑에 있는 태그(자식 태그) | 태그 > 태그 { } (div > span { } (div 태그 안 바로 밑에 있는 span 태그)) |
| 자손 셀렉터 | 부모 태그 안에 있는 태그 | 태그 태그 { } (div span { } (div 태그 안에 있는 span 태그)) |
실행 코드
실행 결과
hover는 태그에 마우스를 올려놓았을 때 발생한다
'html§CSS' 카테고리의 다른 글
| CSS의 속성들(1) (0) | 2020.06.19 |
|---|---|
| HTML의 태그들(8) (0) | 2020.06.18 |
| HTML의 태그들(7) (2) | 2020.06.16 |
| HTML의 태그들(6) (0) | 2020.06.16 |
| HTML의 태그들(5) (0) | 2020.06.15 |
