그렇다 ... 수료 조건으로 인해 후다닥 완강하였다.
사실 HTML/CSS 기초 문법은 워낙 많이 해서 어려울 것도, 새로울 것도 거의 없었다는 게 아쉬웠지만 ... 멋사의 새로운 플랫폼은 정말 신기하고 재밌었다.
근데 설문 조사에도 기입한 내용이지만 HTML/CSS를 실습하도록 하면서 페이지 이미지를 안 보여주는 것은 ... 너무한 처사라고 생각한다 ㄱ-
만드려는 페이지 디자인을 다 기억하고 작성할 수 있는 것도 아니고 HTML/CSS를 처음 배우는 입장이었다면 진짜 난감했을 것 같다... 태그도 못 외웠는데 백지에 대고 그림을 그리라니 🤯
다음엔 아마 파이썬 강의를 들을 것 같은데 그건 훨씬 나을 것 같다. 웹 관련 강의는 이런 부분을 좀 개선해야 될 것 같다는 생각이 들었다...
사실 새로 배운 건 아니고, 옛날에 배웠다가 까먹은 건데... 바로 float
속성이다 ㅋㅋㅋㅋ flex-box
의 맛을 본 후로 다른 건 쓴 적이 없... 🙈
사실 강의에선 설명이 조금 부족하게 느껴져서 직접 찾아봤다! float 속성은 오로지 정렬을 위해서 쓰이며, 요소를 둥둥 띄우는... 역할임. 위로 붕 떠서 맘대로 정렬할 수 있다고 보면 된다. 참고로 absolute 위치 요소는 적용되지 않는다.
무튼 float 되어 있는 요소 다음에 오는 요소들은 얘네가 있다고 인지를 X → 요소끼리 겹치는 불상사 발생... 👀
clear
속성을 통해 줄바꿈 정렬 가능::after { clear: both }
줘서 요소들이 안 겹치게 하기도 함 )overflow: hidden;
을 주어 부모가 자식을 담게 함 ! ( 이 경우 내용이 넘치면 안 됨 )그리고 하나 더 꼽자면 ... 이건 사실 꼭 필요한 코드는 아니었는데 min-width: fit-content;
라는 코드가 정확히 어떤 메커니즘으로 작동하는지 궁금했다.
그래서 찾아봤는데 min(max-content, max(min-content, <length-percentage>))
라고... 네??
우선 저기에 있는 키워드인 max-content
는 가용 범위에서 가능한 제일 큰 컨텐츠 크기, min-content
는 컨텐츠의 오버플로우를 발생시키지 않는 한에서 가장 작은 크기라고 한다.
그러니까 가장 큰 크기와 (최소크기 VS 컨테이너의 % 중 큰 것)을 비교하여 작은 것을 사용한다... 라는 건데
그냥 쉽게 말하자면 적당히 크기를 맞춰서 요소의 컨테이너 안에 잘 ~ 들어가게 해준다는 거다. ㄱ- 그래... 그렇구나 해야될 듯 싶다.