[TIL] 210719 오늘 공부는 box-model과 flex-model

CSS 관련해서 정의나 개념을 공부해 본 적은 없었다. 클론코딩할때 아이템들을 가로로 배열하고 싶을때 display: flex 쓰고, 수평정렬하려고 align-items: center, jusitify-content: center 만 썼던것이 다였다.

 

Box model

 

모든 HTML 요소는 박스모양으로 구성되며, 이것을 박스모델이라고 한다. 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. 

✨padding, border, margin, content로 구성 되어있다. 

 

• content: 박스의 실질적인 부분, 색상을 가질 수 있고, width, height 속성을 가진다. 
• padding: border 안쪽에 위치하는 영역으로, 내용과 border 사이의 간격이다. 눈에 보이지 않는다.
• margin: border 바깥쪽에 위치하는 영역으로, 테두리와 이웃하는 요소 사이의 간격. 눈에 보이지 않는다.
• border: 내용과 패딩 주변을 감싸는 테두리다. 테두리 두께를 가진다.

 

 - width와 height 프로퍼티는 요소의 너비와 높이를 지정하기 위해 사용된다. 이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 한다. box-sizing 프로퍼티에 기본값인 content-box가 적용되었기 때문이다. box-sizing 프로퍼티에 border-box를 적용하면 컨텐츠 영역, padding, border가 포함된 영역을 width, height 프로퍼티의 대상으로 지정할 수 있다. 

 - margin/padding은 -top, -right, -bottom, -left 4방향의 프로퍼티를 가지고 있고, 1개의 프로퍼티만으로 4방향의 프로퍼티를 한번에 정할 수 있다. 

 

Flex-box

 Flexbox란 기존 컨텐츠를 수평으로 배치할 때, float나 inline-block으로 마크업할때의 불편함을 쉽게 해결할 수 있도록 추가된 기능이다. 다양한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜줌으로써 반응형 웹 사이트에 유용하게 쓰인다.

 

✨Flex의 구성

 - Flex Container: 전체적인 정렬과 관련된 상위 부모 요소. flex item들을 감싸서 컨테이너 역할을 하는 DOM 엘리먼트이다. display, flex-directoin, align-items 등의 속성이 선언 가능하다.

 - Flex Item: Flex Container의 자식요소(하위요소)이다 하위 DOM 엘리먼트이다. flex-grow, flex-shrink 같은 크기나 순서 같은 속성을 정의한다. 

 

✨Flex의 축

 - main axis와 cross axis 두 개의 축이 있다. flex-item의 방향은 main axis의 방향에 따라 정렬된다. 축의 방향은 flex-direction의 속성을 이용해 결정한다. flex-direction의 값이 row일 경우 main axis는 가로(왼쪽->오른쪽), cross aixs는 (위->아래)이다.
flex-item은 한 줄로 정렬되고, 첫번째 요소는 가장 왼쪽에 위치한다. 

flex-direction의 값이 column일 경우 main axis는 (위->아래) 세로이고, cross axis는 (왼쪽->오른쪽)이다. flex-item은 한줄에 한개의 요소만 존재하고, 블럭형태로 쌓인다. 첫번째 요소는 맨 위에 위치한다. 

 

✨Flexbox의 주요 속성

 - 가장 많이 사용했던 3가지 속성만 기재했다. 다른 속성도 많지만, 이 세개는 정말 활용도가 높았고, 각 속성의 값들에 대해 알고 싶었다. 

 

justify-content: center  flex-start flex-end  space-around  space-between

• center: flex item이 main axis 중앙 정렬
• flex-start: main axis의 시작 지점부터 flex item이 시작된다.
• flex-end: flex item이 main axis의 끝 지점부터 정렬
• space-around: flex item이 동일한 여백으로 정렬된다. 이 때 flex container의 시작과 끝 지점에는 flex item 사이 여백의 1/2에 해당하는 여백이 들어간다. 
• spcae-between: flex item이 동일한 여백으로 정렬된다. space-around의 차이점으로는 시작과 끝에 여백이 없다.

 

align-items: flex-start center flex-end stretch

• center: 컨테이너의 세로 축의 중앙으로 정렬한다.
• flex-start: 컨테이너 최상단으로 정렬한다. 
• stretch: 컨테이너에 맞게 늘린다.
• flex-end: 컨테이너 최하단으로 정렬한다.
• baseline: 폰트(문자)를 기준으로 정렬한다.

 

flex-wrap: nowrap  wrap  wrap-reverse

• nowrap: 모든 items를 여러 줄로 묶지 않는다 = 한줄에 표시 (기본값)
• wrap: Items를 여러 줄로 묶는다.
• wrap-reverse: wrap의 역방향으로 여러줄로 묶는다.