$$config title: ?margin과 padding, 가상(nth)선택자 keywords: - css - margin - padding - 가상선택자 - nth-child() - first-child - last-child $$ # 21-11-17,5일차 ## CSS ### margin과 padding margin - 박스의 바깥 쪽 여백 (margin의 기본값은 0) padding - 박스의 안 쪽 여백 - margin/padding - left/right = 좌,우 - margin/padding - top/bottom = 위 아래 - margin-left:0; = 왼쪽으로 정렬 - margin-rignt:0; = 오른쪽으로 정렬 - margin - (left, right) : auto; = 가운데 정렬 (놓아버린다=포기한다는 뜻) =>둘 다 놓으면 가운데 정렬 넓이 값이 정해져있을때 margin left,right 둘 중 하나는 포기 해야함 margin의 이해 =>왼쪽을 놓는다 = 오른쪽으로 이동(margin의 기본값은 0이기 때문) 오른쪽을 놓는다 = 왼쪽으로 이동 inline요소는 스스로 정렬하지 못하고 부모에 의해 수동으로 정렬된다 block요소는 마진을 이용해서 스스로 정렬이 가능하다. display:inline에는 width, height, padding, margin이 제대로 작동하지 않는다. (img, a, span 등) block 요소 정렬 - inline-block, inline : 부모의 text-align 속성에 의해 수동적으로 정렬됨. - block : margin을 이용하여 능동적으로 정렬함. - 우측 : margin-left:auto; - 가운데 : margin:0 auto; - 좌측 : margin-right:auto; ### 모든 보이는 엘리먼트의 부모는 body이고 그의 부모는 html이다. ``` 예) div의 부모 = body body의 부모 = html ``` ### 선택자 - nth-child - :first-child : 첫 번째 자식 엘리먼트 - :last-child : 마지막 자식 엘리먼트 - div:nth-child(1) : div이면서 첫 번째 자식 - div:nth-of-type(1) : div중에서 첫 번째 자식 - (2), (2n), (4n), (2n+1), (7n+1), (3n) 등 수식을 넣어 활용가능 - 참고 [https://thrillfighter.tistory.com/575](https://thrillfighter.tistory.com/575) [https://lalacode.tistory.com/6](https://lalacode.tistory.com/6) 피그마 https://www.figma.com/ 완성본 : 프레임선택> erport >저장 후, https://www.zpat.info/ 에 업로드 후 url 저장