CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

캐스케이딩

캐스케이딩 (cascading)

  • 엘리먼트는 다양한 CSS 선언의 영향을 받는다. 이 때 충돌을 피하기 위해서 우선순위를 정하는데 이를 캐스케이딩이라고 함.
  • 캐스케이딩에는 다음과 같이 세가지 규칙이 있음.
    • 중요도  - css가 어디에 선언 되었는지에 따라서 우선순위가 달라짐
    • 명시도  - 대상을 명확하게 특정할수록 명시도가 높아지면서 우선순위가 높아짐
    • 소스순서 - css 선언을 나중에 할수록 우선순위가 높아짐

중요도

css는 다양한 위치에서 기술될수 있는데, 그 위치에 따라서 우선순위가 달라진다. css가 기술될 수 있는 위치는 아래와 같고, 우선순위는 아래로 내려갈수록 높다. (저작자 CSS의 !important가 제일 높음)

  1. 브라우저의 CSS
  2. 사용자 CSS 일반선언
  3. 저작자 CSS 일반선언
  4. 저작자 CSS의 !important

example1.html - 중요도에 따라서 엘리먼트에 적용되는 CSS 효과가 달라진다. (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<style type="text/css">
		h1 {
			color: red
		}
		h1 {
			color: purple !important
		}
	</style>
	<body>
		<h1>title</h1>
	</body>
</html>

명시도

css선언이 엘리먼트를 상세하게 특정할수록 우선순위가 높아진다. 대상을 지정하는 방법은 아래와 같고 아래로 내려갈수록 우선순위가 높다. (style을 이용하는 것이 제일 높음)

  1. type
  2. class
  3. id
  4. inline으로 엘리먼트에 직접 css를 기술

아래는 css 선택자에 따른 우선순위 규칙.(출처)

example2.html - <div>example</div>의 color 값에 여러개의 css선언이 영향을 주고 있음. 아래로 갈수록 우선순위가 높아짐.  (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			div {
				color: purple
			}
			.examples {
				color: blue;
			}
			#example {
				color: red;
			}
			#example.examples {
				color: green;
			}
		</style>
	</head>
	<body>
		<div id="example" class="examples">
			example
		</div>
	</body>
</html>

소스순서

example3.html - 소스 상에서 css 선언이 나중에 나올수록 우선순위가 높아짐  (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style type="text/css">
			#example.examples {
				color: red;
			}
			#example.examples {
				color: green;
			}
		</style>
	</head>
	<body>
		<div id="example" class="examples">
			example
		</div>
	</body>
</html>

댓글

