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. 개발자
    style attribute> id selector > class selector > tag selector 순으로 먼저 적용됨. 가장 구체적이고 명시적인 것부터 먼저 적용됨.
  2. datsciseol
    20210116
  3. 주니어개발자
    인포그라피에 대한 내용은 아래 링크의 "명시도" 강의를 확인하세요!

    https://opentutorials.org......6/7
  4. 따뜻한츄르
    2020 12 30
  5. 201214
  6. Seunghyuk Rodrigo Kim
    감사합니다.
  7. milati
    감사합니다.
  8. switpotato
    20201122: 2차학습 완료하였습니다.
    확실히 2번째 다시 들으니 훨씬 이해가 잘되네요. 좋은 강의 감사합니다!!
  9. 만듀
    20201108
  10. 켄드릭
    2020년 11월 03일(화) 14:48 1차 수강완료
  11. Hyuk-Jin
    2020.10.27
  12. jaehyunlee
    완료
  13. 박병진
    2020.10.03 완료
  14. 콜라
    20200927완료
  15. 김성곤
    20200718 감사합니다!
  16. jaehyunlee
    완료
  17. 한강
    스타일 속성 > 아이디 선택자 > 클래스 선택자 > 태그 선택자
    폭포수 같네요. 감사합니다~~^^!
    200601
  18. #Cascading 세번째 영상
    https://www.youtube.com......Q3o

    #Cascading 세번째 영상 관련 링크
    https://stuffandnonsense.co.uk......tml
  19. 코딩
    완료
  20. 아래 댓글에 인포그라피 링크가 있네요
    https://stuffandnonsense.co.uk......tml
    CSS Specificity Wars라니ㅋㅋ
  21. 무지개반사
    완료
  22. Blanc
    2020.01.05
  23. Grigo
    Style attribute -> id selector -> class selector -> tag selector 우선적인(구체적인) 태그 순서
    우선순위가 낮아도 !important를 붙여주면 가장 우선적인 태그가 될 수 있음
  24. alpha
    191002 수강완료
  25. 치디우기
    수강완료
  26. 류석현
    수업완료
  27. FIRE
    20190729 완료
  28. 다나가
    190722 - 수업완료!!
  29. 김주엽
    수업완료
  30. 노혜주
    완료
  31. lygon
    2019-03-02 완료
  32. chak9@naver.com
  33. 숨이
    완료햇습니당
  34. 김민영
    완료
  35. boradcanser
    전 그래서 1.25배속으로 합니다!
    대화보기
    • 김수
      봐쪼용 ㅎㅎㅎㅎㅎ
    • 이런 무료 사이트를 공유해주셔서 당연히 존경스럽지만

      수업이 너무 장황하다...
    • 안녕하세요
      1년이 지났는데 아직도 인포그래픽 보강을 안해주셨네요. 확인 부탁드립니다.
    • SlowStarter
      감사합니다!
    • 스페이스몽키
      감사합니다!
    • leezigo
      안녕하세요~ 잘듣고 있습니다!
      다름이 아니고, 알려주신 인포그래픽 있다고 알려주신 (하단에) 링크가
      page not found라고 나와서 알려드리려고요! 언제나 강의 감사합니다:)
    • 윤승호
      실습 동영상 마지막부분이 잘린건가요? infographic 같이 보자고 하시고 내용이 끝나서요.
    • egoing
      나눔 바른펜 입니다~
      대화보기
      • 박동일
        영상 감사히 잘 보고 있습니다
        매번 여쭤보려했으나 깜빡해서 이제야 여쭤보네요
        볼 때마다 생각하는 것인데 영상의 이미지에서 사용하시는 글씨체가 무엇인지 궁금합니다
      • 푸른하늘
        10일차 공부 감사합니다
      • 이성준
        감따함다!!
      • 오빠는다르다
        감사합니다~!!!!!
      • MunBe
        <!--Cascading-->
        <!--캐스케이드는 폭포라는 의미가 있습니다. 처음 html이 등장했을 때는 CSS가 없었습니다. 웹의 사용자들은 곧 디자인을 요구하기 시작합니다. 웹의 고안자들은 html을 꾸며주는 언어의 필요성에 공감하기 시작합니다. 그렇게해서 등장한 것이 CSS입니다.

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

        즉 웹브라우저, 사용자, 컨텐츠 생산자의 조화를 중요한 철학으로 삼고 있다고 생각됩니다. 여기서는 하나의 엘리먼트에 대해서 다양한 효과가 영향력을 행사하려고 할 때 우선순위를 어떻게 설정하는가에 대한 규칙인 캐스캐이딩에 대해서 알아봅니다. -->
        <!--우선순위의 순서 : 웹브라우저 < 사용자 < 저자-->
        <!--CSS우선순위 순선 : 태그선택자 < class선택자 < id선택자 < style속성-->
        <!--CSS우선순위의 기준 : 가장 포괄적인 규칙, 일반적인것 < 구체적이면서 명시적인 규칙-->
        <!--"!important"라는 키워드를 넣으면 모든 것을 무시하고 우선순위가 가장 높아진다.-->
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        li{color: red;}
        #idsel{color: blue !important;}
        .classsel{color: green;}
        </style>
        </head>
        <body>
        <ul>
        <li>HTML</li>
        <li id="idsel" class="classsel" style="color: powderblue">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>
      • 카라멜팝콘
        열린 결말 ㅋㅋㅋㅋ
        대화보기
        • 강지후
          링크가 없네요...
          https://stuffandnonsense.co.uk......jpg
          여기로
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기