코딩공부

See the Pen var() function by nilgi (@nilgi) on CodePen. :root { --red: #3c9066; --black: #fff; / root에 미리 색을 지정 } body { background: var(--red); / var(지정값) 이렇게 쓰면 된다. } h2 { color: var(--red); border-bottom: 5px solid var(--red); / root 값만 수정하면 모든 페이지의 색이 바뀌니 잘 쓰면 아주 편하다. } p { color: var(--red); } .box { background: var(--black); padding: 10px; } button { border : 2px solid var(--red); color: ..

See the Pen resize by nilgi (@nilgi) on CodePen. .reh { resize: horizontal; / 가로 크기 조절 가능 overflow: auto; } .rev { resize: vertical; / 세로 크기 조절 가능 overflow: auto; } .reb { resize: both; / 가로세로 크기 조절 가능 overflow: auto; }

See the Pen column-count by nilgi (@nilgi) on CodePen. .cc { column-count: 3; / 3칸으로 나누기 } .cc1 { column-count: 3; column-gap: 50px; / 칸 사이 여백 넣기 } .cc2 { column-count: 3; column-gap: 50px; column-rule-style: solid; / 여백을 선으로 표시 } .cc3 { column-count: 3; column-gap: 50px; column-rule-style: solid; column-rule-width: 1px; / 여백선 굵기 } .cc4 { column-count: 3; column-gap: 50px; column-rule-style: sol..

See the Pen qBrKxvV by nilgi (@nilgi) on CodePen. .op { width: 250px; object-fit: cover; } .op1 { width: 250px; object-fit: cover; object-position: 80% 100%; / x% y% 콘텐츠 위치 지정. 기본값 50% 50% } .op2 { width: 250px; object-fit: cover; object-position: 10% 100%; } .op3 { width: 250px; object-fit: cover; object-position: left bottom; / 방향을 이용할 수 있다. } .op4 { width: 250px; object-fit: cover; object-pos..

See the Pen object-fill by nilgi (@nilgi) on CodePen. .im1 { width: 270px; height: 160px; object-fit: fill; / 기본값. 콘텐츠를 박스에 가득 채움. 가로세로비가 깨짐. } .im2 { width: 270px; height: 160px; object-fit: cover; / 가로세로비 유지하여 가득 체움. 박스와 콘텐츠의 크기가 다르면 이미지가 잘림. } .im3 { width: 270px; height: 160px; object-fit: contain; / 박스 크기에 맞게 가로세로비를 유지하여 가득 채움. } .im4 { width: 270px; height: 160px; object-fit: none; / 콘텐츠의 ..

See the Pen box-reflect 반사 by nilgi (@nilgi) on CodePen. p { margin-bottom: 50px; width: 130px; } .below { -webkit-box-reflect: below; / 아래로 반사 } .above { -webkit-box-reflect: above; / 위로 반사 } .left { -webkit-box-reflect: left; / 왼쪽으로 반사 } .right { -webkit-box-reflect: right; / 오른쪽으로 반사 } .im1 { -webkit-box-reflect: right 30px; / 반사 사이에 공간 넣기 } .gimg { margin-bottom: 200px; -webkit-box-reflect: ..

See the Pen 들어오는(슬라이드) 카드 by nilgi (@nilgi) on CodePen. .box { position: relative; width: 100%; } .im1 { display: block; width: 100%; height: auto; } .card1 { position: absolute; bottom: 100%; left: 0; right: 0; background: tomato; width: 100%; height: 0; overflow: hidden; transition: 1s; } .box:hover .card1 { bottom: 0; height: 100%; } .card2 { position: absolute; bottom: 0; left: 0; right: 0; ..

See the Pen 풍선 도움말 by nilgi (@nilgi) on CodePen. .cd1tip { position: relative; display: inline-block; } .cd1tip .tip { visibility: hidden; width: 200px; background: #333; color: #fff; font-weight: bold; text-align: center; padding: 5px; border-radius: 7px; /* 풍선 위치 잡기*/ position: absolute; z-index: 1; top: -3px; left: 120%; /* 투명도 */ opacity: 0; // 아래 transition 불투명으로 만듬. } /* 풍선 화살표 */ .cd1tip ..

See the Pen animation 속기 by nilgi (@nilgi) on CodePen. animation-name: 이름 animation-duration: 시간 animation-timing-function: 속도 animation-delay: 지연시간 animation-iteration-count: 반복 animation-direction: 방향 animation: 이름 시간 속도 지연 반복 방향

See the Pen animation-fill-mode by nilgi (@nilgi) on CodePen. .box { position: relative; width: 35px; height: 35px; border-radius: 50%; background: gold; / 기본 금색 } .fm1 { animation-name: fm1; animation-duration: 3s; } @keyframes fm1 { from {left: 0px;} to {left: 100px; background: tomato;} } .fm2 { animation-name: fm2; animation-duration: 3s; animation-fill-mode: forwards; / 마지막 키프레임을 유지하고 마침 } ..

See the Pen animation-timing-function by nilgi (@nilgi) on CodePen. .box { width: 30px; position: relative; animation-name: boll; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes boll { from {left: 0px;} to {left: 200px; transform: rotate(500deg);} } .boll1 { animation-timing-function: linear; / 처음부터 끝까지 같은 속도 } .boll2 { animation-timing-function: ease; / 기본값. 느림 - 빠름 - ..

See the Pen animation-direction by nilgi (@nilgi) on CodePen. .box { animation-name: box; animation-duration: 2s; animation-iteration-count: infinite; / 무한반복 } .box1 { animation-direction: normal; / 기본값. 정방향. 생략가능. } .box2 { animation-direction: reverse; / 역방향 } .box3 { animation-direction: alternate; / 정방향 >> 역방향 } .box4 { animation-direction: alternate-reverse; / 역방향 >> 정방향 } @keyframes box { ..

See the Pen animation-interation-count by nilgi (@nilgi) on CodePen. .box1 { animation-name: boxcount1; animation-duration: 8s; animation-iteration-count: 3; / 반복 3회 } @keyframes boxcount1 { 0% {left: 0px; top: 0px;} 20% {left: 90px; top: 20px;} 50% {left: 0px; top: 40px;} 75% {left: 90px; top: 60px;} 100% {left: 0px; top: 80px;} } .box2 { animation-name: boxcount2; animation-duration: 2s; anima..

See the Pen animation-delay by nilgi (@nilgi) on CodePen. .ro { position: relative; animation-name: ro; animation-duration: 12s; } @keyframes ro { 0% {background: #9400d3; left: 0px; top: 0px;} 20% {background: gold; left: 100px; top: 0px;} 40% {background: #333; left: 100px; top: 40px;} 60% {background: #1E90FF; left: 0px; top: 40px;} 80% {background: #ff1493; left: 0px; top: 80px;} 100% {backg..

See the Pen animation 이동 by nilgi (@nilgi) on CodePen. position: relative; .box { animation-name: boxc; animation-duration: 8s; } @keyframes boxc{ 0% {background: tomato; left: 0px; top: 0px;} 25% {background: gold; left: 120px; top: 0px;} 50% {background: #1E90FF; left: 120px; top: 120px;} 75% {background: #ff1493; left: 0px; top: 120px;} 100% {background: #9400d3; left: 0px; top: 0px;} }

See the Pen animation @keyframes % by nilgi (@nilgi) on CodePen. .box { animation-name: boxc; animation-duration: 8s; } @keyframes boxc { 0% {background: tomato;} / 키프레임에 %를 추가해 변경 시기를 지정할 수 있다. 25% {background: gold;} 50% {background: #1E90FF;} 100% {background: #9400d3;} / 총 8초 중 각각 25%씩 이미로 2초 }

See the Pen animation by nilgi (@nilgi) on CodePen. javascript가 없어도 css만으로 애니메니션을 만들 수 있다. .anibox { animation-name: abox; / 애니메이션 이름을 지정 animation-duration: 7s; / 애니메이션 길이(초) } @keyframes abox { / 키프레임은 애니메이션의 기본. 위에 지정한 이름. form { / 시작 background: tomato; / 배경 토마토 } to { / 끝 background: gold; / 배경 골드 } } 배경색이 토마토에서 골드색으로 변하는 애니메이션