#3 LEARNING CSS
3.12 Fixed
- position fixed를 이용하면 스크롤해도 항상 제자리에 머무른다.
처음 만들어진 자리에 고정 되어있다. 하지만 top, left, right, bottom 중 하나만 수정해도 서로 다른 레이어에 위치하게되어 원래 위치가 무시된다.
positon fixed를 이용하면 가장 위에 위치하게 된다. (맨 앞)
3.13 Relative Absolute
- position: static (default) - 박스를 처음 위치한 곳에 두는 것
- position: fixed - 처음에 위치한 자리에서 화면의 스크롤에 상관없이 고정되는 것, top,bottom, left, right 속성을 줘서 고정된 위치 이동시킬 수 있음. 단 이동이 되면 가장 위의 새 레이어에 놓이게됨
- position : relative - 박스가 처음 위치한 곳을 기준으로 이동,
top,bottom, left, right 속성을 주면 첫 위치를 기준으로 이동됨- position : absolute - 가장 가까운 부모 엘리먼트에 position:relative를 추가한다면, 그 부모 기준으로 top,bottom,left,right이동하고/ 아닐시엔 body 기준으로 이동된다
3.14 Pseudo Selectors part One
- pseudo selector
좀더 세부적으로 엘리먼트를 선택해 주는 것!
(기존 방법 : 태그, id w/#, class w/.)
선택의 복잡한 과정을 pseudo selector로 가능함
ex>
div:first-child {
background-color: tomato;
}
/ pseudo selector /
div:last-child {
background-color: teal;
}
id나 class를 따로 만드는것보다 이렇게 지정하는게 훨씬 좋은 방법이다.
css에서만 선택을 하면 되니까! html코드를 고칠 필요가 없기 때문이다
n번째 태그 수정하기 nth-child(n) 올ㅋ
span:nth-child(2) {
background-color: teal;
}
span:nth-child(even) { //or odd ( 홀수 )
background-color: teal;
}
even은 짝수! 짝수번째를 모두 바꿀 수있다 오 so cool !
span:nth-child(5n + 1) {
background-color: silver;
}
n을 사용하면 매우 편하다
3.15 Combinators
- div span
: div 속 span을 의미합니다. span이 div의 direct children(직접 연결된 자식 요소)이 아니어도 작동합니다. (7:03부터 설명 나옵니다.)- div > span
: span이 div의 direct children임을 의미합니다. 이땐 direct children이 아니면 작동하지 않습니다.- div + span
: div와 동등한 위치에 있는 span을 의미합니다. 자식 요소도, 부모 요소도 아닌 것이죠. 예를 들면, 이 해당됩니다. 는 해당되지 않겠죠? 이때는 span이 div의 direct children이니까요.
★ '바로 옆'에 위치해야 합니다. 이는 다음 강의에서 등장하는 div ~ span과의 큰 차이점입니다.
3.16 Pseudo Selectors part Two
- "~"는 span이 p의 형제인데, 바로 뒤에 오지 않을 때 쓸 수 있다.
- Attribute selectors 특성 선택자
- 그냥 input과 required input이 있다면, input:required{}를 통해서, required input에만 속성을 적용시킬 수 있다.
- input{} 을 통해, [input 이름]에 해당하는 input 속성을 따로 줄 수 있다.
- 여기서, input[placeholder="First name"]은 First name에만 속성을 주지만, input[placeholder~="name"]은 name이 들어가는 모든 input에 속성을 부여할 수 있다.
- "~="은 name을 포함하고 있다는 의미가 되는 것이다.
- a[href$=".org"] → "$="는 ".org"로 끝나는 모든 anchor를 선택할 수 있다.
- attribute selectors를 이용하면, class를 지정할 필요 없이 CSS만으로 각각의 속성을 부여해줄 수 있다.
