우리는 앞서 CSS의 사용방법을 크게 3가지로 알아보았다.
이번에 알아볼 것은 '선택자'로 CSS를 적용할 대상을 선택하는 것이다.
먼저 사이트 하나를 소개하도록 하겠다.
https://www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements
www.w3schools.com
이 사이트는 CSS 선택자의 종류를 알려준다.
모르면 여기서 찾아보면 된다!
우리는 이 중에서 자주 쓰이고 중요한 선택자들을 알아보도록 하겠다.
선택자
선택자는 보통 선언 블록 앞에 쓴다.
선언 블록은 CSS속성과 그 값을 넣을 수 있는 공간이고 { }로 쓴다.
인라인 사용방법에는 쓰이지 않고 임베디드나 외부 파일 사용방법에 쓰인다.
왜냐면 인라인은 벌써 그 태그를 선택하고 있기 때문이다.
2020/05/05 - [IT아카데미/CSS] - 홈페이지 만들기 - CSS [0]
홈페이지 만들기 - CSS[0]
이제까지 HTML로 문서의 구성과 내용의 기반을 다졌다 하지만 90년대 문서도 이거보다는 잘 나왔겠다 싶다 앞으로 할 CSS는 이런 90년대 문서를 2010년대 문서로 만들어 줄 수 있는 장치이다. 2020년��
jejehoon.tistory.com
여기에 사용 방법 3가지를 설명해 놓았다.
이 중 자주 쓰이는 선택자를 알아보자
모든 선택자( * )
* { CSS속성; } 이렇게 쓴다. ( *는 보통 shift 8을 누르면 나타난다.)
HTML 문서의 모든 태그를 선택할 수 있는 선택자이다.
태그 선택자( 태그 명 )
태그 명 { CSS속성; } 이렇게 쓴다.
적용하고 싶은 태그를 선택할 수 있는 선택자이다.
그룹 선택자( 태그 여러 개 )
태그 1, 태그 2 { CSS속성; } 이렇게 쓴다.
여러 개의 태그를 선택하여 동시에 CSS속성을 적용할 수 있다.
후손 선택자( 태그 안에 태그들 )
태그 태그 안의 태그 { CSS속성; } 이렇게 쓴다.
/*html태그가
<div>
<h1>제목</h1>
<p>문단</p>
</div>
이렇게 되어 있을 경우*/
/*h1이나 p태그를 선택하기위해서*/
div h1 {CSS속성} 이렇게 사용한다.
자식 선택자( 태그 안의 바로 밑 태그 )
부모 태그 > 자식 태그 { CSS속성; } 이렇게 쓴다.
위의 후손 선택자의 예시 중 div태그와 h1태그는 서로 부모 자식 관계이다.
p태그는 말하자면 손자이기 때문에 div > p 이런 식으로 쓸 수 없다.
형제(동위) 선택자( 같은 등급의 태그들 )
태그 + 태그 { CSS속성; } 또는 태그 ~ 태그{ CSS속성; } 이렇게 쓴다.
+는 같은 계층 중 어떤 것이던 가능하고 ~는 같은 계층 중 바로 밑의 태그이다.
※HTML 구조상의 계층과 문서상의 계층은 다르다.
구조적으로 <h1> <h2>는 h1이 상위이지만
<div> 안에 같은 계층으로 <h1><h2>가 있는 경우에는 같은 계층이다.
기본 속성 선택자( 태그 안의 속성 )
태그[속성] 또는 태그[속성="속성 값"] { CSS속성;} 이렇게 쓴다.
태그의 속성을 선택하여 CSS를 적용할 수 있다.
속성 선택자는 7개가 있고 임의로 기본과 문자열로 나누었다.
※태그[]를 띄어서 태그 []로 쓰게 된다면 후손 선택자로 인식되어 주의해야 한다.
또한 속성 값을 쓰게 된다면 속성 값이 정확히 일치해야 한다.
문자열 속성 선택자 또는 value 선택자( 태그 안의 속성의 값 )
value는 태그의 속성 값으로 꼭 value를 넣어야 하는 것이 아니다.
-
태그[속성~="value"] 속성 값이 value를 포함한 태그를 선택(단어 기준 value abc는 선택되지만 valueword는 선택되지 않는다.)
-
태그[속성|="value"] 속성 값이 value나 value-로 시작하는 태그를 선택(단어 기준 속성 값이 valueword이거나 value이면 적용. 하지만 value abc는 적용되지 않는다.)
-
태그[속성^="value"] 속성 값이 value로 시작하는 태그를 선택 (문자열 기준 모두 적용)
-
태그[속성$="value"] 속성 값이 value로 끝나는 태그를 선택(문자열 기준 모두 적용)
-
태그[속성*="value"] 속성 값이 value가 포함된 태그를 선택(문자열 기준 모두 적용)
이렇게 5가지로 쓸 수 있다
id 선택자와 클래스 선택자( 태그 안의 id속성의 값, 클래스 속성의 값 )
#id명 { CSS속성; }과 .class명 {CSS속성;} 이렇게 쓴다.
id가 class보다 더 디테일하기 때문에 class보다 먼저 쓰인다.
(id는 HTML 문서 안에 하나만 존재하기 때문이다.)
class는 중복으로 적용이 가능해서 동일한 여러 개의 클래스 명을 가질 수 있다.
※id속성의 값은 영문으로 시작해야 하고 띄어쓰기가 불가능하다.
대신 _(언더바)나 -(하이픈)을 사용한다.
또한 한글, 특수기호도 사용이 불가능하다.
만약 된다고 해도 validator검사를 하면 버그가 난다.
이외의 선택자들은 다음 페이지에서 만날 수 있다.
공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)
그럼~ 앙 제바
'IT아카데미 > CSS' 카테고리의 다른 글
| 홈페이지 만들기 - CSS[5] (0) | 2020.05.12 |
|---|---|
| 홈페이지 만들기 - CSS[4] (0) | 2020.05.11 |
| 홈페이지 만들기 - CSS[3] (0) | 2020.05.09 |
| 홈페이지 만들기 - CSS[2] (0) | 2020.05.07 |
| 홈페이지 만들기 - CSS[0] (0) | 2020.05.05 |
