코딩하는 감자

order : Flex Item 의 순서 0(기본값) : 순서 없음 숫자 : 숫자가 작을수록 먼저 order: -1; > order: 0; > order: 2; > order: 17; flex-grow : Flex Item의 증가 너비 비율 0(기본값) : 증가 비율 없음 숫자 : 증가 비율 flex-grow: 1; flex-grow: 2; flex-grow: 1; -> 1대 2대 1 비율로 너비 증가 flex-shrink : Flex Item의 감소 너비 비율 1(기본값) : Flex Container 너비에 따라 감소 비율 적용 숫자 : 감소 비율 *감소 비율을 0으로 입력하면 감소되지 않음 기본값이 1인 Item들은 컨테이너가 줄어들 때 같이 줄어들지만 flex-shrink: 0; 일 때의 Item..

flex-wrap : Flex Items 묶음(줄 바꿈) 여부 nowrap(기본값) : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 *대부분의 경우에는 flex를 사용하여 수평 정렬을 한다. justift-content : 주 축의 정렬 방법 flex-start(기본값) : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝점으로 정렬 centet : Flex Items를 가운데 정렬 space-between : 각 Flex Items 사이를 균등하게 정렬 space-around : 각 Flex Items의 외부 여백을 균등하게 정렬 display: flex; justify-content: flex-end; ->..

display : Flex Container의 화면 출력(보여짐) 특성 flex : 블록 요소와 같이 Flex Container 정의 inline-flex : 인라인 요소와 같이 Flex Container 정의 Flex Container : flex가 부여된 요소 Flex Items : flex가 부여된 요소의 자식 요소 Flex 속성을 부여할 때 Container와 Items에 부여하는 속성이 각각 다르게 구성되어 있다. Flex Container 에 부여할 수 있는 속성 display flex-flow, flex-direction, flex-wrap justify-content align-content align-items Flex Items 에 부여할 수 있는 속성 order flex, flex-g..

z-index : 요소의 쌓임 정도를 지정 auto(기본값) : 부모 요소와 동일한 쌓임 정도 숫자 : 숫자가 높을수록 위에 쌓임(음수 가능) *z-index를 사용할 때 값을 999와 같이 큰 값은 사용하지 않는 것이 좋다 position 값이 없는 조건에서는 있는 값과 다른 z-index 위치를 갖는다. 요소의 display가 변경됨 position 속성 값으로 absolute, fixed가 지정된 요소는, display 속성이 block 요소로 자동으로 변경됨 display: block; position: absolute; top 30px; left: 30px; z-index: 1; position: absolute; top: 30px; left: 30px; z-index: 1; 따라서 위의 값와 ..

positon : 요소의 위치 지정 기준 static(기본값) : 기준 없음 relative : 요소 자신을 기준 absolute : 위치 상 부모 요소를 기준(위치 상 부모 요소를 꼭 확인해야 함) fixed : 뷰포트(브라우저)를 기준 sticky : 스크롤 영역 기준 *position과 같이 사용하는 css 속성들(모두 음수를 사용할 수 있음) - top, bottom, left, right, z-index top, bottom, left, right : 요소의 각 방향별 거리 지정 auto(기본값) : 브라우저가 계산 단위 : px, em, rem 등 단위로 지정 - ex) 원래 자신의 위치를 기준으로 상30px, 좌30px position: relative; top : 30px left : 30..

background-color : 요소의 배경 색상 transparent(기본값) : 투명함 색상 : 지정 가능한 색상 background-image : 요소의 배경 이미지 삽입 none(기본값) : 이미지 없음 url("경로") : 이미지 경로 * 배경 색은 배경 이미지보다 뒤로간다. background-repeat : 요소의 배경 이미지 반복 repeat(기본값) : 이미지를 수직, 수평 반복 repeat-x : 이미지를 수평 반복 repeat-y : 이미지를 수직 반복 no-repeat : 반복 없음 background-position : 요소의 배경 이미지 위치 0% 0% (기본값) : 0% ~ 100% 사이 값 방향 : top, bottom, left, right, center 방향 단위 : p..