프론트엔드 로드맵 13 - CSS 기초 닦기

HTML이 페이지 상에 정보를 표현하는 문서라면 CSS (Cascading Style Sheets)는 HTML을 시각적으로 꾸미는 역할을 한다. CSS를 통해,

 - 정보(HTML)와 디자인(CSS)을 분리할 수 있게 됐다.

 - 정보를 수정하지 않고 디자인만 변경할 수 있다.

 - 검색엔진이 HTML를 해석 가능하도록 해서 더 많은 방문자들의 방문을 유도한다.

 - 시각장애인을 위한 스크린리더가 HTML을 해석할 수 있다.

 

CSS적용 방법에는 세가지가 있는데, 첫째는 인라인 스타일 inline style, 내부 인라인 시트 Internal style sheet, 외부 스타일 External style css.

CSS 스타일 적용 우선순위

1. 인라인 스타일 >> 2. 내부/외부 스타일 시트(HTML에서 head요소 내에 위치) >> 3. 웹 브라우저 기본 스타일

 

**반드시 기억해야하는 CSS 선택자

1. 전체선택자 *

*{margin:0;padding:0}

하지만 실전에서는 브라우저에 과부하 걸릴 수 있어 사용하지 말길 권한다.

 

2.  X+Y 인접선택자 : X 다음에 오는 첫번째 Y만 선택

div + p {color: red}

 

3. X>Y 직계 후손 선택자

 

4. X~Y 덜 엄격한 인접선택자 : X 다음에 오는 모든 Y들 선택

 

5. a[href*="naver"] : 주소창에 naver가 들어가는 모든 앵커 태그 선택

 

6. a[href^="http"] : 주소가 http로 시작하는 앵커 태그 선택  (^ : 시작 선택자)

https:// 로는 찾아지지 않음.

 

7. a[href$=".jpg"] : .jpg로 끝나는 url 앵커 태그 선택 ($ : 마지막 선택자)

 

8. X[data-*="foo"] : 태그에 data- 와 같은 커스텀 속성을 넣어 선택

a[data-filetype="image"]{color: red} <a href="#" data-filetype="image">Link here</a>

 

9. X[data-info~="image"] : 띄어쓰기 포함된 선택자 (~)

<a href="#" data-info="external image"> Link here </a>

 

10. X:not(Y) : 모든 X 요소 중 Y만 제외한 선택자

div:not(#container){color: blue}  - 아이디값 container만 제외한 모든 div 선택

 

11. 가상요소 :first-line과 :first-letter 그리고 :nth-last-child(n) / nth-last-of-type(n)

first-line은 첫째 줄, first-letter는 첫째 문자, 그리고 nth-last-child(n)는 끝에서부터 n번째를 선택한다.

리스트(li) 항목이 너무 많은 경우 끝에서부터 묶고 싶을 때 nth-last-child를 사용한다.

 

12. X:only-child / only-of-type

div p:only-child{color: red} <div>   <p> Hello my world </p> </div>

 

참고 사이트 : https://opentutorials.org/course/3327/2
http://tcpschool.com/css/css_intro_apply
https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048