[부스트코스 서포터즈3기]웹과 자바스크립트 - CSS기초(선택자)

들어가기 전 

___________________________________________________

 

안녕하세요!!!! :) 

 

 

오늘은 드디어 CSS 기초 마지막입니다! 

 

 

오늘 알아볼것들을 살펴보겠습니다 :) 

 

 

오늘 알아볼것은!?

 

 

1. Style 속성 

 

 

2. style 태그 

 

 

3. 선택자 

 

 

 =>  선택자에 대해 살펴보도록 하겠습니다. 

 

 

선택자

___________________________________________________

 

오늘 강의의 학습 목표 그리고 단어에 대해 살펴보겠습니다! 

 

 

저번 강의에서는 각 태그들 그리고 class에 대해 짧게 살펴봤는데 

 

 

오늘은 class와 더불어 id와 class등에 대해 살펴보겠습니다! 

 

 

먼저, class에 대해 저번 시간에 잠깐 살펴본 거에 이어 웹페이지의 요소들을

 

 

제어하기 위해 사용되는 것들을  선택자라고 합니다.

 

 

이러한 선택자를 알맞게 적용해야 웹페이지 내에서 강조하고 싶은 부분을 효율적으로 효과를 줄 수 있기 때문입니다 :) 

 

 

한번 코드를 통해 살펴보도록 하겠습니다! 

 

 

[출처]부스트코스 자바스크립트의 시작

현재 제가 가지고 있는 다른 예시가 없으므로....  (곳 깃허브 홈페이지 제작 예정입니다ㅎㅎ)

 

 

코드를 살펴보게 되면. js의 class 부분과 #first 부분을 확인하실 수 있으실 텐데요

 

 

여기서 잠깐! 

 

 

이렇게 보셨던 거와 같이. , # 가 의미하는 건 다음과 같습니다. 

 

 

. (클래스 값) : 해당 웹페이지에 있는 동일한 클래스 값을 가진 클래스를 지칭합니다. 

 

 

# (ID 값) : 해당 웹페이지에 있는 ID를 지칭합니다.

 

 

조금 더 쉽게 접근하자면 class라는 말은 무언가를 그루핑 한다는 것을 의미하며 ,

 

 

id라는 말은 어떠한 한 가지 대상을 식별하는 것을 의미합니다. 또한 id는 id로 선언된 값의 중복이 절대! 되지 않습니다. 

 

 

예시를 한번 들어볼까요!

 

 

어떠한 학교에 있는데 그 학교 내에 있는 학급 (1반 , 2반 , 3반....) 등 이렇게 학급을 만드는 것이 class

 

 

그 학급 내에 있는 한 명 한 명의 학번이 ID (즉 , 중복이 되어서는 절대 안 된다)

 

 

왜 그렇다면 ID는 중복이 되어서는 안 될까요!?

 

 

ID의 경우 한 가지 대상을 식별하는 것을 의미하기 때문에 ID로서 한 가지의 단어를 사용할 시 더 이상 그 단어를

 

 

중복하여 사용하는 것이 불가능하기 때문입니다.

 

 

ID와 class와의 관계

위의 예시만 보더라도 학급 안에 학번이 포함되어있음을 알 수 있듯이

 

 

포괄적인 것만을 두고 봤을 때는 class가 더 포괄적이라는 사실을 알 수 있습니다.

 

 

다음 코드를 한번 살펴보겠습니다! 

 

[출처]부스트코스 자바스크립트의 시작

 

이렇게 id와 class가 겹쳐있을 경우 어떻게 될까요!? 

 

 

참고로 클래스 js는 빨강 , id first는 초록으로 되어있습니다 :) 

 

 

 

 

짠! 정답은 초록입니다! 

 

 

이유는 해당 코드가 겹치게 될 경우 id가 우선적으로 작동이 되기 때문입니다.

 

 

 

이렇게  만약 웹페이지를 만들 시에 각각 표시하고 싶은 반복 문구 같은 것들이 있다면 class를 통해 

 

 

 

예외적으로 하나만 강조하고 싶다. 즉 , 타기팅하여 강조하고 싶은 문구에는 id를 사용하면 되겠구나를 알 수 있습니다! 

 

 

위의 이야기에 더해서 만약 span 태그를 지정하고 id , class , span을 동시에 넣었을 때는 어떻게 적용이 될까요!? 

 

 

[출처]부스트코스 자바스크립트의 시작

이렇게 class에 js , id에 first , span을 각각 색을 지정후 밑에 보이는 코드 부분처럼

 

 

세 개를 각각 다 넣었을 때

 

짠! 

 

id부분이 실행됨을 알 수 있습니다. 

 

 

또한 id를 지웠을 경우엔!? 

 

 

그럼 마지막으로 클래스까지 지운다면??

 

이렇듯, 태그 < class < id 이순으로 진행되는구나를 확인할 수 있습니다 :) 

 

 

생각해보기

___________________________________________________

 

오늘의 생각해보기! 확인해보겠습니다  :) 

 

[출처]부스트코스 자바스크립트의 시작

 

해당 배웠던 내용 태그 < class < id 이순을 기억한다면 전혀 어려운 문제가 아녔습니다! 

 

 

어떤가요!? 여러분도 저와 같은 생각을 하셨으리라 믿고 있겠습니다 :) 

 

 

마치며

___________________________________________________

 

드디어 한강만 더하면 웹과 Javascript 부분이 종료됩니다... 

 

 

하나밖에 안 했는데 왜 이렇게 다사다난한 느낌이 들지... 하하하 

 

 

그래도 너무 재밌게 배우고 있기 때문에 배울 때는 시간 가는 줄 모르고 듣고 있습니다! :) 

 

 

다음 시간에는 웹과 Javascript의 마지막 제어할 태그 선택하기 부분에 대해 살펴보겠습니다! 

 

 

제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다! 

 

 

www.boostcourse.org/cs124

자바스크립트의 시작