목록WEB/html,CSS (71)

뇌 채우기 공간

[html][css] flex items속성/order/ flex/flex-grow/flex-shrink/flex-basis/align-self

order: flex item의 순서를 지정 flex: flew-grow, flex-shrink, flex-basis의 단축속성 flex-grow: flex item의 증가 너비 비율을 설정 flex-shrink: flex item의 감소 너비 비율을 설정 flex-basis: flex item의 (공간 배분 전) 기본 너비 설정 align-self: 교차 축에서 item의 정렬 방법을 설정 order item의 순서를 설정합니다. item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다. 음수가 허용된다. html구조와 상관없이 순서를 변경할 수 있어서 유용하다. 기본값은 0 1 2 3 4 5 6 .container{ border: 4px solid; display: flex; } .container ...
WEB/html,CSS 2021. 4. 19. 06:22
[html][css] 글자 가운데 정렬 하는법/ flex/

2021.04.18 - [분류 전체보기] - [html][css] flex container 속성/ justify-content 주축의 정렬 방법/ align-content교차 축의 정렬 방법/align-items [html][css] flex container 속성/ justify-content 주축의 정렬 방법/ align-content교차 축의 정렬 방법/align-item 2021.04.18 - [WEB/html,CSS] - [html][css] flex container 속성 / display : flex, inline-flex/ flex-flow 주축을 설정 /flex-wrap 줄바꿈 속성 [html][css] flex container 속성 / display : flex, inline-fle..
WEB/html,CSS 2021. 4. 18. 16:22
[html][css] flex container 속성 / display : flex, inline-flex/ flex-flow 주축을 설정 /flex-wrap 줄바꿈 속성

flex container 속성 display - flex - inline-flex .container{ border: 2px solid red; display:inline-flex; } .container .item{ width:100px; height: 100px; border: 2px solid; } .container{ border: 2px solid red; display:flex; } .container .item{ width:100px; height: 100px; border: 2px solid; } flex-flow 주 축을 설정하고 items의 여러 줄 묶음도 설정한다. flex-direction : items의 주축을 설정 - row: 수평축 - row-reverse: 오른쪽-> 왼쪽 ..
WEB/html,CSS 2021. 4. 18. 15:55
[html][css] flex / 수평정렬하는 법

.container{ border: 2px solid red; display:flex; } .container .item{ width:100px; height: 100px; border: 2px solid; } 부모 요소에 display:flex;를 넣어서 요소들을 수평정렬한다.
WEB/html,CSS 2021. 4. 18. 15:38
[html][css] 다단 columns

columns 다단을 정의 column-width :단의 최적 너비를 설정 column-count : 단의 개수를 설정 더보기 What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap i..
WEB/html,CSS 2021. 4. 18. 15:17
이전 Prev 1 2 3 4 5 6 ··· 15 Next 다음