[CSS]DAY7 -Pseudo Selectors

position: fixed: 화면의 크기가 변경돼도 고정된 포지션(초기에 있던 자리)을 유지한다. 

->스크롤을 해도 원래 자리가 중앙이라면 중앙에 계속 머무르게 됨 

※주의: top/left/right/bottom 이라는 property 중에 하나만 수정하면 완전 다른 레이어에 위치한다. 

-> 원래는 다른 요소와 같은 레이어에 존재하다가 예시로 top:5px라고 값을 줘서 수정하면 기존에 있던 요소를 

무시하고 그 위에 다른 레이어로 존재하게 된다는 소리이다. 이 때, fixed된 엘리먼트의 위치는 맨 위이다.

 

position: fixed 는 화면상에 꼭 고정돼있어야하는 요소(e.g. 상단 메뉴바)에 적용하면 좋은 속성이다.

 

position: relative; element가 처음 위치한 곳을 기준으로 수정하는 것이다.

-> 엘리먼트가 처음 놓인 자리에서 상하좌우로 움직인다. 

 

position: static(디폴트값); 레이아웃이 박스를 처음 위치하는 곳에 두는 것

 

position: absolute; relative랑 비슷하게 상하좌우로 움직일 수 있는데 특이점은 부모박스 기준이 아니라 body 태그의 

상하좌우로 간다는 점이다. absolute는 가장 가까운 relative의 부모를 기준으로 이동시키기 때문

body는 바깥쪽에 있는 가장 relative한 부모가 될 수 있음 

만약에 이렇게 하고 싶지 않다면, absolute의 부모인 태그 예시로 div태그라고 한다면 div태그를 

relative로 만들어주면 된다.

 

<과제할 때 헤맸던 속성>

flex-wrap: wrap; (기본값: nowrap)

-> 나열된 자식 요소들의 총 넓이가 부모 넓이보다 클 때, 다음줄에 이어서 나열해주는 기능

, 기본값은 nowrap 으로 정렬된 자식 요소들의 넓이는 부모 넓이에 맞춰 자동 축소됩니다(한줄에 넣기 위해서). 

전제조건: 부모 요소에 display:flex 

참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

display:flex 의 규칙 

flex 효과를 주고 싶은 요소의 부모요소에 기재하는 것이 룰입니다. 

즉, 자식요소는 그대로 두고 자식요소에 적용시킬 효과를 부모 요소에 기재하는 것이지요.

display:flex; 를 기재해야 justify-content, align-items, flex-wrap을 사용할 수 있습니다.