생활코딩

Coding Everybody

캐스케이딩

토픽 생활코딩 > 클라이언트 > CSS > CSS 수업

캐스케이드는 폭포라는 의미가 있습니다. 처음 html이 등장했을 때는 CSS가 없었습니다. 웹의 사용자들은 곧 디자인을 요구하기 시작합니다. 웹의 고안자들은 html을 꾸며주는 언어의 필요성에 공감하기 시작합니다. 그렇게해서 등장한 것이 CSS입니다. 

CSS는 Cascading Style Sheet의 약자입니다. Cascading은 CSS의 첫번째 글자로 등장할만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있습니다. Cascading을 사전에서 찾아보면 폭포라는 의미가 있습니다. 즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인  그리고 웹페이지 저자의 디자인이 결합될 수 있다는 점에 착안하고 있다고 할 수 있을 것 같습니다.

즉 웹브라우저, 사용자, 컨텐츠 생산자의 조화를 중요한 철학으로 삼고 있다고 생각됩니다. 여기서는 하나의 엘리먼트에 대해서 다양한 효과가 영향력을 행사하려고 할 때 우선순위를 어떻게 설정하는가에 대한 규칙인 캐스캐이딩에 대해서 알아봅니다. 

캐스케이딩이란?

 캐스케이딩 실습

예제 - cascading_1.html 

<!DOCTYPE html>
<html>
  <head>
    <style>
      li{color:red;}
      #idsel{color:blue;}
      #idsel{color:yellow;}
      .classsel{color:green;}
    </style>
  </head>
  <body>
    <ul>
      <li>html</li>
      <li id="idsel" class="classsel">css</li>
      <li>javascript</li>
    </ul>
    <ol>
      <li>style attribute</li>
      <li>id selector</li>
      <li>class selector</li>
      <li>tag selector</li>
    </ol>
  </body>
</html>

댓글

댓글 본문
  1. kdb5869
    24.04.26
  2. 다겸란
    수강완료
  3. 곤비
    0216
  4. 미래도비
    0207
  5. 새콤달콤
    완료
  6. DreamBoy
    2023.09.17. CSS - 조화 - 캐스케이딩 파트 완료했습니다.
  7. AgainstartJH
    2022년 11월 13일 일요일 학습완료!
  8. 헤밍웨이
    220823 CSS에도 사려깊은 사항들이 고안되었네요
  9. vigorously27
    2022년 7월 20일 화요일 학습완료!
  10. INJE
    22/03/16
  11. 초보자바
    22-02-14 완료
    !important > style attribute > id selector > class selector > tag selector
  12. 임앤강
    2022-01-27 감사합니다~~ ^^
  13. 드림보이
    2021.11.10. 캐스케이딩 파트 수강완료
  14. 황금아가리
    211003
  15. neal
    2021.09.21 완료
  16. 전예진
    21.07.28
  17. 두드
    2021.07.22 완료
  18. 감자먹는넘
    캐스케이딩
  19. jeisyoon
    2021.06.21 Cascading - OK
  20. 할수있다비전공자
    !important 우선순위 1
  21. 짜rr
    감사히 잘 보앗습니다.
  22. choi
    완료
  23. yogg
    id가 class보다 먼저 쓰이는구나 ㅎㅎ
  24. Minint
    2021.03.14
  25. yogg
    역시 기본이 중요하군요..
  26. HyeonHui Jeong
    20210219
  27. 임태경
    완료했어요 감사해요
  28. 스마일가이
    2021.01.26 완료 감사합니다
  29. 개발자
    style attribute> id selector > class selector > tag selector 순으로 먼저 적용됨. 가장 구체적이고 명시적인 것부터 먼저 적용됨.
  30. datsciseol
    20210116
  31. 주니어개발자
    인포그라피에 대한 내용은 아래 링크의 "명시도" 강의를 확인하세요!

    https://opentutorials.org......6/7
  32. 따뜻한츄르
    2020 12 30
  33. 201214
  34. Seunghyuk Rodrigo Kim
    감사합니다.
  35. milati
    감사합니다.
  36. switpotato
    20201122: 2차학습 완료하였습니다.
    확실히 2번째 다시 들으니 훨씬 이해가 잘되네요. 좋은 강의 감사합니다!!
  37. 만듀
    20201108
  38. 켄드릭
    2020년 11월 03일(화) 14:48 1차 수강완료
  39. Hyuk-Jin
    2020.10.27
  40. jaehyunlee
    완료
  41. 박병진
    2020.10.03 완료
  42. 콜라
    20200927완료
  43. 김성곤
    20200718 감사합니다!
  44. jaehyunlee
    완료
  45. 한강
    스타일 속성 > 아이디 선택자 > 클래스 선택자 > 태그 선택자
    폭포수 같네요. 감사합니다~~^^!
    200601
  46. 코딩
    완료
  47. laqah
    아래 댓글에 인포그라피 링크가 있네요
    https://stuffandnonsense.co.uk......tml
    CSS Specificity Wars라니ㅋㅋ
  48. 무지개반사
    완료
  49. Blanc
    2020.01.05
  50. Grigo
    Style attribute -> id selector -> class selector -> tag selector 우선적인(구체적인) 태그 순서
    우선순위가 낮아도 !important를 붙여주면 가장 우선적인 태그가 될 수 있음