멋쟁이 사자처럼 프론트엔드 스쿨 2주차 TIL
flex가 편해서 css 할때 자주 사용했는데 float 제약이 많아서 쳐다보지 않았다.
많은 사용자가 이용할수록 브라우저 사용하는 범위가 넓어서 float를 써야 하는 경우가 많아서
둘 다 자유자재로 사용 할 수 있도록 실습을 하자
flex / float로 같은 실습으로 어떻게 다른지 해보고 차이점을 비교를 해봐야겠다.
Flex
- 메인축(row) 크로스축(column) 기본 축은 row이다
- 1차원적 레이아웃에는 적합하다
- block 요소 성질로 부모의 속성을 통해 자식들을 조절한다.
(부모 = Flex-container 자식들 = Flex-item)레이아웃이 다양할 수록 문제가 발생하고 구현하기 힘들다 2차원적 레이아웃에는 그리드가 적합
그리드에 대해서 배웠다 새로운 거라 속성도 헷갈리고 많다 자주 사용해보자
float flex grid 세 단계로 실습하는 거로 연습하자
align-self: flex-start; 개별적으로 하나만 줄때사용
flex-wrap: wrap-reverse; 아래로 내리던걸 위로 올린다고 생각하면 좀 더 이해가 쉽다
flex 속성이 생각이 안날 때 개발자 도구에서 클릭해서 볼 수 있다
grid
- 2차원적인 레이아웃을 쓸 때 사용하기 좋다
- 컨테이너 영역을 다 채운다grid-template-columns : 열의 넓이를 설정
grid-template-rows : 행의 높이를 설정
fr 길이와 넓이를 같은 크기로 가진다 (단위)
grid-template-columns: 1fr 1fr
grid-template-columns: repeat(4, 1fr); 간단하게 표현 가능
repeat( 적용할 트랙의 갯수, 반복할 수치 ) 함수를 이용하면 그리드 트랙 별 수치 반복을 설정 할 수 있다 (item에 텍스트가 많으면 fr 속성이 안된다!)
grid-template-columns: repeat(3, 33.333%);
%사용시 gap을 설정하면 스크롤이 생겨서 fr을 사용하는게 낫다
grid-column-start: 1; 시작점
grid-column-end: 3; 끝나는 지점
grid-column: 1 / span 3; 두개를 하나로 표현한 것 1부터 3칸까지 병합
span 칸을 차지 (1/4 = 1/span 3 )
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex 좋은 글
오늘의 회고 📌
수업을 들으며 마크업 구조를 작성할 때 시멘틱 구조와 스크린 리더기가 읽을 정보들을 순서대로 작성해야 한다는걸 많이 느꼈다. 앞으로 해야 할 일이 많지만 소화할 수 있도록 차근차근 해봐야겠다. 실습이 최고다!
