무계획성인 나는 블로깅주제 선정이 어려워서 마법의 소라고동님한테 물어봤다.. ㅎㅎ Grid는 두 방향(가로-세로) 2차원 레이아웃 시스템이다 하나의 그리드은 대게 columns, rows로 구성되며, 각 행과 열 사이에 공백이 있는데, 대게는 이를 일컬어 gutters라고 부른다 속성 의미 display 그리드 컨테이너(Container)를 정의 grid-template-rows 명시적 행(Track)의 크기를 정의 grid-template-columns 명시적 열(Track)의 크기를 정의 grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성 grid-template grid-template-xxx의 단축 속성 row-gap(grid-row-gap) 행과 행 사이의 간격(Lin..

하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다 부모 요소인 Flex Container(플렉스 컨테이너)와 자식 요소인Flex Item(플렉스 아이템)으로 구성되어 있다 컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치 되어진다 flexbox를 사용하기 위해서 HTML 부모 요소의 display 속성에 flex를 지정한다. 1. Flex 컨테이너에 적용하는 속성 display: flex; Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼 차지한다. 마치 inline 요소들처럼. height는 컨테이너의 높이만큼 늘어난다. height가 알아서 늘어나..

박스 모델은 테두리(border)와 내용(content) 그리고 안쪽 여백(padding)과 바깥쪽 여백(margin)의 네 가지 요소로 구성됩니다. 각 요소는 상, 하, 좌, 우 네 영역을 개별적으로 설정할 수 있다 . Contents box - 콘텐츠 영역으로 텍스트 및 이미지의 실제 영역 Padding box - 테투리와 콘텐츠 사이의 안쪽 여백. :각각의 값은 top, right, bottom, left로 시계방향입니다. p { border: 10px 20px 30px 40px;}​​ Border box - 박스를 둘러싼 테투리 영역. :테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용한다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확..

절대 길이 단위 다음은 모두 절대 길이 단위이며 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주하며 보통 사용하는 단위는 px (픽셀) 입니다. px : 글꼴의 크기를 고정하는 단위, 작은 글씨글 보기 힘든 사용자가 브라우저의 기본 글꼴의 크기를 더 크게 설정하더라도 초기값으로 고정된다. 상대 길이 단위 상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있다 % : 상대적으로 부모요소의 사이즈에 영향을 받아 크기가 조절된다. em : em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말한다 =>폰트사이..