[TIL] Weekly Mission1 (feat. Flexbox & meta tag 고찰)

샤이니·2023년 3월 25일

오늘의 나는 무엇을 잘했을까?

이미 기획과 디자인이 완성된 웹사이트의 UI를 HTML과 CSS를 사용해 구현하는 Weekly Mission을 진행하면서 flexbox, meta 태그에 대해 스스로 찾아보며 학습했다.
~~왜 앙대~~.. 하는 것이 아닌 이래서 안되군! 이라는 깨달음이 많았던 미션이었다!
CSS refactoring을 진행했다. 우선 구현한 뒤에 공통으로 적용되는 것들은 선택자 목록 기법이나 자손 결합자를 적용해 코드의 길이를 줄였다.
netlify를 사용해 배포하고, GA를 적용했다!
favicon을 적용했다.

오늘의 나는 무엇을 배웠을까?

[1] Flexbox 이해하기

반응형 웹디자인을 위한 Flexbox

하나의 Flex container와 여러 개의 Flex item으로 구성된다.

<div class="container"> 
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  **display: flex;**
}

.item {
  flex: 1;
}

flex container - flex-direction, justify-content, align-items 등사용
flex item - flex, align-self, order 등 사용

Main/Cross Axis

Main Axis : 여러 개의 flex item이 순서대로 배치되는 방향
- flex container의 flex-direction 속성에 의해서 결정.
  - 기본은 row(왼→오)이다. column으로 설정할 경우, 위→ 아래 방향이 된다.
  - justify-content(main axis 기준 정렬) or align-items(cross axis 기준 정렬) 정렬 방향을 고려하여 적용해아한다.
Cross Axis : Main Axis와 수직을 이루는 방향

justify-content

flex item을 main axis를 기준으로 어떻게 정렬할지 결정한다.

즉, flex-direction 속성이 row라면 좌측 정렬, column이라면 상단 정렬
flex-end, center, space-between, space-evenly, space-around 등등

align-items

flex item을 cross axis를 기준으로 어떻게 정렬할지를 결정

기본 stretch - flex item을 flex container의 높이 또는 너비만큼 늘린다.
- flex-direction 이 row일 경우 높이만큼 늘어나고, column이면 너비만큼 늘어난다.
  - row일 경우 height 지정이 필수

flex item의 `flex` 속성

flex item 중 하나에만 flex: 1; 스타일을 적용 - 그 flex item이 모든 공백을 점유
모든 flex item에 flex: 1; 스타일을 적용 - 공백을 균등하게 점유
flex 속성의 값을 서로 다르게 주면 - 다른 비율로 점유

[2] 메타태그 구현하기

(feat. Weekly Mission)

동적인 OG 태그

<head>
	<meta property="og:title" content={data?.title}>
</head>

HTML이 브라우저에 먼저 그려지고 난 뒤, 브라우저에서 데이터를 추가로 요청하고 받아와서 동적으로 OG 태그를 만드는 것은 불가능하다.

[3] Weekly Mission 회고

HTML과 CSS를 사용해 구현하는 위클리 미션을 진행했다.

필수 요구사항은 다음과 같다.

PC 사이즈만을 고려한 구현
브라우저 너비가 1920px을 넘어갈 경우, 내부 요소 위치는 고정, 여백만 커지도록 구현
레이아웃 조건 만족하기
SNS로 공유 시 보이는 미리보기 구현

구현한 기본 구조는 다음과 같다.

├─ header
├─ main
├─ section
│  └─ article
└─ footer

1. `justify-content: space-between;` 의 활약

가장 신경 쓴 것은 요소 2개 혹은 3개를 양옆 끝에 나란히 배치하는 것이었다. display : inline-block을 사용해도 위치를 고정할 수 없었고, margin을 hard하게 적용하고 싶지는 않았다.
따라서 flexbox에 대한 학습을 진행 한 후, justify-content: space-between;를 적용하였더니 손 쉽게 해결되었다.

flex container(부모)
- display: flex & justify-content: space-between 적용. 기본으로 flex-direction이 row이기 때문에 좌측 정렬이 된다.

2. 세로 중앙 정렬을 위한 `align-items: center`

flex item을 cross axis를 기준으로 center에 둔다. 기본으로 flex-direction이 row이기 때문에 flex item의 높이가 container높이만큼 늘어나 중앙정렬이 되었다. (container의 height지정은 선필수!)