댓글 본문
  1. 주니어개발자
    와 이곳은 정말 오픈튜토리얼스의 진정한 역사를 느낄 수 있는 페이지네요 ~
  2. ㅋㅋ
    목소리도 좋고 강의도잘하시고 내용도좋네요 짱짱
  3. 이재원
    일전에 한 번 보고 최근 다시 한 번 정주행 하고 있습니다. 다시 봐도 좋은 강의네요.^^

    스타워즈 그림 정말 재밌네요. ㅎㅎ 중요한 건 아니지만 그냥 한 가지 지나가는 이야기를 하자면

    아마 id선택자 그림은 제다이가 아니라 Sith 군주일 겁니다. 나쁜놈 끝판왕이죠.ㅎㅎ

    계속 정주행 하겠습니다.^^
  4. hyuna
    감사합니다
  5. 감사합니다
  6. yihsang
    감사합니다.
  7. Rhys Jung
    그래서 CSS 내에서는 class 와 id 로 그룹핑을 진행하는건지요?
    해결되지는 않았는데 앞선강의에서도 많은분들이 궁금해했던부분
    div 타입을 유독 많이 쓰는것과 class와 id 로 대상을 구체화하는 방법등이
    연관되어 있다 이해하면 되겠군요 캐스케이딩의 문제로
    class 와 id 를 포함관계로 생각하고 접근하는게 맞는것 같군요
  8. mila0113@gmail.com
    굉장히 중요한 내용이군요!
  9. 짜짜짜2
    정말 좋은 비유에요! 재밌게 배우네요!
  10. 스타워즈는 신의한수였습니다...
  11. 류류
    스타워즈 비유는 정말 엄청났습니다...
  12. JustStudy
    고맙습니다
  13. WayneKing
    분명 책으로 봤던 내용인데, 잠만 오고 이해 안 됬었는 데. 역시 생코!!!! 이고잉님 감사합니다.
  14. basicb
    #example.examples 이 부분을 순서를 바꿔 .examples#example 이렇게 해도 작동이 되던데 일반적으로는 큰 포함 단위를 먼저 작성하나요? 즉, 클래스를 id보다 먼저 쓰나요?
  15. 김상진
    감사합니다!
  16. 김시은
    감사합니다.^^
  17. 통조림
    스타워즈 덕분에 이해 잘돼요 ㅋ 좋은 강의 감사합니다
  18. YellowBall
    감사합니다!
  19. egoing
    언어를 먼저 보셔야 합니다!
    대화보기
    • YellowBall
      잘 들었습니다.
      다음에는 자바스크립트를 보고 싶은데 언어에 자바스크립트와 클라이언트의 자바스크립트에 웹브라우저 자바스크립트를 봐야 하나요?
    • 이미
      css 강좌 2일에 나눠서 다 들었어요!
      설명이 명확하시고, 개념들에 대한 예제를 직접 코드로 , 그리고 반영된 결과화면으로
      바로바로 보여주셔서 이해하기 쉬웠습니다 ~
      감사합니다!
      자바스크립트 들으러가야겠어요 ㅎ
    • css 끝!
    • pagehome
      스타워즈의 비유가 백미입니다 ..

      포스가 함께 하길 !!
    • 감사합니다
    • 임영희
      올해부터 정신차리고 코딩에 관해 공부하려고 이리저리 알아보다가 우연히 발견했는데
      너무너무 좋네요! html~css까지 강의 잘 들었습니다!
      물론 아직은 계속 헷갈리고 외워지지가 않지만 직접 해보고 또 해봐야 조금씩 이해가 가겠죠...?
      아무튼, 재밌게 강의 잘 들었습니다. 수시로 올께요! :)
    • 스마트
      좋은 강의 잘 들었습니다
      감사 합니다.
    • 김지훈
      감사합니다.
      알찬 내용 너무 쉽게 전달해주셔서 잘 보았습니다.
      그냥 무시하고 지나쳤던 CSS 들이 무슨 의미인지 알게 되서 너무 좋았습니다.
    • 코난도일
      네, 현재 파이어폭스와 크롬, IE11에서 확인했는데 전부 같은 증상입니다.
      뭐, 명예의 전당에만 제대로 올라가면 큰 문제는 아니니 천천히 수정하셔도 될 것 같네요. :)
      대화보기
      • egoing
        그게 디자인적으로 한칸씩 밀리는 현상이 있었는데요. 이에 대한 패치를 했었는데 지금도 이런 현상이 일어나고 있나요..
        대화보기
        • 코난도일
          아, 네. 명예의 전당에 올라간 것은 봤습니다.

          그런데 "봤어요"를 누르면 공동공부 표에 해당항목에 파란색 원이 표시가 되는데
          마지막 캐스케이딩 항목만 "봤어요"를 눌러도 파란색 원이 표시가 안 됩니다.

          CSS 수업 외에 다른 몇몇 수업도 비슷한 증상이 있습니다.
          (어떤 과목이었는지 당장은 기억이 안 나네요. 원하시면 찾아드리겠습니다.^^)

          전 제 컴이 문제인줄 알았는데 다른 분도 그러신 것 보면 그건 아닌 것 같네요.^^
          대화보기
          • egoing
            혹시 명예의 전당에 올라가서 안보이는 것 아닐까요? 지금 명예의 전당에 올라가셨습니다.
            대화보기
            • 코난도일
              저도 마지막 캐스케이딩 수업을 '봤어요' 눌러도 안 본 걸로 표시되네요.^^;
            • 샤핀
              과목 수강을 다한 공동공부 누르고 스크롤 맨 아래로 내려보면 한강좌를 안 본 것처럼 나옵니다.
              그래서 강좌를 다 보지 않았나 하고 착각하게 됬었네요.

              명예의 전당은 아래쪽에 표시가 되는 거였는데, 제가 아래쪽으로 내리지 않아서 확인이 안됬던 거였네요. ^^;
              대화보기
              • egoing
                음 지금은 명예에 전당에 올라가신 것 같은데요. 어떤 문제가 있는지 자세히 알려주실 수 있을까요?
                대화보기
                • 샤핀
                  음... 강의 외적인 문제 인데, 공동 공부로 html도 전과목 수강했고,
                  css도 방금 전부 봤어요를 눌렀는데도... 한개씩 수강 안한 걸로 되서 명예의 전당에 등록이 안됩니다.

                  혹시나 해서 전부다 봤어요 취소하고... 다시 하나씩 새로 봤어요를 눌렀는데도... 동일하네요.

                  버그가 약간 있는 거 같습니다 ㅠ.ㅡ
                • 지그프리드
                  캐스케이딩 한줄 마스터(이해)법.
                  직접적이고 세부(상세)적일수록 즉, 범위가 좁을 수록 우선 순위가 높다.

                  역으로 생각하면 이 원리는 가까운데서 수정한 것이 막히는 것을 방지하는 것이다.
                  이것은 세부 설정이 더 큰 범위의 설정에 의해서 차단되면 안되기 때문에 당연한 수순입니다.
                  이것을 이해하면 너무 나도 당연한 것이기 때문에 특별히 순서를 외울 필요조차 없게됩니다.

                  비단 CSS에서만 그런 것이 아니라 특별히(예외로) 세부 설정을 막는 의도가 아닌이상
                  모든 프로그램의 당연한 수순입니다.
                • 박태우
                  감사합니다. 좋은강의 잘 들었습니다 :)

                  덕분에 CSS의 기초를 닦을 수 있었습니다.
                • leeta
                  질문입니다. 예제2번에서 css부분(110) #example.examples 여기 부분 말입니다. 이렇게 두 선택자에 주는 효과 배울때 예를들어 h1 div{ 이렇게 줄때요 ,를 써야 지만 적용이 되던데 저부분에서는 ,가 없어도 적용이 되더라구요 이거랑 이거랑은 전혀 딴판문제 인가요^^?제가좀 궁금한게 많네요 ㅠㅠ
                • egoing
                  흐흐 고맙습니다 :)
                  대화보기
                  • Boterati
                    시스로드라고도 불리죠
                    대화보기
                    • Boterati
                      CSS 수업 너무 잘 들었습니다! 태어나서 이렇게 공부를 재밌게 해보긴 처음입니다.
                      다음에 이어질 Bootstrap과 JavaScript 강의도 정말 기대됩니다!

                      한 가지, 위의 스타워즈 이미지에서 id 셀렉터로 표현된 이미지는 제다이가 아니고,
                      시스를 이끄는 어둠 세력의 군주, '다스 시디어스'입니다^^
                    • GNyon
                      수업 잘듣고있습니다 이제 자바스크립트로 넘어가네요~~
                    • 별모모
                      [ !important "갑" ] 명시도는 중요도에서 우선순위가 가장 높은 "저작자의 CSS 일반선언"입니다. 때문에, "!important"는 저작자의 CSS일반선언 중에서도 (inline 선언 보다도) 가장 우선순위가 높습니다.
                      대화보기
                      • 궁금합니다.
                        중요도, 명시도 둘중 어느것이 더 높은 우선도인가요?
                        예를들어 class가 title, id가 name인 h1이 있다면,
                        .title { color:red !important } 와 #name { color:blue } 라면 어느색이 적용되나요?
                        명시도를 생각했을땐 id속성의 blue가 나와야하는데...
                        중요도가 우선인가요 명시도가 우선인가요?
                        직접 해보니 중요도의 red로 우선시되어 나오는데 맞는건가요?
                      • egoing
                        저도 감사합니다!
                        대화보기
                        • 빈누
                          CSS 에 대해서 마구잡이로 알고 있던 것들이 제대로 정리되는 유용한 수업이었습니다. 감사합니다. ^-^
                        • 워니요
                          수업 너무 잘 들었습니다. 감사합니다.
                        • 5월의 신록
                          수업 너무 잘 들었습니다. 고맙습니다!!
                        • egoing
                          과제물도 고려해볼께요! :)
                          대화보기
                          • MisticStar
                            CSS 수업 너무나 잘 봤습니다. 하루하루 꾸준히 하다보니 어느새 웹서비스만들기, HTML수업, CSS수업까지 쭉 다 듣게 되었네요. 아직 한 번 뿐이 듣지 않아서 명확하지는 않지만, 전체적인 그림이 잡히고 중요한 핵심이 이해가 되어간 느낌입니다.
                            지금껏 공부하면서 가장 아쉬웠던 부분이 프로그래밍 분야를 처음 접하는 저로써는 과제물 같은 것이 있으면 좋겠다는 생각이었습니다. 챕터별이라던지 아니면 카테고리별로 자신이 적용해보고 생각해보고 찾아보며 실제로 만들어볼 수 있는 과제같은 것이 있다면 너무나 좋겠다는 생각입니다.
                            아직 아무것도 모르기에 찾아보려해도 잘 찾아지지 않고, 제가 스스로 기획과 구상을 해보고 만들어보려해도 아직은 막막한 것이 사실이기에 가능하다면 고려해주시면 감사하겠습니다!
                            내일은 작심삼일 Live CSS편 듣고 다음 클라이언트 수업으로 넘어갑니다~! 감사합니다~!
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기