일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 스나이퍼팩토리
- DIGITALHANARO
- 디지털하나로
- 깃허브 레포지토리와 로컬 코드 연결하기
- 버전생성프로세스
- 유데미
- 디지털하나로입학식
- 부트캠프
- 취준생
- udemy
- 프론트엔드개발자양성과정
- 하나은행
- 배포
- kdt
- 네이버로그인창만들기
- 프론트엔드배포
- s3
- 프로젝트캠프
- 맥북백틱입력
- 백틱
- 웅진씽크빅
- `
- github
- 개발자교육과정
- 미래내일일경험
- 디지털교육
- 디지털취업
- Next.js
- 맥북백틱
- Today
- Total
Land of Joe
[CSS] align-content가 뭐야? 본문
align-items와 justify-content는 이제 완벽히 이해한 듯하다.
그러나 그 개념만으로는 해소되지 않는 것을 만들 일이 있었다.
한 달짜리 달력을 만드는데
div 한 칸에 '날짜'와 '스케줄 개수'를 넣어주어야 했다.
두 요소를 감싸는 div에 align-items와 justify-content 속성을 지정해주는 것만으로는 두 위치를 모두 충족할 수 없었다.
이를 위해 서칭을 하다가
display: grid, justify-items, align-content 라는 처음 보는 속성들이 있다는 것을 알게되었다.
그중에서도 먼저 align-content에 대해 알아보고자 한다.
align-content
우선 align-content는 flex-wrap: wrap과 함께 아이템들을 묶은 컨테이너에서 쓰인다.
이때 flex-wrap 속성은 Flex 컨테이너의 아이템들이 한 줄에 모두 배치되는지 아니면 여러 줄로 나뉘어 표시되는지를 결정한다.
flex-wrap: wrap은 아이템들이 여러 줄에 걸쳐 배치되는 것을 허용한다는 의미이므로, 아이템들이 정렬되어 있는 상태에서 브라우저의 사이즈가 줄어들었을 때 브라우저의 사이즈에 맞게 아이템이 하나씩 다음 줄로 내려가는 모습을 볼 수 있다.
그리고 그와 함께 쓰이게 된 align-content는 여러 줄에 걸쳐 배치된 아이템들의 위치가 flex-start/ center/ flex-end/ space-between/ space-around인지 등을 지정해주는 속성인 것이다.
즉, align-content 속성은 flex-wrap이 wrap으로 설정되어 Flex 컨테이너에 여러 줄이 될 때에만 유효하게 작동하는 것이다.
'🌐 Web > 🔵 CSS | 💅 | 🌊' 카테고리의 다른 글
[CSS] 이용약관 전문 만들기 하면서 배운 것 (0) | 2023.08.02 |
---|---|
[CSS] 동그란 체크박스 만들기 (0) | 2023.07.31 |
[CSS] input 검색창 만들기 (button 이미지 삽입) (0) | 2023.05.08 |
[CSS] input 태그 검색창 만들기 (0) | 2023.04.02 |