[HTML&CSS] Position , Pseudo selectors - 1

 

 

 

[HTML&CSS] Position , Pseudo selectors - 1

( UPDATE  2023 - 05 - 26 )

 

 

 

---

Position

---

 

 

 

Position 의 디폴트는 static

 

 

 

 

position : fixed;

스크롤을 올리든 내리든 초기에 세팅한 그 위치에 고정됨.

상단 메뉴 바 등을 고정할 때 많이 씀. 

 

 

 

 

position : fixed; (주의점)

top, bottom, left, right 중 하나라도 수정하면,

별개의 레이어처럼 겹쳐질 때, fixed를 제일 상위로 하고 겹쳐짐

 

 

 

 

posititon : relative;

위치 조금 옮기고 싶을 때 사용.

처음 위치한 곳을 기준으로 상하좌우로 수정함. (부모 요소 무시X)

 

 

 

 

position : absolute;

상하 좌우를 이동 하고 싶을 때 사용함.

부모(상위) 요소 무시하고 이동하거나,

posititon : relative; 요소의 부모를 기준으로 이동.

 

 

 

---

pseudo selector

---

 

 

 

 

pseudo selector

세부적으로 요소들을 선택하게 하는 것

 

 

 

 

 

nth-child

nth-child

예시) :first-child , :last child, nth-child(2) 등

class나 id를 만드는 것보다 훨씬 좋은 방법

 

 

nth-child(even)

짝수 별로 적용

 

nth-child(odd)

홀수 별로 적용

 

 

 

nth-child(3n+1)

위와 같이 괄호 안에 '식' 조건 만들 수  있음

 

 

 

 

---

출처

---

 

 

노마드 코더 코코아톡 클론코딩