✍Week 2 회고록

Obebe·2026년 2월 18일

백엔드 코드잇스프린트 풀스택 풀스택개발자 풀스택개발자취업 풀스택부트캠프 프론트엔드

codeit

목록 보기

3/13

Flutter로 여러 프로젝트들을 진행해보면서, 구조를 작성하는 것에는 어려움이 없을 거라고 약간의 자신감이 있었다.

HTML은 전혀 그렇지 않았다. 막상 figma를 보고 구조부터 작성하려하니 위젯트리를 떠올리며 구조를 잡았던 flutter와 다르게 어떻게 나눠야할지를 구상하는 것부터가 어색했다.

HTML의 구조를 시멘틱 태그를 기반으로 분류하면 <header>, <main>,<section>,<aside>,<footer>로 나눌 수 있다. 무엇보다 찾아보니 가장 큰 차이점은 단순히 화면을 배치하는 언어가 아닌, 각 영역의 의미와 역할을 정의하는 언어라는 점이 크게 달랐다.

그러니까, 처음부터 Figma를 보고 직관적으로 디자인을 보며 작업에 들어가는 것보다 뼈대를 구상하고 그 위에 스타일을 입히는 느낌으로 접근해야한다는 것이다.
(사실 Flutter도 그렇게 했어야됐을지도 모른다.)

Flex

flex를 처음 배웠을 때, 무조건적으로 세로로 정렬되는 친구들이 display: flex;를 사용하니 가로로 정렬이 되길래 기본이 Column이고 flex를 사용하면 Row가 되나? 하고 생각했다.

짧은 생각이었다.
flex는 디자인에 자유를 주는 것이다.
다만, flex의 기본 값이 Row인 것 뿐이다.

flex-direction: row;

flex와 함께 자주 사용하는 속성들이 있다. justify-content이다.
이 친구는 main axis 기준으로 정렬하는건데 그러니까 가로를 기준으로 정렬을 제어하는 것이다.

align-items는 cross axis를 기준으로 그러니까 세로를 기준으로 정렬을 제어한다.

마지막으로 flex의 기본값이었던 row는

flex-direction: column;

으로 넣어주면 세로 정렬이 된다.
❗주의점은 이 속성이 바뀌면 maix와 cross axis의 개념도 함께 바뀐다.

gap은 Flutter에서 spacer와 비슷하다. sizexBox를 써서 값을 주는 느낌인데, 예를 들어

gap: 16px;

이렇게 하면 양쪽에 margin을 주지 않아도 16px만큼 공간을 넣어준다. 이걸로 간격을 깔끔하게 조절할 수 있었다.

Position

익숙한 용어이다. Flutter에서 Position은 화면에서 원하는 위치에 놓아주는, 그러니까 다른 위젯들에 영향을 받지 않는 것이었다.
html에서는 조금 달랐는데, position을 사용해서 문서의 흐름에 남아있느냐, 빠져냐오냐 정도의 차이로 이해했다.

기본적으로 요소들이 흐름을 따라 위치하는데, position을 사용하면 부모(relative를 가지고 있는 요소)를 기준으로 이동하게 된다.
더 정확하게는

가장 가까운 "position이 static이 아닌"부모를 기준으로 한다.

ex)
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
}

그러니 부모가 누구인지 잘 아는 것도 중요하다.

같이 쓰이는 친구로 이번 스텝에서는 top: 0;과 z-index: 1000;을 알게 되었다.

top은 부모로부터 수직만큼 얼마나 떨어질지를 결정하는 것이다.
z-index는 요소의 쌓임 순서라고 한다. 값이 클수록 앞에 보인다고 하는데, 주의점으로 숫자가 크다고 무조건 최상단이 되는 것은 아니며, 같은 stacking context 안에서만 비교된다는데 이런 상황에서 직접 써봐야 체감할 것 같다.