[CSS시작하기]구조와 선택자(tag, id, class)

HTML은 웹 문서의 기본 뼈대이다

이 뼈를 꾸며주는 역할을 하는 하는것이 CSS이다

즉 CSS는 디자인을 해준다

왼쪽 CSS적용전, 오른쪽 CSS적용후

 

CSS 사용법

HTML에는 태그라는게 있다

https://korearaogong.tistory.com/7

[HTML 시작하기]구조

 

HTML문서 안에는 수많은 동일한 태그들이 존재하며 이름(id, name)이나 클래스(class)를 부여할 수 있다

---

CSS를 사용하기 전에 id와 class를 알아둬야 한다

id, class, name이란?

간단하게 태그를 사람이라고 비유하자면

id는 그 사람의 주민등록번호라 생각하면 된다

즉 id는 html안에서 하나뿐이다

class는 그 사람이 학교나 회사를 다닌다고 했을 때 그 사람이 속해있는 학교의 반,회사의 부서 같은 소속으로 생각하면 된다

즉 class는 그룹같은 개념으로 html안에서 여러 태그에게 지정해 줄 수 있다

name은 javascript에 사용할 이름으로 CSS에서는 사용을 안함으로 그냥 이름이나 닉네임이라 생각하면 된다

 

CSS 구조

 

 

선택자 { 속성 : 속성값 ; }

CSS 구조

어떤것에 적용할 것인가(선택자) { 디자인(속성)을 어떻게 할 것인가(속성값) ; }

 

선택자

CSS에서는 태그와 id, class를 선택할 수 있다

• 태그를 선택하고 싶은 경우에는 그냥 태그를 쓰면 된다
• class를 선택하고 싶은 경우에는 . 을 입력하고 class이름을 쓰면 된다
• id를 선택하고 싶은 경우에는 # 을 입력하고 id이름을 쓰면 된다
• 여러개를 선택하고 싶은 경우에는 선택자들 사이에 , 를 입력해주면 된다(순서는 상관없다)

p 태그, class라는 이름을 갖고 있는 class, id라는 이름을 갖고있는 id를 선택 했다

input 태그, korea라는 이름의 class, raogong이라는 이름의 id를 선택 했다

선택자의 순서

선택자의 따라 우선 순위가 있다

tag<class<id<태그에 직접 지정으로

1. 태그 안에 직접 스타일링을 해주는 직접입력방법
2. 해당 태그에 주민등록번호를 부여해 주는 id
3. 해당 태그들을 같은 반으로 묶어주는 class
4. 가장 큰 범위를 갖고 있는 즉 어디서나 사용해도 되는 tag

위와 같은 우선순위를 갖고 있다

즉 일반적으로 블로그 테마(스킨)에서 거의 모든 태그에 스타일을 걸어두었지만 우선순위에 따라서 글쓴이가 입력해서 바꾼 스타일이 최종적으로 적용된다

예제

See the Pen Untitled by korearaogong (@korearaogong) on CodePen.