성장에 목마른 코린이

TIL - 12일차 220208 (CSS 레이아웃) 본문

Today I Learned

TIL - 12일차 220208 (CSS 레이아웃)

성장하는 코린이 2022. 2. 8. 11:30
728x90

오전 8:30 - 8:45 plan / 나의 하루 목표

오늘 하루 목표는 Twittler 목업 잘 만들고 유어클래스에 있는 내용을 잘 이해하며 블로깅 하는 것입니다.

그리고 지난주 주말에 이정윤 페어님과 함께 저희가 배운 것을 바탕으로 롤챔프정보 라는 프로젝트를 리액트를 통해서 만들어 보고 있는데 오늘 배운 내용을 프로젝트에 잘 적용 시켜볼 예정입니다.

 

오전 9:00 - 11:00 chapter / CSS 중급

HTML 구성하기

대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐릅니다.

CSS로 화면을 구분할때엔 수직분할과 수평분할을 차례대로 적용해 콘텐츠의 흐름을 따라 작업을 합니다.

1. 수직분할 - 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다.

2. 수평분할 - 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치 될수 있도록 요소를 배치합니다.

수평으로 구분된 요소에 height 속성을 추가하면 수평분할을 보다 직관적으로 할 수 있습니다.

레이아웃 리셋

HTML 문서는 기본적인 스타일을 가지고 있어, 기본 스타일이 레이아웃을 잡는데 방해가 되기도 합니다.

  • 박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데 <body> 태그가 가진 기본 스타일에 여백이 있습니다.
  • width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있습니다.
  • 브라우저마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다릅니다.

위에 언급한 문제를 해결할 몇줄의 코드를 적용시키면 디자인한 대로 레이아웃을 구현할 수 있습니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox로 레이아웃 잡기 - display: flex 분석하기

flexbox로 레이아웃을 구성하는것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다.

부모 박스 요소에 display: flex를 적용해 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법입니다.

기본 값으로 display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치 됩니다.

display:flex가 적용된 빨간 박스내의 자식 요소

Flex 요소에 방향 지정하기 (flex-direction)

flexbox는 박스가 수직으로 분할되는 것이 기본값입니다. 그러나 방향을 설정해 주면 수평으로도 분할할 수 있습니다.

flex-direction 속성은 부모 박스 요소에 적용합니다. 자식 박스에 속성을 주지 않아도, 자식 요소가 영향 받습니다. 

주요 속성은 row 와 column 입니다.

 

주의할 점!

  • display 속성에 flex를 적용하는 것은 부모 요소에 적용합니다. (display: flex)
  • 자식 요소는 flex라는 속성에 값을 적용합니다. (flex: 0 1 auto)

반드시 알아야할것! : grow(팽창 지수), shrink(수축 지수), basis(기본 크기)

자식 박스에 어떤 속성도 주지않으면 왼쪽에서 오른쪽으로 콘텐츠의 크기만큼 배치됩니다. 

flex: 0 1 auto; // 자식 요소에 flex 속성을 추가하지 않으면 적용되는 기본값
flex: <grow> <shrink> <basis> // flex 속성에 적용되는 세가지 값의 종류

 

이 순서와 기본값은 반드시 기억하세요!

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

grow: 자식 박스는 얼마나 늘어날 수 있을까요?

target 클래스에서 flex-grow 속성의 값을 1로 변경한다면 target 클래스를 가지고 있는 첫번째 자식 박스는 부모 박스의 가로 길이중에서 남은 빈 영역 만큼 늘어납니다. 전체 자식 요소가 가진 grow 값의 합이 1+0+0 = 1 이라 target 클래스를 가지고 있는 자식 박스의 가로 크기는 1/1 = 100% 입니다. 그러나 다른 자식 박스 안에 이미 콘텐츠가 존재하기 때문에 다른 자식 박스 안의 콘텐츠가 담긴 길이를 제외한 나머지 가로 길이가 target 클래스를 가진 자식 박스의 가로 길이입니다.

.target {
  flex: 1 1 auto;
}

target 클래스에만 flex-grow 속성에 1을 적용한 경우

box 클래스의 flex-grow는 기본값인 0입니다. 만약 1로 설정하면 모든 박스가 grow 합니다. 모든 박스가 동일한 비율로 가로 길이가 늘어납니다. (총 grow 값 1+1+1, 각 박스는 1/3씩 크기를 가짐)

.box {
  flex: 1 1 auto;
}

box 클래스의 flex-grow 속성에 1을 적용한 경우

만약 target 클래스의 flex-grow 속성 값이 2 일경우, grow가 적용된 전체 값은 2+1+1=4입니다. 따라서 target 클래스를 가진 박스의 크기는 2/4=50%가되고 나머지 자식 박스는 1/4=25%의 길이를 가집니다.

.target {
  flex: 2 1 auto;
}

target 클래스의 flex-grow 속성에 2를 적용하고, box 클래스의 flex-grow 속성에 1을 적용한 경우

shrink: 자식 박스는 얼마나 줄어들 수 있을까요?

shrink는 grow와 반대로 설정한 비율만큼 박스 크기가 작아집니다. flex-grow속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 도는 flex: <grow> 1 auto 와 같이 grow 속성에 변화를 주는 방식을 권장합니다. flex-shrink 속성은 width나 이후 설명할 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문입니다. flex-grow 속성으로 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.

basis: 이 박스의 기본 크기는 몇일까요?

자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기입니다. flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지됩니다. flex-grow 속성의 값이 0인 경우에만 flex-basis 속성 값이 유지됩니다.

.left {
  flex: 0 1 100px; // grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않습니다
}
.right {
  flex: 1 1 auto; // grow를 1로 설정해 나머지 공간을 채워줍니다.
}

왼쪽 박스는 크기를 유지해야 하므로 flex-basis 속성에 100px를 적용합니다.

참고

  • width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
  • 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
  • (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.

오전 11:00 - 오후 2:00 chapter / 웹 앱 화면 설계하기

와이어프레임 Wireframe

웹또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다.

와이어프레임은 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 단순하게 레이아웃과 제품의 구조를 보여주는 용도입니다.

상품 주문 시스템의 와이어프레임

목업 Mock-up

대부분의 산업에서 목업은 실물 크기의 모형을 뜻합니다.

실물 제품이 없는 무형의 웹 또는 앱은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작업합니다.

예를 들어, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드 코딩하는 방식입니다.

하드코딩이란?

변수를 사용하지 않고 소스코드에 일일이 출력하는 방법입니다.

 

오후 2:00 - 5:00 pair / Twittler 목업 만들기

오후 5:00 - 6:00 daily / 회고

오후 6:30 - 7:00 survey / Pair Review

 

'Today I Learned' 카테고리의 다른 글

TIL - 14일차 220210 (Spread, Rest 문법)  (0) 2022.02.11
TIL - 13일차 220209 (원시 자료형, 참조 자료형, 스코프, 클로저)  (0) 2022.02.09
TIL - 11일차 220207 (객체)  (0) 2022.02.07
TIL - 10일차 220128 (배열, 객체)  (0) 2022.01.28
TIL - 9일차 220127 (git)  (0) 2022.01.27
'Today I Learned' Related Articles more
Comments