3. section의 article들을 상단 정렬 하기 위한 flex-direction: column; 사용

4개의 article이 위에서 아래의 가운데로 정렬될 수 있도록 사용했다.

4. 브라우저 너비가 1920px - max-width 적용

반응형을 위해 max-width를 사용했다. 사실 나머지 파트가 반응형이 아니라 의미는 없지만..!

처음에 body 전체에 적용하니 background-color가 짤려서 background-color를 적용한 요소의 자식인 header의 nav, article, footer의 footer_wrap에 직접 적용했다.

5. background-color는 margin에 적용되지 않는다.

처음엔 굉장히 당황했다. 어떤 방법을 써도 margin에는 적용되지 않았다. 특히 h1, h2 같은 태그는 이미 margin이 적용되어있는 것인지, 적용되지 않는 부분이 생겨 꼭 margin: 0을 적용해줘야했다.

찾은 방법! : 여백이 필요한 경우, margin 대신 padding을 쓸 것~

오늘의 나는 어떤 어려움이 있었을까?

여전히 css로 flex 박스를 사용하는 것은 어렵다. 나아가 Grid 방식도 자유자제로 사용하고 싶다.
HTML의 class 이름 정하는 것이 너무 까다롭다^^ 그래서 css 적용할 때, 태그명으로 했는데.. 더티한 코드가 나와서 머리를 쥐어 자며 class 명을 다 붙여줬다. 좋은 이름을 붙이는 법은 여기에..
- BEM이라는 방식을 사용하자! 리팩토링 필수
생각보다 디테일한 부분을 신경쓰면서 UI를 구현하는 것에 노력이 많이 들었다. 하지만 "왜 중앙정렬 안돼?" 라며 징징거렸던 지난 프로젝트들에 비해 이제는 이유를 알면서 CSS를 적용할 줄 아는 힘이 생겼다!
세컨 모니터 꼭 필요해요...

내일의 나는 무엇을 해야할까?

드디어 일요일!

WIL 및 Week 회고
코테 2문제

샤이니

이전 포스트

[TIL] UI와 Figma (feat. Weekly Mission)

다음 포스트

[TIL] Weekly Mission1 (feat. Flexbox & meta tag 고찰)

learned.log

오늘의 나는 무엇을 잘했을까?

오늘의 나는 무엇을 배웠을까?

[1] Flexbox 이해하기

Main/Cross Axis

justify-content

align-items

flex item의 `flex` 속성

[2] 메타태그 구현하기

동적인 OG 태그

[3] Weekly Mission 회고

1. `justify-content: space-between;` 의 활약

2. 세로 중앙 정렬을 위한 `align-items: center`

3. section의 article들을 상단 정렬 하기 위한 flex-direction: column; 사용

4. 브라우저 너비가 1920px - max-width 적용

5. background-color는 margin에 적용되지 않는다.

오늘의 나는 어떤 어려움이 있었을까?

내일의 나는 무엇을 해야할까?

[TIL] UI와 Figma (feat. Weekly Mission)

[WIL] 3월 4주차 (3/20 ~ 3/26)

0개의 댓글

[TIL] Weekly Mission1 (feat. Flexbox & meta tag 고찰)

learned.log

오늘의 나는 무엇을 잘했을까?

오늘의 나는 무엇을 배웠을까?

[1] Flexbox 이해하기

Main/Cross Axis

justify-content

align-items

flex item의 flex 속성

[2] 메타태그 구현하기

동적인 OG 태그

[3] Weekly Mission 회고

1. justify-content: space-between; 의 활약

2. 세로 중앙 정렬을 위한 align-items: center

3. section의 article들을 상단 정렬 하기 위한 flex-direction: column; 사용

4. 브라우저 너비가 1920px - max-width 적용

5. background-color는 margin에 적용되지 않는다.

오늘의 나는 어떤 어려움이 있었을까?

내일의 나는 무엇을 해야할까?

[TIL] UI와 Figma (feat. Weekly Mission)

[WIL] 3월 4주차 (3/20 ~ 3/26)

0개의 댓글

flex item의 `flex` 속성

1. `justify-content: space-between;` 의 활약

2. 세로 중앙 정렬을 위한 `align-items: center`