코딩공부

See the Pen first-letter by nilgi (@nilgi) on CodePen. first-letter는 다음 속성을 가질 수 있습니다. • font • color • background • margin • padding • border • text-decoration • vertical-align (float이 'none'일 때) • text-transform • line-height • float • clear Love of my life, you've hurt me You've broken my heart And now you leave me Love of my life, can't you see? Bring it back, bring it back Don't take it awa..

See the Pen text-indent by nilgi (@nilgi) on CodePen. text-indent: 30px; 내 곁에 있어줘 내게 머물러줘. 네 손을 잡은 날 놓치지 말아줘. 이렇게 니가 한 걸음 멀어지면내가 한 걸음 더 가면 되잖아 [정준일 - 안아줘] text-indent: 10%; 내 곁에 있어줘 내게 머물러줘. 네 손을 잡은 날 놓치지 말아줘. 이렇게 니가 한 걸음 멀어지면내가 한 걸음 더 가면 되잖아 [정준일 - 안아줘] text-indent: 3cm; 내 곁에 있어줘 내게 머물러줘. 네 손을 잡은 날 놓치지 말아줘. 이렇게 니가 한 걸음 멀어지면내가 한 걸음 더 가면 되잖아 [정준일 - 안아줘] text-indent: -1em; / 마이너스 값 가능 내 곁에 있어줘 내게 ..

See the Pen :first, last-child by nilgi (@nilgi) on CodePen. first-child 첫번째 자식요소 선택 last-child 마지막 자식요소 선택 1번 자식 2번 자식 3번 자식 4번 자식 5번 자식 See the Pen only-child by nilgi (@nilgi) on CodePen. only-child 자식 요소가 유일하게 하나일 때. 다른 어떠한 자식 요소가 없어야 적용 유일한 p 자식 요소 h3 자식요소 p 자식요소

See the Pen :nth-child(n) by nilgi (@nilgi) on CodePen. :nth-child(n) n번째 자식요소 선택. n은 숫자, 홀수(odd), 짝수(even), 수식 가능 :nth-child(n) 1번째 자식요소 2번째 자식요소 3번째 자식요소 4번째 자식요소 5번째 자식요소 :nth-child(홀수 or 짝수) 홀수 칸 짝수 칸 홀수 칸 짝수 칸 홀수 칸 짝수 칸 :nth-child(수식) 1번 2번 3번 4번 5번 6번 7번 8번 9번 10번 :nth-last-child(n) 뒤에서부터 n번째 자식요소 선택. n은 홀수, 짝수, 수식 가능 1번째 요소 2번째 요소 3번째 요소 4번째 요소 5번째 요소

See the Pen :hover:not(.class) by nilgi (@nilgi) on CodePen. 직업 패스파인더 아델 호영 히어로

See the Pen hr style by nilgi (@nilgi) on CodePen. 기본 • hr 꾸미기는 border를 사용하면 된다. border: 1px solid #000 border: 1px dashed #000 border-top: 1px dashed #000 border-bottom: 1px dashed #000 border: 2px solid #000 border: 2px dashed #000 border-top: 2px dashed #000 border-bottom: 2px dashed #000 ※ border-bottom은 자세히 보면 이중선으로 나오니 border만 쓰던지 border-top을 쓰자. border: 1px dotted #000 border: 1px dotted ..

See the Pen text-decoration by nilgi (@nilgi) on CodePen. text-decoration-line none overline line-through underline overline underline overline line-through underline text-decoration-color text-decoration-color red text-decoration-color rgb(30, 144, 255) text-decoration-style text-decoration-style solid text-decoration-style double text-decoration-style dotted text-decoration-style dashed text-d..

See the Pen vertical-align by nilgi (@nilgi) on CodePen. vertical-align은 요소의 수직 정렬의 설정합니다. .vb { vertical-align: baseline; } .vs { vertical-align: sub; } .vsu { vertical-align: super; } .vt { vertical-align: top; } .vm { vertical-align: middle; } .vbo { vertical-align: bottom; } .vtb { vertical-align: text-bottom; } .px1 { vertical-align: 28px; /* px로도 위치를 지정할 수 있다. */ } .px2 { vertical-align: -..

See the Pen 외부선 애니메이션 by nilgi (@nilgi) on CodePen. .outbox { animation: ob 4s infinite; } @keyframes ob { 50% { outline: 24px solid tomato; } }

See the Pen 투명 애니메이션 by nilgi (@nilgi) on CodePen. .op2 { animation: op2 4s infinite; / 애니메이션 이름 op2 4초 반복 } @keyframes op2 { / 키프레임추가 애니메이션 op2에 50% { / 4초중 50% 지점에서 opacity: 0; / 투명도 0으로 변경 } }

See the Pen 이미지 위치 변경 by nilgi (@nilgi) on CodePen. .op { width: 200px; height: 400px; object-fit: cover; / 비율을 유지하고 박스보다 콘텐츠가 크면 잘린다. object-position: 0% 0%; / 콘텐츠 위지 저정 x% y% animation: op 6s infinite; } @keyframes op { 0% { object-position: 0% 0%; } 25% { object-position: 25% 0%; } 50% { object-position: 50% 0%; } 75% { object-position: 75% 0%; } 100% { object-position: 100% 0%; } }

See the Pen 커지는 글자 by nilgi (@nilgi) on CodePen. .bt { /클래스 bt animation: bt 3s infinite; / 애니메이션 이름 bt 3초 반복 } @keyframes bt { / 애니메이션 bt에 키프레임 50% { / 50% 지점에서 font-size: 30px; / 글자 크기를 30px로 } } .bt2 { / 클래스 bt2 font-size: 10px; / 글자 크기 10px animation: bt2 0.5s infinite; / 애니메이션 이름 bt2 0.5초 반복 } @keyframes bt2 { 애니메이션 bt2에 키프레임 50% { / 50% 지점에서 font-size: 20px; / 글자 크기 20px로 } }

See the Pen 색이 변하는 글자 by nilgi (@nilgi) on CodePen. .ct { color: #333; / 색 #333 animation: ct 6s infinite; / 애니메이션 이름 ct 6초 반복 } @keyframes ct { / 애니메이션 ct에 키프레임 넣기 25% {color: gold;} / 전체 6초 중 25%에서 금색으로 50% {color: tomato;} / 50%에서 토마토색으로 75% {color: #fff;} / 75%에서 흰색으로 } .ct2 { color: #fff; animation: ct 3s infinite; } @keyframes ct { 25% {color: tomato;} 50% {color: gold;} 75% {color: #333;} }

See the Pen 굵어지는 테두리 by nilgi (@nilgi) on CodePen. .bbox { animation: bbox 5s infinite; } @keyframes bbox { 50% { border: 30px solid tomato; border-radius: 50px; } }

See the Pen 배경이미지 확대 by nilgi (@nilgi) on CodePen. .abi { background-size: 30px 30px; animation: abi 5s infinite; } @keyframes abi { 50% {background-size: 300px 300px;} }

See the Pen 움직이지 배경 이미지 by nilgi (@nilgi) on CodePen. .abi { animation: abi 7s infinite; } @keyframes abi { 50% {background-position: right;} }

See the Pen by nilgi (@nilgi) on CodePen. .i1 { grid-area: header; } .i2 { grid-area: menu; } .i3 { grid-area: main; } .i4 { grid-area: footer; } .ga { display: grid; grid-template-areas: 'header header header header header' 'menu main main main main' 'menu footer footer footer footer'; grid-gap: 5px; }