[일오갓생 Day10] HTML/CSS (flexbox, 반응형 디자인 등), 회고

1. Position : 요소의 배치 기준 정하기

​
position이란
요소를 어디에, 무엇을 기준으로 배치할지 결정합니다. 기본 배치 흐름을 벗어나거나 조정할 때 필수적으로 사용됩니다.
​
​

개념 : top, left, right, bottom 속성과 함께 사용하여 위치를 세밀하게 조정합니다.

위에서(top) 얼마 떨어져! 왼쪽(left), 오른쪽(right)으로 얼마 떨어져! 밑으로(bottom) 얼마 떨어지랑게!
이렇게 위 왼오 아래 세부적으로 조정할수도 있지만 내가 보고 있는 화면을 기준으로 위치 조정을 할 수도 있습니다.
​
​

• relative (상대 위치):

요소의 원래 위치를 기준으로 이동합니다.
즉, 원래 있어야 할 자리를 기준점으로 top, left로 살짝 밀어 놓아 배치하는 것입니다.
이동하더라도 다른 요소들의 배치에 영향을 주지 않습니다.
문서 흐름에서는 여전히 제자리가 되는 것으로 의미합니다.
레이아웃 상에서 차지하는 공간은 그대로라서, 다른 요소 입장에서는 쟤는 여전히 원래 그 자리에 있는 것처럼 취급됩니다.
​
​

• absolute (절대 위치):

absolute를 쓰면, 레이아웃에서 쏙 빠져나와 내가 기준을 정해 그에 대해서 위치를 설정한 값으로 배치가 됩니다.

그리고 CSS에서 조상–부모–자식이라는 말이 나오게 되는데 그 이유는 HTML 요소들이 트리 구조(계층 구조)로 쌓이기 때문입니다.

body (조상)
└── div (부모)
​   └── p (자식)
​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ └── span (자식)

그래서 어쨋거나 절대 위치의 어디 기준으로 할지를 먼저 정해야합니다. 이때 기준은 다음과 같이 세웁니다.

1. 가장 가까운 조상 중에서 position: relative / absolute / fixed가 설정된 요소입니다.

2. 그런 조상이 하나도 없으면, 화면 최상단 쪽(보통 body나 뷰포트)을 기준으로 삼습니다.
   ​

그래서 실무에서는 헷갈리지 않으려고, 보통 부모에 릴레이티브(relative) 주고, 자식에게 앱솔루트(absolute)를 준다 라고 얘기한다 합니다~!
​
​

• fixed (고정 위치):

뷰포트(Viewport, 브라우저 화면)를 기준으로 고정됩니다.
페이지를 스크롤해도 항상 같은 위치에 노출되어야 할때 사용합니다.
​
​
​

2. Flexbox : 유연한 박스

여러 박스를 가로 또는 세로로 유연하게 배치하기 위한 레이아웃 입니다.

부모 요소에 display: flex; 를 선언하면 자식 요소들이 자동으로 Flex Item이 됩니다.

이게 무슨 말이냐,,!
예시를 들어보자면 저희 물류 센터가보면 택배들을 이동시켜주는 컨테이너가 있잖아요. 그 컨테이너처럼 박스들을 줄 맞춰 세우는 전용 모드를 Flexbox라고 이해하시면 됩니다.

부모에 display: flex;를 켜면 → 부모는 박스들을 줄 세우는 관리자(Flex 컨테이너)가 되고,

그 안의 자식들 → 줄 서는 대상(Flex 아이템)이 되어서, 가로/세로/정렬/간격을 유연하게 조절할 수 있게 됩니다.

예제로 간단히 살펴보면

실행하면 다음과 같이 나옵니다.

큰 화면에 컨테이너 위에 박스있는 것처럼 보이지 않나요ㅎ,,
​
​
​

3. 반응형 디자인 (Responsive Design) : 어떤 화면에서도 알잘딱

