본문 바로가기
WEB/HTML&CSS

[CSS] 기본셀렉터 완전 정리 ( 유투브 드림코딩 필기)

by 태태. 2023. 1. 4.
728x90

https://www.youtube.com/watch?v=gGebK7lWnCk 

CSS 셀렉터, 기초 이론 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript


CSS : Cascading Style Sheet

 cascade : 작은 폭포, 폭포처럼 떨어지는 물, 
(정보통신) 종속, 연속, 직렬

      ㄴ Cascading : 정의된, 세부적인 정의가 있다면 그것을 쓰고, 
         정의된 것이 없다면 다음으로 지정된 것을 사용하는 것을 의미한다.


 Style Sheet : 스타일을 잘 정리한 문서 한 장



<목차>
1. 의미, 정의
2. 선택자
3. 스타일링
4. 헷갈리는 컨셉
5. CSS의 꽃 : Flex box



<Cascading 3순위> 
웹사이트를 스타일링할 때 크게 3가지로 나누어서 꾸밀 수 있는데, 
1순위) Author Style : 우리가 작성하는 스타일 시트 
2순위) User Style : 사용자가 지정한 스타일 시트
3순위) Browser : 브라우저상에서 기본적으로 지정된 스타일

이 Cascading 의 연결고리를 끊어내는 한 가지 방법
!important  :  가능하면 사용하지 않는 것이 좋다.



<Selectors>
Universal :  *  : 모든 태그 선택
type :  Tag  : ex.div 라고 작성하면 div태그들 선택됨 ID :  #id  : ex.div 라고 작성하면 div태그들 선택됨 
Class :  .class  : ex. .클래스명
State :  ':'기호 사용     :  
Attribute :  []  : 해당하는 속성값만 선택해서 바꿀 수 있다.
  

 

728x90
반응형

댓글