Code Lion : 일단 만드는 HTML/CSS 강의 후기

Jiwon Lee·2022년 4월 1일
1

LikeLion2022

목록 보기
1/3

그렇다 ... 수료 조건으로 인해 후다닥 완강하였다.

사실 HTML/CSS 기초 문법은 워낙 많이 해서 어려울 것도, 새로울 것도 거의 없었다는 게 아쉬웠지만 ... 멋사의 새로운 플랫폼은 정말 신기하고 재밌었다.

근데 설문 조사에도 기입한 내용이지만 HTML/CSS를 실습하도록 하면서 페이지 이미지를 안 보여주는 것은 ... 너무한 처사라고 생각한다 ㄱ-

만드려는 페이지 디자인을 다 기억하고 작성할 수 있는 것도 아니고 HTML/CSS를 처음 배우는 입장이었다면 진짜 난감했을 것 같다... 태그도 못 외웠는데 백지에 대고 그림을 그리라니 🤯

다음엔 아마 파이썬 강의를 들을 것 같은데 그건 훨씬 나을 것 같다. 웹 관련 강의는 이런 부분을 좀 개선해야 될 것 같다는 생각이 들었다...


그리고 내가 새로 배운 것

사실 새로 배운 건 아니고, 옛날에 배웠다가 까먹은 건데... 바로 float 속성이다 ㅋㅋㅋㅋ flex-box의 맛을 본 후로 다른 건 쓴 적이 없... 🙈

사실 강의에선 설명이 조금 부족하게 느껴져서 직접 찾아봤다! float 속성은 오로지 정렬을 위해서 쓰이며, 요소를 둥둥 띄우는... 역할임. 위로 붕 떠서 맘대로 정렬할 수 있다고 보면 된다. 참고로 absolute 위치 요소는 적용되지 않는다.

무튼 float 되어 있는 요소 다음에 오는 요소들은 얘네가 있다고 인지를 X → 요소끼리 겹치는 불상사 발생... 👀

  1. clear 속성을 통해 줄바꿈 정렬 가능
    ( 부모 요소에 ::after { clear: both } 줘서 요소들이 안 겹치게 하기도 함 )
  2. 부모 요소에게 overflow: hidden;을 주어 부모가 자식을 담게 함 ! ( 이 경우 내용이 넘치면 안 됨 )
  • none : 띄우지 않음 ( 기본값 )
  • left : 왼쪽에 띄움
  • rignt : 오른쪽에 띄움
  • initial : 기본 값
  • inherit : 부모 요소로부터 상속

그리고 하나 더 꼽자면 ... 이건 사실 꼭 필요한 코드는 아니었는데 min-width: fit-content;라는 코드가 정확히 어떤 메커니즘으로 작동하는지 궁금했다.

그래서 찾아봤는데 min(max-content, max(min-content, <length-percentage>))라고... 네??

우선 저기에 있는 키워드인 max-content는 가용 범위에서 가능한 제일 큰 컨텐츠 크기, min-content는 컨텐츠의 오버플로우를 발생시키지 않는 한에서 가장 작은 크기라고 한다.

그러니까 가장 큰 크기와 (최소크기 VS 컨테이너의 % 중 큰 것)을 비교하여 작은 것을 사용한다... 라는 건데

그냥 쉽게 말하자면 적당히 크기를 맞춰서 요소의 컨테이너 안에 잘 ~ 들어가게 해준다는 거다. ㄱ- 그래... 그렇구나 해야될 듯 싶다.

profile
노는 게 제일 좋은데 공부는 하고 싶어요 😗

0개의 댓글