끈기의 힘 : 뉴비에서 풀스텍으로

[인프런/생활코딩] 선택자(Selector)_선택자와 선언? id 선택자? 본문

프로그래밍 언어/CSS 공부

[인프런/생활코딩] 선택자(Selector)_선택자와 선언? id 선택자?

쓰리별 2021. 2. 25. 09:13

1. 선택자와 선언

새미콜론( ; )의 중요성

위의 사진처럼, 만약 표현하고 싶은 CSS 문법이 하나라면 끝마침 표시인 새미콜론(;)을 color:red 다음에
쓰지 않아도 되지만, 예를 들어, text-decoration:underline처럼 문법을 하나 더 추가하고 싶다면,
★ color:red 다음에 새미콜론이 꼭 와야 한다. 즉, 새미콜론은 '끝마침'을 표시해주는 역할을 하는 데,
그래서 color와 text-decoration을 구분해주는 역할을 하게 된다!! ★ (내 생각엔 하나만 쓰더라도 새미콜론을 쓰는 버릇을 들이면 될듯 싶다.)

 

※ color나 text-decoration 등의 선택자들을 찾고 싶으면
구글 이미지에 'css selector'라고 검색해보기.

출처 : c4learn.com / 강의 내용 캡처

즉, 위의 사진처럼 우리가 만든 코드에서 selector는 li가 되며, 선언에는 color와 text-decoration이 해당한다고 보믄 된다. color나 text-decoration를 property 즉, 속성이라 하고 그에 해당하는 red나 12px를 속성값이라 보면 된다.
그리고 콜론( : )은 속성값과 속성을 구분하는 아이! 새미콜론( ; )은 선언과 선언을 구분하는 아이!
(중요하진 않지만, 나중에 공부할 때 알아두면 좋을 것 같다고 말씀하심.)

 

2. 선택자의 종류

1) 방금 전, 우리가 활용한 li에 대한 것들 즉, 태그를 활용한 '태그 선택자'라고 한다.
2) '아이디 선택자' id
    <style>
      li{
        color:red;
        text-decoration:underline;
      }
    </style> ☆ 방금 전 강의, 이 상황에서 <li>CSS</li> 텍스트만 표현을 바꾸고 싶다면 어떻게 해야?

 

★ 이때, 활용할 수 있는 선택자가 바로 'id' 선택자이다!! 즉, 특정 구역에만 효과를 내고 싶을 경우 사용하는 
ex) <li id="select">CSS</li> 라는 것의 의미는 이 웹페이지에 있는 id 속성값이 "select"인 태그에 대해서 효과를 주고 싶다. 라는 의미

 

그런데, 아래 그림처럼 표현하면 적용되질 않는다!! 왜?

id값이 select인 애들을 표현하고 싶은 데 되지 않는 이유

★위의 그림처럼 style 태그에 select라고 해놓으면, 이 웹페이지에 있는 모든 select 태그에 대해 효과를 주겠다. 라는 의미 즉, 우리가 하고 싶은 것은 이 웹페이지에 있는 것들 중, id 값이 select인 애들에 대해서만 효과를 주고 싶다. 라는 것이니 의미가 다르기에 폰트 사이즈를 키울 수가 없다!! 그럼 우째?
select 앞에 샾( # )을 붙여주기만 하면 돼! ★

 

즉, 아래 그림처럼 해줘야 원래의 의미에 맞게 적용할 수 있게 된다.

정상적 형태

- <li id="select">CSS</li> 여기서 id="select" 모두 다 HTML 문법. select 또한, HTML의 속성값.
CSS의 사용설명서 : id라는 이름의 속성을 사용하고, 거기에 속성값을 주면 거기에 해당하는 태그를
CSS에서 사용할 때, 그 앞에 #을 써라. 라고 한다.

Comments