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

See the Pen text-indent by nilgi (@nilgi) on CodePen. • text-indent: px, %, cm, em... // 마이너스 값 가능

See the Pen 마우스 올리면 애니메이션 멈춤 by nilgi (@nilgi) on CodePen. animation-fill-mode: forwards; 마지막 키프레임을 유지한다는 뜻.

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

See the Pen :nth-child(n) by nilgi (@nilgi) on CodePen. • 요소:nth-child(n) n번째 자식요소 선택. n은 숫자, 홀수(odd), 짝수(even), 수식(a+b, a-b, 3n, 3n + a...) 가능 • 요소:nth-last-child(n) 뒤에서부터 n번째 자식요소 선택. n은 홀수, 짝수, 수식 가능

See the Pen 이미지 갤러리 by nilgi (@nilgi) on CodePen. 파일 다운 받지 마세요. 실습용.

background-size 배경 이미지 크기 조절 background-size: auto; 기본값 원본 크기 그대로 콘텐츠 공간에 맞게 이미지가 잘림 background-size: contain; 가로, 세로 비율 유지하며 이미지 다 보임 콘텐츠 공간에 맞게 이미지가 늘어나거나 줄어듬 background-size: contain; 가로, 세로 비율 유지하며 이미지 다 보임 콘텐츠 공간에 맞게 이미지가 늘어나거나 줄어듬 이미지 해상도 손실 background-size: cover; 콘텐츠 크기에 맞게 덮음 background-size: 수치(px, %...); 수치 n; : 가로, 세로 크기 동일 background-size: 수치(px, %...); 수치 n n; : 앞 숫자 가로, 뒷 숫자 세로 ba..

See the Pen background, padding 테두리 그라디언트 by nilgi (@nilgi) on CodePen. border-image를 사용하여 테두리에 그라디언트를 넣는 방법을 배웠다. 그러나 이는 border-radius를 적용할 수 없다. 적용하는 방법이 있지만 약간 복잡하다. 그래서 대체하여 background, padding으로 그라디언트가 있는 둥근 모서리 테두리 효과를 쉽게 낼 수 있다. .bp_bor_box { display: inline-block; background: linear-gradient(to right, tomato, gray); // 전체 박스에 그라디언트 배경을 지정한다. padding: 6px; border-radius: 13px; } .bp_bor {..

See the Pen border-gradient by nilgi (@nilgi) on CodePen. border: 10px solid; border-image: linear-gradient(to right, #FF9702, #ccc) 1; // 뒤에 1은 border-image-slice 값이며 그리디언트 적용을 위해 필수. 그라디언트를 적용하면 border-radius를 쓸 수 없다. border-radius 쓰려면 background와 padding으로 테두리 효과를 내는 게 편하다. CSS - background, padding으로 border(그라디언트) 효과 내기 CSS - background, padding으로 border(그라디언트) 효과 내기 See the Pen background, ..

See the Pen aspect-ratio by nilgi (@nilgi) on CodePen. width 값을 주면 가로를 기준으로 height 값을 주면 세로를 기준으로 비율을 지정한다. 여러 장의 이미지 비율을 동시에 수정할 때 쓰거나 반응형 콘텐츠의 비율을 유지하고 싶을 때 쓰면 된다.