-
Learn CSS Flexbox by Building a Photo GalleryFreeCodeCamp 2022. 7. 31. 19:35
class 와 id를 style.css에서 지정?
class >.class-name / id > #id-name
flex-wrap
정렬된 요소들의 총 넓이가 부모 넓이보다 클 때, 다음 줄에 이어서 정렬해줌.
부모요소에 display:flex; 와 함께 기재
해당 속성을 사용하지 않으면 기본값( flex-wrap:nowrap; ) 이 적용되어, 정렬된 요소들의 넓이는 부모 넓이에 맞게 자동축소됨.
https://chlolisher.tistory.com/33
[CSS] flex 관련 속성 정리 flex-direction / flex-wrap / flex-flow
1. flex-direction - 요소들 나열 방향 지정 A B C D E F main { width: 200px; height: 200px; border: 1px solid lightgray; display: flex; fl..
chlolisher.tistory.com
justify-coneter
메인축 정렬
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
justify-content - CSS: Cascading Style Sheets | MDN
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
developer.mozilla.org
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
CSS 미디어쿼리 Media Query
CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용.
스타일 : 일반적인 CSS 코드 / 조건 만족 O > 스타일 적용 O
@media (조건) { 스타일 }https://www.daleseo.com/css-media-queries/
CSS 미디어 쿼리 (Media Query) 사용법
Engineering Blog by Dale Seo
www.daleseo.com
'FreeCodeCamp' 카테고리의 다른 글
Learn Accessibility by Building a Quiz (0) 2022.08.01 Learn Typography by Building a Nutrition Label, Completed (0) 2022.08.01 Learn the CSS Box Model by Building a Rothko Painting (0) 2022.07.30 Learn CSS Colors by Building a Set of Colored Markers (0) 2022.07.26 Learn CSS Flexbox by Building a Photo Gallery (0) 2022.07.24