[TIL] CSS position, flex, bootstrap, responsive/react…
2025-01-21 TIL
📝 TIL (Today I Learned)
🔗 원본 이슈: #3
📅 작성일: 2025-01-21
🔄 최종 수정: 2025년 03월 05일
🍀 새롭게 배운 것
이번에는 CSS 레이아웃의 핵심 개념들과 프론트엔드 개발자가 자주 접하는 실전 용어들에 대해 집중적으로 학습했다.
📌 CSS Position, Flex, Bootstrap
position속성을 통해 요소의 정적/상대/절대 위치 설정 방식 이해 (static,relative,absolute,fixed,sticky각각의 차이점 체감)Flexbox
- 처음 강의로만 접했을 땐 직관적으로 와닿지 않았지만,
- Flexbox Froggy 같은 게임을 하며 눈으로 보고 손으로 익히는 학습 방식이 큰 도움이 됨
justify-content,align-items,flex-grow등 실무에서 자주 쓰이는 속성들을 자연스럽게 체득
Bootstrap 실습
- 문서를 보며 Grid 시스템과 반응형 유틸리티 클래스 실습
- 기존에 막연했던
.container,.row,.col-md-*구조를 HTML에 적용해보며 정확하게 개념화
💡 프론트엔드 개발자 관점에서 이해한 용어들
Responsive vs Reactive
responsive: 디바이스 크기에 따라 콘텐츠가 적절히 조절되는 UI (ex. 반응형 웹)reactive: 사용자 입력이나 데이터 변화에 실시간 반응하는 시스템 설계 (ex. 리액티브 프로그래밍, RxJS)
PWA (Progressive Web App)
- 웹 앱이 네이티브 앱처럼 동작하도록 만드는 기술
- 대표적 특징: 오프라인 지원, 홈 화면 추가, 빠른 로딩 속도
- 실제로 어떤 앱들이 PWA를 도입하고 있는지 찾아보며 가능성과 필요성을 체감
🍎 오늘의 문제 상황 & 해결 과정
🤔 문제 상황
처음 flex를 강의로 배울 때는 개념이 잘 들어오지 않았다. justify-content나 flex-direction처럼 말은 쉬워보이는데, 실제로 어떤 결과를 만드는지 바로 이해되지 않았다.
🛠️ 해결 과정
- 실행해보며 학습: 직접 HTML과 CSS 파일을 만들어 이것저것 시도해봄
- Flexbox Froggy 게임: 문제를 풀며 개념을 시각적으로 체득 →
"아 이런 구조가 되는 거구나"라는 감이 생김 - ChatGPT로 예시 생성:
2열 레이아웃을 flex로 구현해줘같은 요청을 통해 다양한 예시 코드를 받아 실습에 활용
🦄 느낀 점
CSS는 개념보다 체험이 먼저다. 책이나 강의만으로는 막연하게 느껴지던 것들이, 직접 화면에서 변화하는 모습을 보면서 확실히 이해됐다.
실무에서 나오는 단어들은 그냥 넘기지 말자. 현직 개발자들이 무심코 던지는 단어들 — 예: “PWA 괜찮은데요”, “이건 responsive하게 짜야죠” — 이 안에 수많은 기술 개념이 숨어 있다는 걸 느꼈다. → 익숙하지 않더라도 하나하나 찾아보고 내 것으로 만드는 습관이 중요하다.
📌 마무리 요약
💬 프론트엔드는 ‘보이는 것’이 전부가 아니다. 직접 만들고, 부딪히고, 튜닝하면서 체득하는 과정이 핵심이다.
🐬 깃블로그 정리
[responsive / reactive의 의미] (https://nan0silver.github.io/miscellaneous/2025-01-20-responsive/) [CSS Flex] (https://nan0silver.github.io/miscellaneous/2025-01-21-css-flex/)
