반응형 분류 전체보기269 [CSS] box-shadow 개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position : 세로 위치이다. 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어진다. (필수) blur : 그림자를 흐릿하게 만든다. 값이 클 수록 더욱 흐려진다. spread : 양수면 그림자를 확장하고, 음수면 축소한다. color : 그림자 색을 정한다. inset : 그림자를 요소의 안쪽에 만든다. initial : 기본.. 2023. 10. 14. [CSS] overflow: hidden hidden 반대로 overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨겨버릴 수 있습니다. .lyrics { overflow: hidden; } See the Pen position-sticky by mirian (@anananananancatdeveloper) on CodePen. overflow 속성을 hidden으로 지정된 요소 내에서는 긴 텍스트의 뒷 부분이 아예 잘려버리는 것을 확인할 수 있습니다. 2023. 10. 14. [CSS] outline & focus outline "outline" 속성은 테두리 속성(border)와 같은 속성을 가지지만, 테두리 선 외곽에 위치하며, 자리를 차지하지 않습니다. See the Pen position-sticky by mirian (@anananananancatdeveloper) on CodePen. none : 아웃라인 없음. hidden : 아웃라임 감춤. dotted : 둥근 점선 dashed : 긴 점선 solid : 직선 double : 가는 두줄 groove : 홈파인 3D 입체 라인. 아웃라인이 파여진 입체로 음각 처리. ridge : 솟아오른 3D 입체 라인. 아웃라인이 솟아오른 입체로 양각 처리. inset : 3D 음각 입체. 요소가 내려가 보이도록 아웃라인 그림자 효과 outset : 3D 양각 입체.. 2023. 10. 14. [CSS] ::before & ::after 가상 요소 설명 ::before 요소 내용 앞쪽에 새 컨텐츠를 추가. ::after 요소 내용 끝에 새 컨텐츠를 추가. 2023. 10. 14. 이전 1 ··· 56 57 58 59 60 61 62 ··· 68 다음 반응형
