일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- img 태그
- u 태그
- 의문
- 공부 기록용
- table
- ol 태그
- 프론트엔드 과정
- HTML escape
- strong 태그
- 네카라쿠배
- h1~h6 태그
- 패캠
- ATOM
- html 기본 태그
- li 태그
- 뭐임마
- 소프트웨어 장인
- p 태그
- 첫 시작
- form 텍스트입력
- br 태그
- form 입력양식
- form 문법
- 포기도 습관이 된다.
- 뭐
- 왜?
- ul 태그
- 네카라쿠배 팁
- 공부 기록용(비공개)
- 목록 태그
- Today
- Total
끈기의 힘 : 뉴비에서 풀스텍으로
[인프런/생활코딩] 선택자(Selector)_선택자와 선언? id 선택자? 본문
1. 선택자와 선언
위의 사진처럼, 만약 표현하고 싶은 CSS 문법이 하나라면 끝마침 표시인 새미콜론(;)을 color:red 다음에
쓰지 않아도 되지만, 예를 들어, text-decoration:underline처럼 문법을 하나 더 추가하고 싶다면,
★ color:red 다음에 새미콜론이 꼭 와야 한다. 즉, 새미콜론은 '끝마침'을 표시해주는 역할을 하는 데,
그래서 color와 text-decoration을 구분해주는 역할을 하게 된다!! ★ (내 생각엔 하나만 쓰더라도 새미콜론을 쓰는 버릇을 들이면 될듯 싶다.)
※ color나 text-decoration 등의 선택자들을 찾고 싶으면
구글 이미지에 'css selector'라고 검색해보기.
즉, 위의 사진처럼 우리가 만든 코드에서 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"인 태그에 대해서 효과를 주고 싶다. 라는 의미
그런데, 아래 그림처럼 표현하면 적용되질 않는다!! 왜?
★위의 그림처럼 style 태그에 select라고 해놓으면, 이 웹페이지에 있는 모든 select 태그에 대해 효과를 주겠다. 라는 의미 즉, 우리가 하고 싶은 것은 이 웹페이지에 있는 것들 중, id 값이 select인 애들에 대해서만 효과를 주고 싶다. 라는 것이니 의미가 다르기에 폰트 사이즈를 키울 수가 없다!! 그럼 우째?
select 앞에 샾( # )을 붙여주기만 하면 돼! ★
즉, 아래 그림처럼 해줘야 원래의 의미에 맞게 적용할 수 있게 된다.
- <li id="select">CSS</li> 여기서 id="select" 모두 다 HTML 문법. select 또한, HTML의 속성값.
CSS의 사용설명서 : id라는 이름의 속성을 사용하고, 거기에 속성값을 주면 거기에 해당하는 태그를
CSS에서 사용할 때, 그 앞에 #을 써라. 라고 한다.
'프로그래밍 언어 > CSS 공부' 카테고리의 다른 글
[인프런/생활코딩] 섹션4. 레이아웃 기본 (1) in-line VS block-level? box model? box-sizing? margin collapsing? (0) | 2021.02.26 |
---|---|
[인프런/생활코딩] 섹션3. 서체 다루기_font-size? color? text-align? font-family, font-weight, line-height, font-property, web font????? (0) | 2021.02.25 |
[인프런/생활코딩] 섹션2. 적용 순서_ 상속? 캐스케이딩? (0) | 2021.02.25 |
[인프런/생활코딩] 선택자 공부 팁? 가상 클래스 선택자? (0) | 2021.02.25 |
[인프런/생활코딩] CSS 기초부터 활용까지_CSS 오리엔테이션 (0) | 2021.02.24 |