프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
9월 6일 (월)
📚 TIL
CSS 심화 학습
📮 Feelings
CSS 심화 학습
Float
단순히 float 속성에 대하여 왼쪽과 오른쪽 정렬에 대해서만 이해하고 있었는데 float의 해제의 중요성에 대하여 인지할 수 있었고 중첩된 container 설계로 원하는 레이아웃을 형성하는 방법에 대해서 깊게 이해할 수 있었다.
float을 공부하면서 새로운 빈 박스를 활용해 float을 해제하는 방법 밖에 생각하지 못하였는데 가상요소선택자(Pseudo-element)를 활용하여 DOM트리에 불필요한 요소를 생성할 필요없이 float의 동작을 제어할 수 있는 방법에 대해 배울 수 있었습니다.
Position
position 속성에 대하여 각각의 값들에 대한 동작 원리에 대하여 다시 한 번 복습하게 되었고 새로운 점을 많이 배우게 되었습니다.
기존에는 단순히 block 요소와 inline 요소의 위치를 변형시켜주는 부분에 대한 이해도만 있었는데 block요소와 inline 요소의 특성이 명백히 다른데 왜 동일하게 absolute와 fixed 속성에 대한 동작이 동일하게 이루어지는지 생각을 해보니 해답이 머리속에서 떠오르지 않았습니다.
그리하여 각 속성값들에 대한 암묵적인 형태의 변형에 대한 인지가 필요하다 생각하게 되었고 absolute와 fixed 속성이 inline 요소들을 자동으로 block 형태로 변경시켜주는 암묵적 변화가 존재한다는 점을 배울 수 있었습니다.
그리고 쌓임 맥락과 관련하여 내가 원하는 레이아웃 형태가 이루어지지 않는 경우가 종종 있었는데 위와 같은 기본 동작 원리에 대한 이해가 부족했기에 문제를 해결하기에 어려움을 겪었던 경험이 있었습니다.
이러한 경험과 학습을 토대로 각각의 속성들에 대한 대표적인 동작원리뿐만이 아니라 암묵적인 원리들에 대한 이해도를 높여야겠다고 생각하게 되었습니다.
Flex
기존에 내가 사용하던 flex의 속성들은 단순한 정렬을 위해서만 사용했음을 깨닫게 되었다.
flex와 position 속성을 함께 섞어서 많이 사용했었는데 코드가 많이 지저분하다는 느낌을 많이 받았었다. 그러나 오늘 flex에 대해 좀 더 깊게 속성들에 대해 공부한 결과 똑같은 레이아웃에 대하여 훨씬 가독성 높은 코드를 작성할 수 있었다.
1차원의 개념으로 주축과 교차축에 대한 이해를 바탕으로 container에 적용하는 속성과 item들에 적용하는 속성들에 대하여 훨씬 쉽게 이해할 수 있어서 좋았다.
flex 역시 기본적으로 웹에서 요소의 형태에 따른 암묵적인 동작 원리에 대한 이해를 하고 flex를 다루기 훨씬 쉬워졌다.
Grid
grid가 flex와 달리 2차원으로 요소들을 다루어 좀 더 복잡한 상태의 레이아웃 구조의 설계가 가능하다는 기법인 것을 알고 있었지만 상세한 사용법에 대해서는 오늘 처음으로 학습할 수 있었다.
그전에는 flex를 통해서도 충분한 구현이 가능하다고 생각했기 때문이다. 하지만 상세한 내용들을 학습하여 보니 훨씬 쉽게 요즘 웹에서 많이 볼 수 있는 레이아웃 구조들을 구현할 수 있었다.
grid를 학습하면서 내가 예전에 구현했었던 당근마켓과 비슷한 UI를 가지는 상품들이 동적으로 나열되는 레이아웃 구조에 대해 많은 생각을 하게 되었다.
그 당시에는 이러한 기법에 대한 이해도가 없었기에 단순 flex에서 동적인 요소들에 대한 레이아웃 구조를 형성해주기 위해 자바스크립트로 불필요한 빈 박스를 만들어 레이아웃을 채웠었는데 grid를 학습하면서 공간 비율에 대한 학습을 통해 훨씬 유연한 레이아웃 설계가 가능함을 깨닫고 허탈함과 동시에 자바스크립트에서 레이아웃에 대한 CSS 코드를 분리하여 가독성 좋은 코드를 만들 수 있게 되어 행복했다.
grid 역시 결국은 block, inline, 쌓임 맥락 등과 같이 웹의 기본적인 container들의 동작 원리에 대한 이해를 바탕으로 공부하니 훨씬 쉽게 이해할 수 있었고 적용하기도 쉬웠다.
마치며 🙏
오늘 역시 굉장히 유용한 학습을 하게 되었다. 프론트엔드 개발자에게 필요한 역량으로 HTML과 CSS에 대한 마크업 역시 굉장히 중요함을 알고있지만 상대적으로 자바스크립트에 대한 공부시간만큼 마크업에 대한 공부를 하지 못하였다.
그 결과 자바스크립트로 웹의 기본적인 인터랙션을 구현하여도 마크업의 이해 부족으로 사용자에게 최적의 UI를 제공하지 못했던 경험들이 스쳐지나갔다.
그 중에서 가장 근간이 되는 뼈대를 담당하는 레이아웃 구조를 정하는 심화 학습 내용들을 오늘 배우면서 기존에 내가 만들어 왔던 웹에 대하여 훨씬 보기좋고 사용성도 좋은 웹을 개발할 수 있겠다는 자신감이 생기는 하루였다.
📅 Future Action Plans
-
유용한 배포 서비스 학습
-
업무관리용 툴 Notion 프로젝트 코드 리펙토링
