[CSS] 패딩(padding), 마진(margin), 테두리(border) 속성 알아보기!
1. 패딩(padding) 내용과 테두리 사이의 간격 padding-top, padding-right, padding-bottom, padding-left padding: 위 오른쪽 아래 왼쪽순으로 설정 [css] div#padding { padding: 20px 50px 30px 10px;} /* 위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px */ /* ⭐ 3개 */ div#padding { padding: 20px 50px 30px ;} /* 위 20px, 오른쪽 왼쪽 50px, 아래 30px */ /* ⭐ 2개 */ div#padding { padding: 20px 50px ;} /* 위 아래 20px, 왼쪽 오른쪽 50px */ /* ⭐ 1개 */ div#padding { padd..
2023. 3. 31.
[CSS] 배경 설정하기 - 컬러 배경 설정, 이미지 배경 설정, 배경 반복, 배경 위치 설정, 배경 스크롤 고정, 배경 이미지 크기 설정, 배경 속성 한꺼번에 적용
1. background-color HTML 요소의 배경으로 나타날 배경 색상 설정 CSS 배경1 배경 적용하기 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis atque molestias quaerat, veritatis iure ab officiis maiores nesciunt nobis sapiente doloribus quos, quam, libero repudiandae facilis voluptatem neque sit maxime? 2. background-image HTML 요소의 배경으로 나타날 배경 이미지를 설정 배경 이미지는 기본 설정으로 반복되어 나타남 background-image: url(파일경로) 3..
2023. 3. 30.
[CSS] TEXT설정 - 5️⃣ white-space, text-overflow, overflow
1. white-space 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성(nowrap, pre, pre-wrap, pre-line) 2. text-overflow 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성(clip, ellipsis) 3. overflow 요소 내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성 css 텍스트5 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro fugit doloremque dicta ipsam, aliquam est dolorem laudantium maiores eius assumenda harum doloribus adip..
2023. 3. 30.
