[CSS] CSS 기초, 선택자

HTML이 페이지의 기본 스트럭쳐라면 CSS는 거기에 스타일을 입혀주는 시트언어이다.

캡쳐된 이미지는 내가 연습삼아 HTML만으로 만든 페이지이다. 

화려한 웹사이트들에 익숙한 요즘의 눈이 아니라 20년 전에도 이 정도는 제대로된 페이지라고 하기 힘들었다.

조금 낫지 않은가. 물론 CSS와 자바스크립트를 쓰기에 따라 얼마든지 더 멋지게 꾸며질 수 있다.

 

CSS 스타일은 html 도큐먼트 내의 head 안에 style 태그를 이용하여 넣어줄 수도 있고, 별도의 파일로 만들고나서 html 도큐먼트 내에서 호출해서 사용할 수도 있다.

별도 파일을 만들어서 html 도큐먼트로 link 시키는 것이 일반적이고 권장된다.

 

CSS의 기본단위

px: 고정된 픽셀 단위

pt: 포인트(1/72인치)

pc: 피카소(1/6인치)

in: 인치(96픽셀)

%: 화면의 % 값

em: 1em, 0.5em 등 상대크기

deg: 각도

 

선택자

Selector - 선택자란 요소를 선택할 때 쓰이는 이름을 말한다.

- ID 선택자: #아이디명으로 지정된다.

- 태그 선택자: 태그명 => 같은 이름을 가지는 모든 태그에 지정

- 클래스 선택자: .클래스명 => 같은 클래스명을 가지는 모든 태그에 지정

- 가상 클래스 선택자: :가상클래스명

어떤 조건이나 상황에서 스타일을 적용하도록 하는 선택자

주로 앞에 다른 선택자가 오고 뒤에 가상클래스 선택자가 붙는다.

:hover => 요소에 마우스 커서를 올렸을 때 적용됨

:focus => 요소가 포커스를 받고 있을 때 적용됨

:nth-child(a) 또는 :nth-of-type(a) => a번째에 해당하는 요소

child를 쓰면 모든 요소 중 a번째에 해당하는 요소가 선택되며, type을 쓰면 조건 값에 맞는 요소 중 a번째에 해당하는 요소가 선택된다. 

a의 값으론;

1: 첫번째 요소

even: 짝수번째 요소

odd: 홀수번째 요소

3n: 3의 배수 번째 요소

등이 가능하다.

 

여러 선택자를 조합해서 요소를 선택하는 것도 가능하다ㅏ.

- 자식관계

선택자1(바로 위의 부모요소) > 선택자2 (자식요소)

예로, div > input 와 같이 사용 가능하다.

- 자손관계

선택자1(조상, 부모를 포함하는) 선택자2(자식요소)

예로, div input 과 같이 사용 가능하다. 

- 본인

선택자를 붙여서 사용한다.

div.hi

div#apple

과 같은 식으로.

선택자 1,2를 모두 만족하는 요소를 선택한다.

조합이 안되는 경우도 있으니 순서와 가능한 조합이 익숙해져야한다.

 

선택자 우선순위는

아이디>클래스>태그

이다.

한 요소에 태그로 스타일 적용이 되고 아이디로 또 적용이 되었다면 아이디로 적용된 스타일이 실제 적용되는 것.

우선순위가 같은 선택자가 중복으로 작성되면 가장 아래에 있는 내용이 적용된다. 

 

간단히 활용해보자.

56~82라인은 CSS 스타일이다.

- 87라인

라인 87에 hi라는 클래스로 작성된 p요소인 "안녕하세요. 홍길동입니다."의 스타일을 잡아주는 선택자는

56라인이 먼저 있고, 68라인이 있으며 74라인이 또 있다. 56라인에서 아쿠아마린으로 글자색을 지정해줬으나 이는 태그로 선택한 것이기에 클래스로 선택한 74라인에 우선순위가 밀린다. 결과적으론 74라인의 영향을 받아 코랄색으로 지정이 될 것이다.

- 88라인

라인56에서는 아쿠아마린으로 글자색을 지정해줬지만 라인59에서 두번째 요소를 레드로 지정하게하니 라인88은 레드로 지정될 것이다.

- 89라인

최우선순위인 id 선택자가 라인65에 있다. 초록색으로 지정될 것이다.

- 90라인

hi 클래스기에 74의 영향으로 코랄색으로 지정이 될 것이고, div와 hi 모두를 만족하니 폰트 두께는 700으로 적용될 것이다.

- 91라인

div안에 있으니 라인71의 영향으로 바이올렛 색이 될 것이다.

 

추가로, 라인80을 보면 p 요소는 커서를 가져다 댈 시 폰트 두께가 700이 될 것이라는 것도 알 수 있다.