CSS - Type / Id / Class 선택자

어느 수업이든 마찬가지이겠지만, 1시간짜리 강의를 들었을때 나에게 필요한 복습 시간은 최소 1시간인것 같다. 

 

뒤돌아서면 나의 뇌는 LTE급으로 기억력 감퇴를 시작하기 때문에, 지난주 토요일에 들은 웹페이지 제작 CSS 파트를 4일째에서야 본격적으로 복습을 하려니 참 힘들다ㅋㅋㅋ 이제부터 꼭 주말 내에 1회 복습을 끝내야겠다. 

 

HTML 수업 한번 들었다면 다 아는 제목 태그를 이대로 구현하면 색깔도 검정이고 참 재미가 없다.

색 입히는 역할은 CSS인데, 한번 살펴보자!

 

 

CSS에서 선택자란 '디자인을 적용하고 싶은 HTML 영역' 이다. 크게 Type, Id, Class 세 가지로 구분된다. 

 

Type 선택자

<태그>{속성:속성값;속성:속성값; 등등등}

 

사진에서 <h1>,<h2>..과 같은 html 태그를 기준으로 디자인을 적용할 부분을 type선택자라고 한다. 

 

 

HTML에서 주석처리는 <!-- 내용내용내용 --> 이었다면, CSS에서 주석처리는 /* 내용내용내용 */ 으로 한다. 

 

<h1>,<h3>,<h5> 태그에 직접 css 속성을 적용한 것으로, 글자색과 크기를 변경해보았다. 

color속성의 속성값을 3가지로 다르게 써 봤는데, 여기서 rgb, rgba는 네이버에 'html 색상표' 라고 검색해서 나온 결과를 참고했다. 

 

  h1{color: rgba(255, 0, 0, 0.5); font-size: 70px;} 0.5는 투명도를 의미한다. 
  h3{color: rgb(1,0,255); font-size: 50px;} 
  h5{color: #5F00FF; font-size: 30px;}

 

 

근데 이거 강의할 때 포토샵 전혀 할 줄 모르는 사람이 나밖에 없었다ㅜㅜ 웹페이지 제작하려면 포토샵, 일러스트를 조금이라도 다룰 줄 알아야 한다고 하셨는데 고민이 된다. 

 

id 선택자

#id명{속성:속성값; 등등등}

 

type선택자는 디자인을 적용하려는 html 같은 태그가 여러개라면 그 중에 하나로만 적용할 수는 없다. 

id선택자는 html태그에 아이디를 부여해서 선택하는 방식이고, 동일할 수 없다. (유일해야 함!)

naming 할때는 무조건 영문, _(언더바)와 숫자는 사용가능하고, 띄어쓰기는 하면 안된다.
naming 앞에 #이 붙는다! 즉, #을 사용해 id속성값을 선택할 수 있다.

 

 

예를들어, 위에서 나는 '순서 없는 목록'에 hobby_1이라는 id를 부여했다. 

그리고 여기에 내가 원하는 css디자인 적용을 위해서 #hobby_1{color:#FF007F;} 을 한 것이다. 

 

Class 선택자

.class명{속성:속성값; 등등등}

 

id가 이름 혹은 주민번호라면, class는 여러개를 가질수도 있고, 중복도 가능하다는 점에서 별명과 같다. 
class는 앞에 .이 붙는다

 

 

예를 들어, 위의 내용에 더해 취미 목록인 '영화 보기', '술 마시기', '수영'에 colour 라는 class는 부여했다. 

그리고 내가 원하는 색상 적용을 위해 .colour{color:#41AF39;} 를 한 것이다.

 

그런데 만약에 여기서 '영화 보기' 에만 다른 디자인을 입히고 싶다면 클래스명에 추가를 더하면 된다. 

 

 

취미 목록에 현재 'colour' 라는 클래스로 선언이 되었는데, 특별히 다르게 적용하고 싶은 '영화 보기'에 멀티클래스로 'colour best' 라고 명칭을 추가해준다. 

 

그 다음 .colour{color:#41AF39;} 로 클래스 선택자로 css디자인을 적용한 것 아래에 .best{font-size: 30px;} 를 해주면 기존에 적용한 디자인에 덧대어 추가 적용한 결과가 함께 나오게 된다.

← CSS란 Cascading Style Sheet의 약자이다. 프랑스어로 Cascade가 '연속'이라는 뜻이 있는데 여기서 비롯된 것일까 유추해본다. 

 

Id와 Class의 차이는 위에서 다루었다. 주로 큰 구조에서는 id를, 그 안의 작은 것들에 대해서는 class를 사용한다고 한다. 

*단 상황에 따라 다름;;