[Front-end] Web CSS Layout

CSS Box Model

Box model

• 모든 HTML 요소를 사각형 박스로 표현하는 개념
  • 내용(content), 안쪽 여백(padding), 테두리(border), 외부 간격(margin)으로 구성
• 원은 네모 박스를 깎은 것

Box 구성요소

[출처]https://sungunjo.github.io/html-css/2020/06/02/css-box-model.html

• Margin : 박스와 다른 요소 사이의 공백 가장 바깥쪽 영역
• Border : 콘텐츠와 패딩을 감싸는 테두리 영역
• Content : 콘텐츠가 표시되는 영역
• Padding : 콘텐츠 주위에 위치하는 공백 영역

width & height 속성

• 요소의 너비와 높이를 지정
• 이때 지정되는 요소의 너비와 높이는 콘텐츠 영역을 대상으로 함
• CSS는 border가 아닌 content의 크기를 width 값으로 지정
• content가 기본 값이기 때문에 border-box로 바꿔줘야 한다

{
	box-sizing: border-box;
}

박스 타입

• Block
  • 항상 새로운 행으로 나눔
  • width와 height 속석을 사용하여 너비와 높이를 지정할 수 있음
  • 기본적으로 width 속성을 지정하지 않으면 박스는 Inline 방향으로 사용가능한 공간을 모두 차지함
    (너비를 사용가능한 공간의 100% 채우는 것)
• Inline
  • 새로운 행으로 나뉘지 않음
  • width와 height 속성을 사용할 수 없음
  • 수직방향
    • padding, margins, borders가 적용되지만 다른 요소를 밀어낼 수는 없음
  • 수평방향
    • padding, margins, borders가 적용되어 다른 요소를 밀어낼 수 있음
  • 대표적인 inline 타입 태그

기타 display 속성

• Inline-block

  • inline 과 block 요소 사이의 중간 지점을 제공하는 display 값
  • block 요소의 특징을 가짐
    • width 및 height 속성 사용 가능
    • padding, margin 및 border로 인해 다른 요소가 밀려남
  • 요소가 줄 바꿈 되는 것을 원하지 않으면서 너비와 높이를 적용하고 싶은 경우에 사용

• none

  • 요소를 화면에 표시하지 않고, 공간조차 부여되지 않음

• shorthand 속성 - border

  • border-width, border-style, border-color를 한번에 설정하기 위한 속성

• Margin collapsing (마진 상쇄)

  • 두 block 타입 요소의 margin top과 bottom이 만나 더 큰 margin으로 결합되는 현상
  • 웹 개발자가 레이아웃을 더욱 쉽게 관리할 수 있도록 함
  • 각 요소에 대한 상/하 margin을 각각 설명하지 않고 한 요소에 대해서만 설정하기 위함

---

CSS Position

CSS Position

• 요소를 Normal Flow에서 제거하여 다른 위치로 배치하는 것
  • 다른 여소 위에 올리기, 화면의 특정 위치에 고정 시키기 등

CSS Layout

• 각 요소의 위치와 크기를 조정하여 웹 페이지의 디자인 결정

Position 우형

• static
  • 기본값
  • 요소를 Normal Flow에 따라 배치
• realtive
  • 요소를 Normal Flow에 따라 배치
  • 자기 자신을 기준으로 이동
  • 요소가 차지하는 공간은 static일 때와 같음
• absolute
  • 요소를 Normal Flow에 따라 제거
  • 가장 가까운 realtive 부모 요소를 기준으로 이동
  • 문서에서 요소가 차지하는 공간이 없어짐
• fixed
  • 요소를 Normal Flow에서 제거
  • 현재 화면 영역(viewport)을 기준으로 이동
  • 문서에서 요소가 차지하는 공간이 없어짐
• sticky
  • 요소를 Normal Flow에 따라 배치
  • 요소가 일반적인 문서 흐름에 따라 배치되거나 스크롤이 임계점에 도달하면 그 위치에서 고정
  • 만약 다음 sticky 요소가 나오면 다음 sticky 요소가 이전 sticky 요소의 자리를 대체
    • 이전 sticky 요소가 고정되어 있던 위치와 다음 sticky 요소의 고정되어야 할 위치가 겹치기 때문

Z-index

• 요소가 겹쳤을 때 어떤 요소 순으로 위에 나타낼 지 결정
• 정수 값을 사용해 z축 순서를 지정
• 더 큰 값을 가진 요소가 작은 값의 요소를 덮음

Position의 역할

• 전체 페이지에 대한 레이아웃을 구성하는 것이 아닌 페이지 특정 항목의 위치를 조정하는 것
  
  

---

CSS Flexbox

• 요소를 행과 열 형태로 배치하는 1차원 레이아웃 방식
  • 공간배열 & 정렬

main axis(주 축)

• flex item들이 배치되는 기본 축
• main start에서 시작하여 main end 방향으로 배치

cross axis(교차 축)

• main axis에 수직인 축
• cross start에서 시작하여 cross end 방향으로 배치 (기본 값)

Flex Container

• display: flex; 혹은 display: inline-flex; 가 설정된 부모 요소
• 이 컨테이너의 1차 자식 요소들이 Flex Item이 됨
• flexbox 속성 값들을 사용하여 자식 요소 Flex Item들을 배치하는 주체

    .container {
      height: 500px;
      border: 1px solid black;
      display: flex;
    }

Flex direction

• flex item이 나열되는 방향을 지정
• column으로 지정할 경우 주 축이 변경됨
• "reverse"로 지정하면 flex item 배치의 시작선과 끝선이 바뀜

Flex-wrap

• flex item 목록이 flex container의 한 행에 들어가지 않을 경우 다른 행에 배치할지 여부 설정

.container{
	flex-wrap : wrap;
}

justify-content

• 주 축을 따라 flex item과 주위에 공간을 분배

.container{
	justufy-content: center;
}

align-content

• 교차 축을 따라 flex item과 주위에 공간을 분배
  • flex-wrap이 wrap 또는 wrap-reverse로 설정된 여러 행에만 적용
  • 한줄 짜리 행에는 효과 없음

.container{
	flex-wrap: wrap;
	align-content:center;
}

align-self

    .item1 {
      align-self: flex-start;
    }

    .item2 {
      align-self: flex-end;
    }

목적에 따른 속성 분류

배치	공간분배	정렬
flex-direction flex-wrap	justify-content align-content	align-items align-self

justify: 주축
align: 교차축
content => 여러줄
items => 한 줄
self => 요소 한개

flex grow

• 남흔 행 여백을 비율에 따라 각 flex item에 분배
  • 아이템 컨테이너 내에서 확장하는 비율을 지정
  • flex-grow의 반대는 flex-shrink

[출처]https://www.samanthaming.com/flexbox30/21-flex-grow/

반응형 레이아웃

• 다양한 디바이스와 화면 크기에 자동으로 적응하여 콘텐츠를 최적으로 표시하는 웹 레이아웃 방식