티스토리 뷰

웹/HTML, CSS

[HTML/CSS]CSS 문법, 선택자

cll179 2018. 1. 8. 13:08

CSS 문법

<style></style> - CSS 가 기술되는 영역

선택자(selector) - 스타일을 변경할 HTML 요소 선택

선언(declaration) - 선택자 뒤에 중괄호 부분 영역, 이 부분에 속성(property)와 값(value)를 기술한다.

 

*형식

<style>

선택자 { 속성 : 값; }

</style>

ex)  <style>

a { color : red; }

</style> -> <a> 태그를 사용한 모든 텍스트를 빨간색으로

 

*인라인 형식(inline style sheet)

- 태그 안에 속성(property)으로 작성할 수 있다.

<li><a href="2.html" style="color : red">CSS</a></li>

 

선택자 종류

타입 선택자(type selector)

h1{ color : green; } 모든 <h1>태그 사용한 요소 선택

 

아이디 선택자(id selector)

#active { color : red } id가 "active"인 요소 선택

h1#active {color : red } <h1> 요소 중 아이디가 "active"인 요소 선택

 

클래스 선택자(class selector)

.target{color : red;} 클래스가 target인 요소 선택

 

선택자 우선 순위

id 선택자> class 선택자 > 태그(타입) 선택자

 

- 우선순위가 같은 선택자들끼리 충돌하면
보다 가까운 위치에 있는 CSS 선택자가 실행된다.

- 우선순위는 대체로 포괄적인 선택자 < 구체적인 선택자 이다.

 

ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
a{
color : black;
text-decoration : none;
}
#active {
color : red;
}
.saw{
color:gray;
}
</style>
<body>
 <a href="1.html" class = "saw">HTML</a>
 <a href="2.html" class = "saw" id = "active">CSS</a>
 <a href="3.html">JavaScript</a>
</body>
 cs

 

<실행 결과>

 

선택자 관련 정보 : https://www.w3schools.com/cssref/css_selectors.asp

 

※

해당 게시물은 '생활코딩'에서 진행하는 코딩야학 3기 수강 내용을 정리한 내용입니다.


본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > HTML, CSS' 카테고리의 다른 글

[HTML,CSS]float 레이아웃  (0) 2018.05.22
[CSS]미디어 쿼리  (0) 2018.01.23
[CSS]그리드  (1) 2018.01.23
[CSS]박스 모델  (0) 2018.01.22
HTML 문법, 자주쓰는 태그  (0) 2017.12.31
댓글