뇌 채우기 공간

display grid container을 정의한다. 그리드를 사용하기 위해 필수적이다. 1 2 3 1 2 3 .container{ display: grid; width:300px; height:250px; border: 4px solid lightgray; } .item{ border: 2px dashed red; } display: grid;는 블럭요소같은 grid를 만드는 것이다. display: inline-grid; container의 css를 이렇게 바꾸면 inline요소 같은 grid가 만들어진다. grid-template-rows 행이 몇개인지 정의하는 것 grid-template-columns 열이 몇개인지 정의하는 것 1 2 3 .container{ display: grid; grid-..

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 ...

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..

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: 오른쪽-> 왼쪽 ..

.container{ border: 2px solid red; display:flex; } .container .item{ width:100px; height: 100px; border: 2px solid; } 부모 요소에 display:flex;를 넣어서 요소들을 수평정렬한다.

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..

animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지]; .box{ width:100px; height: 100px; background: black; } .box:hover{ animation: first-animation 2s infinite alternate; } @keyframes first-animation{ 0%{ width: 100px; } 100%{ width: 500px; } } @keyframes 2개 이상의 애니메이션 중간 상태(프레임)을 지정 .box{ width:100px; height: 100px; background: black; } .box:hover{ animation: my-animation 1s infinite altern..

transform-origin : 요소의 변환의 기준점을 설정 transform-style: 3D 변환 요소의 자식 요소도 3D변환을 사용할 지 설정 perspective: 하위 요소를 관찰하는 원근 거리를 설정 perspective-origin: 원근 거리의 기준점을 설정 backface-visibility: 3D변환으로 회전된 요소의 뒷면 숨김을 설정 transform-origin img{ margin: 100px; transition: 1s; transform: rotate(45deg); transform-origin: 0% 0%; } transform-origin: 기준점인데 원래 기본값은 50% 50% 0 이다 ( x 축 y축 z축) 그 기준점은 요소의 정 중앙이다. 그런데 0 0 0 으로 바꾸..

img{ transform: perspective(500px) rotateX(45deg); } perspective 뷰는 얼만큼 멀리서 떨어져서 보겠다는 것이기에 값이 커질수록 멀리서 보는 효과가 있다(원근법) 그리고 transform 의 속성에 첫번째에 적어야한다. img{ transform: perspective(500px) rotateY(45deg); }

transform 요소의 변환 효과 (변형)을 지정 transform 속성은 하나고 여러가지 값을 적을 수 있음 여러 함수들이 존재한다. 2D속성 translate : 이동 - translate(x, y) - translate(x) - translate(y) scale : 크기 - scale(x, y) - scale(x) - scale(y) rotate(degree) : 회전 skew : 기울기 - skew(x-deg, y-deg) - skew(x-deg) - skew(y-deg) martrix(n,n,n,n,n,n) : 모두 아우르는 것 .box{ width:100px; height: 300px; background: gray; margin: 300px; transform: rotate(45deg) ;..