사용자의 기기(데스크톱, 태블릿, 모바일)나 화면 크기에 따라 레이아웃이 자연스럽게 변하도록 만드는 디자인 방식입니다.

고정된 px 단위 대신 환경에 따라 변하는 단위를 사용합니다.
상대적인 기준을 하므로 반응형 디자인이 가능합니다.

• % : 부모 요소의 크기를 기준으로 하는 백분율 단위

• vw / vh : 뷰포트의 너비(Width)와 높이(Height)를 기준으로 하는 단위

• rem : 최상위 요소(html)의 폰트 크기를 기준으로 하는 상대 단위

그리고 어떤 스타일을 어느때 적용하라는 규칙도 적용 가능합니다.

• 📱 조건부 스타일 : Media Query
  화면이 이 조건일 때, 이 스타일을 적용

예시)
@media (max-width: 600px) { ... }
는 화면 너비가 600px 이하일 때 내부 스타일을 적용합니다.
코드는 style 안에 쓰면 됩니당

이에 대한 활용처는 모바일 화면에서 가로로 배치된 메뉴(flex-direction: row)를 세로로(column) 쌓이도록 변경하도록 할때 사용됩니다.

이런 프론트엔드는 화면에 어떻게 보여줄지 꾸밈의 정도라고 생각이 된다. 그래서 요즘 빠르게 변화하고 진화중인 생성형 AI를 통한 도움을 받을 수 있다.
​
그래서 난 이 부트캠프를 하기 전에는 GPT나 Gemini를 잘 쓰지 않았고, 만약 쓴다고 한들 무료 버전으로 쓰고 있다가 생성형 AI에 관해서 책을 권유해주셔서 문득 궁금해져서 추천받은 책을 읽으러 갔었다. 제목은 "아는 만큼 보이는 AI"라는 책이다.
재미있게 훌훌읽어서 한 2시간?도 안되서 다 읽었던 것 같다.
​
이렇게 빨리 읽을 수 있었던건 아마 수학과 코딩에 깊게 모르는 일반인/비개발자도 AI를 기술에 휘둘리지 않고 이해하고 쓰게끔 돕는 교양형 입문서이기에 그럴수 있었지 않았을까
​
챗봇이나 이미지·영상 생성, 단백질 구조 예측, 추천 시스템 등 요즘 AI가 쓰이는 대표적인 사례들을 먼저 보여주고, 그 뒤에 AI가 대략 어떻게 돌아가는지, 어떤 한계와 위험이 있는지 설명하는 구조로 되어 있어. 무조건 이해하면서 봐야지~ 보다는 아 이러한 사례에 대해서 구조적으로 어떻게 돌아가는지 대강 틀이 잡혔다.
​
특히 여러 사례들을 보면서 인상 깊었던 부분이 있었다.
바로 챗GPT의 환각 현상에 관한 유명한 일화를 얘기한 부분이다.
그 일화는 바로 '세종대왕의 맥북 프로 던짐 사건'에 대해서 챗GPT가 얘기를 해준다는 것이다!! 그것도 실제 있었던 역사적 사건인 양 아는 척하며 답한다는 내용이 유명해져서 밈으로도 되었다고 한다.
이걸 보고선 난 순간 피식 😏 속으로 웃어버렸다.

혹시나 지금도 이 환각 현상을 볼 수 있나 방금 챗GPT 무료님에게 가서 물어보았다.

하지만 지금은 환각이라는걸 인지하고 이렇게 재미없게 말해버린다능,,

[출처 : "아는 만큼 보이는 AI" 책의 페이지 142]

그냥 좀 황당하게 웃겨서 찍어보았습니다.. 이 멍텅구리한 모습을 이젠 못보다니,, 좀 아쉽구만 크흡

어쨋거나 저쨋거나 GPT도 이렇게 발전하는데! 그에 맞춰서 나도 열심히 발전하도록 새해에 정신 다 잡고! 해보겠습니다.
​
​
이상 오늘의 수업 정리와 회고였습니다.