FreeCodeCamp

Learn CSS Flexbox by Building a Photo Gallery

김솜뭉치 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