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. neal
    2021.09.21 완료
  2. 전예진
    21.07.28
  3. 두드
    2021.07.22 완료
  4. 감자먹는넘
    캐스케이딩
  5. jeisyoon
    2021.06.21 Cascading - OK
  6. 할수있다비전공자
    !important 우선순위 1
  7. 감사히 잘 보앗습니다.
  8. 완료
  9. id가 class보다 먼저 쓰이는구나 ㅎㅎ
  10. Minint
    2021.03.14
  11. 역시 기본이 중요하군요..
  12. HyeonHui Jeong
    20210219
  13. 임태경
    완료했어요 감사해요
  14. 스마일가이
    2021.01.26 완료 감사합니다
  15. 개발자
    style attribute> id selector > class selector > tag selector 순으로 먼저 적용됨. 가장 구체적이고 명시적인 것부터 먼저 적용됨.
  16. datsciseol
    20210116
  17. 주니어개발자
    인포그라피에 대한 내용은 아래 링크의 "명시도" 강의를 확인하세요!

    https://opentutorials.org......6/7
  18. 따뜻한츄르
    2020 12 30
  19. 201214
  20. Seunghyuk Rodrigo Kim
    감사합니다.
  21. milati
    감사합니다.
  22. switpotato
    20201122: 2차학습 완료하였습니다.
    확실히 2번째 다시 들으니 훨씬 이해가 잘되네요. 좋은 강의 감사합니다!!
  23. 만듀
    20201108
  24. 켄드릭
    2020년 11월 03일(화) 14:48 1차 수강완료
  25. Hyuk-Jin
    2020.10.27
  26. jaehyunlee
    완료
  27. 박병진
    2020.10.03 완료
  28. 콜라
    20200927완료
  29. 김성곤
    20200718 감사합니다!
  30. jaehyunlee
    완료
  31. 한강
    스타일 속성 > 아이디 선택자 > 클래스 선택자 > 태그 선택자
    폭포수 같네요. 감사합니다~~^^!
    200601
  32. 코딩
    완료
  33. laqah
    아래 댓글에 인포그라피 링크가 있네요
    https://stuffandnonsense.co.uk......tml
    CSS Specificity Wars라니ㅋㅋ
  34. 무지개반사
    완료
  35. Blanc
    2020.01.05
  36. Grigo
    Style attribute -> id selector -> class selector -> tag selector 우선적인(구체적인) 태그 순서
    우선순위가 낮아도 !important를 붙여주면 가장 우선적인 태그가 될 수 있음
  37. alpha
    191002 수강완료
  38. 치디우기
    수강완료
  39. 류석현
    수업완료
  40. FIRE
    20190729 완료
  41. 다나가
    190722 - 수업완료!!
  42. 김주엽
    수업완료
  43. 노혜주
    완료
  44. lygon
    2019-03-02 완료
  45. 숨이
    완료햇습니당
  46. 김민영
    완료
  47. boradcanser
    전 그래서 1.25배속으로 합니다!
    대화보기
    • 김수
      봐쪼용 ㅎㅎㅎㅎㅎ
    • 이런 무료 사이트를 공유해주셔서 당연히 존경스럽지만

      수업이 너무 장황하다...
    • 안녕하세요
      1년이 지났는데 아직도 인포그래픽 보강을 안해주셨네요. 확인 부탁드립니다.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기