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
Leave A Comment