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. 이성준
    감따함다!!
  2. 오빠는다르다
    감사합니다~!!!!!
  3. <!--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>
  4. 카라멜팝콘
    열린 결말 ㅋㅋㅋㅋ
    대화보기
    • 강지후
      링크가 없네요...
      https://stuffandnonsense.co.uk......jpg
      여기로
    • li{color:red !important;} 를 ul{color:red !important;} 로 바꾸게 되면 powderblue색으로 나타나는데
      상속 부분은 !important를 사용해도 우선순위에서 밀려나게 되는건가요?
    • publicum
      두번째로 보고 있는데, 링크해주신 인포그래픽의 스타워즈 비유는 정말 대단히 직관적이고 위트가 넘치는것 같습니다 ㅎㅎ Sith power라니 ㅋㅋ
    • 세븐나이츠
      강의내용 잘 들었습니다~
    • cascading style sheet css
      우선순위와 질서는 정하는 것이 필요하다.

      웹브라우저/사용자/저자
      언젠가는 사용자가 원하는대로 볼수있지않을까~?

      style 속성 > Id 셀렉터 > class 셀렉터 > 태그셀렉터
      li포괄적, 그다음 클래스, 더 정교한 선택자는 id 선택자...그리고 스타일이라는 속성이 좀더 태그와 더 가깝다.더 구체적이고 명시적.
    • 쿠쿠다스
      감사합니당
    • 14번째
      5.19.
    • 사이구
      다시 꼭 보러와야겠어요! 좋은 강의 감사해요.
    • 공삼이육
      요기는 다시 보러 올게요~ 감사합니다
    • php가 첫취업?
      기억해둬야겠네요
    • programmer very GOSU
      인포그라피 강의는 언제 올라오나요?
    • 문바이
      항상 감사하는 마음으로 동영상을 보고 있습니다.

      이 부분이 왜? 인포그래픽(infographic)과 관련이 있는지는 잘 모르겠습니다.
      https://stuffandnonsense.co.uk......tml

      링크된 부분의 내용에는
      A selector's specificity is calculated as follows:
      count the number of ID attributes in the selector (= a)
      count the number of other attributes and pseudo-classes in the selector (= b)
      count the number of element names in the selector (= c)
      ignore pseudo-elements.
      Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

      1) [id선택자]의 수량을 a
      2) 동일 선택자 내의 [다른 속성] 과 [임시class]의 수량을 b
      3) 동일 선택자 내의 [tag]이름을 c
      [임시요소]는 무시
      abc를 연달아 놓으면 이것이 그 특성을 주어 우선순위를 결정해 준다.
      이런 내용인것 같은데. 아마도 앞선 동영상의 [selector]우선 순위에 대한 추가 내용으로 보여 집니다.

      infographics 와 관련해서는.
      집게된data를 정보로서 쉽게 표현해주기 위한 기술인것 같습니다.
      https://designmodo.com......cs/

      보충 강의를 기대하도록 하겠습니다.
      (Web이라는 것은 해본적이 없는 1인이 무식하게 몇글자 남겨봅니다.)
      감사합니다.
      대화보기
      • egoing
        어찌된 일인지 제가 인포그라픽 강의를 안했네요.
        인포그래픽은 아래 링크에 있습니다.
        https://stuffandnonsense.co.uk......tml

        곧 강의도 보강할께요~
      • ㅇㅇ
        열린 결말인가요... 인포그래피 보고싶어요..
      • 임지호
        CSS : Cascading Style Sheet의 약자. Cascading이 css에서 핵심 개념에 해당
        Cascading : 웹브라우저,사용자,저자간의 조화를 이루는 것이 핵심(그러려면 우선순위가 필요)
        - 저자 > 사용자 > 웹브라우저
        - 스타일속성 > id선택자 > 클래스선택자 > 태그선택자 => 이 방식이 작업에 있어서 효율적이다./태그 선택자로
        갈수록 포괄적, 반대로 갈수록 구체적
        *!important를 기술하면 그 어떤 선택자보다도 우선순위가 가장 높아진다.
      • 폭스킴
        !important ?infography
      • Kijin Roh
        흠 인포그라피때문에 검색까지 할줄이야.. 근데 내용이 잘린건가요.. 아님 일부러 자르신건가 ㅋ
      • GunLoc
        저도 뒤에가 궁금....
      • 인포그라피
        ㅠㅠ
        인포그라피로 밀당을 하실줄이야 ㅠ
      • 뒤에 여운이 남네요 '-ㅠ
        되게 좋아하고 존경하는 인포그라피가 뭘까용><
      • 박상민
        인포그라피^^
      • hokororo
        인포그라피............
      • 김현식
        인포그라피는...어디있는 걸까요..
      • W.Machine
        저도 궁금해요!~!!!
      • doleseobang
        저도 어떤 인포그라피인지 궁금하네요~~
      • 위즈니
        마지막에 같이 보자는 인포그라피는 어디 있나요?
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기