CSS study with 종찬님
22.04.25 day 1
1. margin-auto
-
top, bottom, right, left 와 함꼐 사용하기
right : 0 , left : 0을 하면 요소가 차지하는 공간이 좌우로 쭉 늘어난다.bottom : 0 , top : 0역시 위 아래로 쭉 늘어난다.- 네가지를 전부 해주면 요소가 부모요소 전체를 차지하게 되는데, 여기서
margin : auto를 주게되면 가운데 정렬이 된다.
-
flex와 함꼐 사용하기
- flex로 가운데 정렬 한 상태에서
margin-top : auto , margin-bottom : auto을 주게 되면 사용 가능한 공간이 해당 요소에게 할당되어진다.
- flex로 가운데 정렬 한 상태에서
2. nagative-margins
왼쪽의 피카츄 이미지에 margin : -200px을 주었더니 부모요소를 뚫고 올라가 입체적으로 표현되었다.
이렇게 네거티브 마진은 원래 부모요소를 벗어나고 싶을 경우 -를 사용하여 표현가능하다.
부모요소에
overflow : hidden속성을 사용하면, 부모를 벗어난 부분은 잘려나간다.
3. position
- absolute(보통 자식에게 준다)와 relative(부모)를 사용하여 요소의 위치를 조정할 수 있다.
- 꼭 absolute - relative 관계가 아니어도 가능하다 (ex absolute-absolute)
- 연결할 요소가 없으면 뷰포트가 기준이 된다.
과제
배운점
스터디에서 배운내용을 바로 적용시킬 수 있는 페이지라서 복습하는데 많은 도움이 됐다.
- 가상요소에
position,top, bottom, left, right : 0+margin-auto사용하여 가운데 타임라인 줄에 활용하기! - 가상요소 한번에 두개는 사용 불가능하다..!!
- 가상요소에 nth-child를 사용하고 싶을땐 nth-child먼저 적고 가상요소 적으면 가능하다.
- 특히 리스트의 블랙부분을 flex + margin-top-auto 사용하여 깔끔하게 딱 구현됐을때 너무 행복했다!!!!
페이지 링크
FE DEVELOPER 👩🏻💻🤍