CSS 

Holy Grail Layout

https://www.youtube.com/watch?v=7neASrWEFEM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=9&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%

em 이라는 것은 부모의 폰트 사이즈에서 상대적으로 크기가 계산 되어 짐기본적으로 따로 지정하지 않으면, 브라우저에 저장된 폰트 사이즈는 html에 16px로 지정되어 있음parent에 8em이라는 것은 이 parent 부모 요소인 HTML의 16px의 8배가 곱해진

Block의 대표 Div - 한 줄에 한 개Inline의 대표 Span - 한 줄에 여러개display : block (div)display : inline-block(span, 우리가 지정한 width, height에 맞춰 상자 단위로 정렬)display : inli

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a transform-function data type.transfo

div는 문서를 작성하기 위해 있는 tag이므로 ❗️한 줄을 모두 차지❗️하는 block이다. width 값을 설정해서 줄이면 크기만 줄어들 뿐, 소유는 한 줄 전체를 모두 하고 있는 것, 이 때 가운데 정렬을 위해 margin:auto;를 쓸 수 있는데, ❗️ mar

한 줄을 모두 차지하고 있는, block 요소를 가지고 있는 div 태그 가운데 정렬하기 1탄에 이어..다시 한 번 간략하게 정리!div 가운데 정렬로 흔히 사용하는 margin: 0 auto 를 주고 싶다면, width와 height 값을 설정해야한다한 블럭이 양옆으

원래 우리가 지정하는 width값과 height값은 width+padding+border 그리고 height+padding+border 이렇게 각각을 포함한 값이다.따라서, 우리가 지정한 width와 height의 값을 받은 elements의 모습은 padding과 b

Center Vertically div centereing 하기와 겹치는 요소도 있지만, 따로 정리해보는 vertical center 1. Using padding top, bottom에 여유공간을 주어 수직으로 가운데 정렬할 수 있다. .center { pa

Chap 1. 연결 선택자 ​ 하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기 하위선택자는 부모 요소에 포함된 하위 요소 모두 스타일이 적용되는 것으로 자손 선택자라고도 한다. 즉. 자식 요소뿐만 아니라 손자,손자의 손자요소 등 모든 하위 요소까지 적용된