[CSS] SCSS 문법 01. 중첩 (Nesting)HTML 구조처럼 CSS를 겹쳐서 작성할 수 있음/* SCSS */.navbar { width: 100%; padding: 1rem; ul { list-style: none; } li { display: inline-block; }} 02. 상위 선택자 참조 (&)중첩 안에서 부모 선택자를 지칭할 때 사용주로 가상 클래스(:hover)나 클래스 결합할 때 씀/* SCSS */.button { background: blue; /* .button:hover 와 동일 */ &:hover { background: darkblue; } /* .button.active 와 동일 */ &.active { background: red; }} 03.. [CSS] DIV 크기에 맞게 이미지 넣기 웹 디자인을 할 때 이미지를 특정 모양으로 자르고 싶거나, 다양한 크기의 이미지를 동일한 크기로 맞추고 싶을 때가 있습니다. 예를 들어, 프로필 사진을 원 모양의 박스에 넣어 사용하고 싶을 때, CSS를 이용하면 손쉽게 작업할 수 있습니다. 이번 포스트에서는 HTML과 CSS를 이용해 부모 요소 안에 이미지를 깔끔하게 맞추는 방법을 소개합니다. 핑크색 원 안에 이미지를 딱 맞게 넣는 여러 가지 방법이 있지만, 여기서는 부모와 자식 요소의 CSS 설정을 통해 깔끔하게 이미지를 맞추는 방법에 대해 설명하겠습니다. HTML 구조div 요소가 부모이고, 이미지가 자식 요소로 들어갑니다. - 위 HTML 코드에서 image.jpg 부분은 실제 이미지 URL로 대체해 주세요. CSS 코드CSS를 사용하여 부모.. [CSS] 줄바꿈 처리하는 방법 🔎'\n'이 들어왔을 때 줄바꿈 하기.content { white-space: pre-line;}css 파일에서 'white-space: pre-line' 추가하기 이전 1 다음
