FE공부1 - 웹스토리보이님의 레이아웃01 영상

 

https://www.youtube.com/watch?v=qnwa6I5WosI

 

"[레이아웃01] 사이트 만들기 프로젝트1 - float, flex, grid 레이아웃 유형별 연습하기" 라는 제목을 갖고 있는데,
내용은 레이아웃 만져보기 정도였습니다.
그래도 궁금한건 직접 찾아서 공부해보면 되서 나쁘지 않았습니다.

언급된 내용들 중 중요하다고 생각되는 것들을 기초적으로만 정리해보면 다음과 같습니다.

- float https://developer.mozilla.org/ko/docs/Web/CSS/float

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

- clear https://developer.mozilla.org/ko/docs/Web/CSS/clear

clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다.

- media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

@로 시작
어떤 CSS를 미디어의 유형에 따라 선택적으로 사용하고 싶을 때 사용
영상에서 screen 생략 가능하다 이런 이야기가 있는데, 이건 틀린 이야기일 겁니다.
print media가 큰 의미가 없어졌긴 합니다만, print 화면을 다르게 출력하려고 한다면 해당 값을 이용해야 합니다.

media type : all screen print
media feature : min-width max-width color orientation ...

and 나 or로 묶을 수 있음 , 로 여러개 쓸 수 있음

- flex https://developer.mozilla.org/ko/docs/Web/CSS/flex

CSS가 엘리먼트들을 배치(layout)하는 방법들 가운데, 기존의 block 이나 inline 외에 도입한 방법입니다.
기존의 보통흐름을 위해 사용되던 block과 inline과 달리, 자식을 어떻게 배치할지를 지정합니다.

flex의 기본은 자식들을 배치하는 방향입니다. 영상에서는 기본 방향 row에 flex-wrap을 사용했습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout

flex 관련 잘 정리된 글 : https://studiomeal.com/archives/197

- grid

flex처럼 자식을 어떻게 배치할지를 정하는데, 테이블레이아웃처럼 2차원으로 배치하기 위해 만들어진 방법입니다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout

grdi 좀 어렵지만 정리된 글 : https://studiomeal.com/archives/533