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. 14번째
    5.19.
  3. 사이구
    다시 꼭 보러와야겠어요! 좋은 강의 감사해요.
  4. 공삼이육
    요기는 다시 보러 올게요~ 감사합니다
  5. php가 첫취업?
    기억해둬야겠네요
  6. programmer very GOSU
    인포그라피 강의는 언제 올라오나요?
  7. 문바이
    항상 감사하는 마음으로 동영상을 보고 있습니다.

    이 부분이 왜? 인포그래픽(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 자세히 보기