이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 구글 크롬 테마 변경하기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 상속 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게
gogogameboy.tistory.com
지난 포스트의 생활코딩 강의 영상에서 '캐스케이딩' 이라는 단어가 잠깐 등장했는데요, 이번에는 그 캐스케이딩을 공부해보도록 하겠습니다.
cascading
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
우선 순위는 위의 소스 코드에 적어놓은 대로입니다.
스타일 속성 style attribute이 가장 우선시되고, 그다음이 ID 선택자, 그다음이 클래스 선택자, 마지막이 태그 선택자입니다.
포괄적인 것의 우선 순위가 가장 뒤로 밀려나고 점점 구체적인 것이 우선시됩니다.
즉, 가장 구체적이고 명시적인 것은 style입니다.
하지만 만약 가장 우선 순위에서 밀려나 있는 <li> 태그의 스타일에 li{color:red !important;} 라고 입력하면 li가 가장 우선시됩니다.
다음 포스트
CSS, inline과 block
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 선택자 우선 순위 (캐스케이딩) 이 포스팅은 PC로 작성되었습니다.
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 박스 사이징 (0) | 2021.01.01 |
|---|---|
| CSS 박스 모델 (padding, margin) (0) | 2021.01.01 |
| CSS, inline과 block (0) | 2020.12.31 |
| CSS 구글 크롬 테마 변경하기 (0) | 2020.12.30 |
| CSS 상속 (0) | 2020.12.30 |
댓글