Styling Specific Objects

  • type selector 에 포커스
  • 스타일을 전체가 아니라 일부에만 적용하려면?
  • CSS에 옵션이 있다.

CSS Selectors

  • 일부 selector는 DOM을 따른다.
  • Descendant selectors (nav a)
    • nav 태그 안에 링크 전부 스타일
  • Child selectors (nav > a)
    • nav 의 child 를 적용
  • Adjacent sibling (hl + ol)
    • 서로 같은 레벨에 있는 것들

id Selectors

  • # id selector
    • DOM에서 single element를 식별할 때 사용
    • <div id = “header”>, <div id = “footer”>
    • CSS에서 id를 분리해서 사용하려는 움직임이 있다.
#mainLogo {
    border: 5px solid #0006CC;
    margin:0 auto;
}
<img src="logo.jpg" id="mainLogo" alt="logo"/>

class Selector

  • .class selector
    • item의 특별한 class의 부분으로 DOM에서 element를 식별할 때 사용
    • 하나의 특정 element가 아니라 element 범위로 적용
.thumb {
    border: 1px solid #0006CC;
    width: 20%;
}
<img src="cat.jpg" class"thumb" alt="Joe"/>
<img src="dog.jpg" class"thumb" alt="Bacon"/>
<img src="fish.jpg" class"thumb" alt="Tweety"/>

class vs id

  • 문법적으로 . 과 #
  • class는 여러번 사용할 수 있다.
  • id는 유일해야 한다.
  • 이미지와 네비게이션 바를 생각해보자
    • 수 많은 이미지가 같은 포멧
    • 현재 페이지를 시각적으로 나타냄

좁아지는 범위

  • 페이지가 점점 발전되면서 action의 범위를 좁히길 원함
    • 전체를 스타일 적용하는 것이 아니라 부분 부분 나눠서 적용
  • p.main -> main class에서 사용하는 paragraph
  • header img.special -> 특정 class를 사용하는 header 에 있는 papagraph

범위 확장

  • 콤마를 사용해서 element를 결합할 수 있다.
    • p, hl #main, .special { 전부 적용하는 rule }
  • 같은 selector에서 여러 rule을 적용하면 무슨일이 생길까?
    • 충돌나면 가장 최신 과정에 있는 것을 사용한다.
    • rule은 !important 가질 수 있다.

More Attribute Selectors

  • Universal
    • *은 페이지에 있는 모든 element에게 스타일 적용
  • Attribute Selectors
    • a[href=’info.html’]
  • Pseudo-Classes
  • Pseudo-Elements

Attribute selectors

  • attribute를 가진 특정 element를 DOM에서 찾길 원한다.
    • gif 파일을 사용하는 모든 image
    • alt 가 비어있는 image

Using Operators

  • Operator는 찾고 싶은 attribute 값을 찾을 때 사용
    • ^ : 시작을 매칭 – a [href^=’http://umich’]
    • $ : 끝을 매칭 – img[src$ = ‘.png’]
    • * : wildcard – a [href*=’umich’]

The Good News

  • class를 추가해서 다른것에서 코드를 사용할 수 있다.
  • class를 다시 써서 style sheet를 override할 수 있다.
    또는 최신 파일을 만들어서 재정의

Review

  • Type selector는 rule이 적용 되는 곳에서 범위를 좁혀서 결합할 수 있다.
  • id는 페이지에서 특정 element를 명시할 때 사용
  • class는 유사한 것들을 다루는 element에 사용

공부 위치 – https://www.coursera.org/learn/introcss/lecture/dXukm/02-04-advanced-selectors