WEB2 - CSS 핵심 정리 (by.생활코딩)

CSS 의 등장 -> 

1. html 의 코드에서 스타일과 관련된 코드를 모두 뺏어오고, 정보에 대한 코드만 남도록 만든다.

2. 기존의 코드 중복을 줄여준다.

 

style의 속성을 썼으면, 그 속성의 값을 웹브라우저는 css의 문법에 따라서 해석해서 그 css의 문법에 따라 해석된 결과를 style 속성이 위치하고 있는 이 태그에 적용할 것이다.

 

css의 큰 틀을 이해함으로써 모르는 것을 검색할 수 있게 됨

 

class 선택자  vs  id선택자
만약 같은 선택자라고 하면, 최근에 적은 선택자의 우선순위가 더 높음 (코드에서 뒤쪽이 최근)
class 는 style에서 . 을 앞에 붙인다. 우선순위가 태그 선택자 보다 높다.
id 는 style에서 #을 앞에 붙인다. 우선순위가 class 선택자 보다 높다.

 

id는 유일무이해야한다.

 

선택자 설명 링크 ->  https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

 

   1. block level element 한 줄을 다 차지하는 태그
   2. inline elenment 자신의 부피만 차지하는 태그 (a태그처럼)
   3. none 사라짐

  위 세 가지를 display 속성으로 설정 가능

 

 

크롬의 개발자 도구 (F12 혹은 우클릭-검사) 를 잘 활용하자!!!!!!!!!!

 

 

 

css 의 그리드 ->  https://studiomeal.com/archives/533