css main 클래스 관련 질문

21.01.29 22:14 작성 조회수 33

0

삭제된 글입니다

course-thumbnail

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기5

강의실 바로가기

답변 1

답변을 작성해보세요.

0

잔재미코딩 DaveLee님의 프로필

잔재미코딩 DaveLee

지식공유자

2021.01.30

안녕하세요. 해당 부분은 제가 공유드린 자료를 보시면, 이해가 되실꺼예요. 이미지에 따라서, 결과가 비슷하게 나올 수는 있지만, 명령 자체는 다릅니다. 공유드린 자료를 새소식에 작성드린대로, 구글 드라이브 기능으로 언제든 검색해보셔도 굉장히 유용하실꺼예요. 감사합니다.

3. background-size 프로퍼티

배경 이미지가 요소 사이즈보다 작을 때, 반복해서 해당 사이즈를 채울 것인지를 설정

  • auto : 이미지 크기 유지 (기본값)

  • length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기, 값을 한 개 넣으면 가로 크기로 설정되며, 이 때 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동 설정, px, % 등의 값으로 설정 가능

  • cover : 요소 사이즈를 다 채울 수 있게 이미지를 확대 또는 축소, 가로 세로 비율 유지

  • contain : 요소 사이즈를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소, 가로 세로 비율 유지

  • 참고 사이트

2. background-repeat 프로퍼티

배경 이미지가 요소 사이즈보다 작을 때, 반복해서 해당 사이즈를 채울 것인지를 설정

프로퍼티 값 설명
repeat 요소의 배경 영역을 채울 때까지 이미지 반복, 이미지가 넘치면 짜름 (디폴트)
space 요소가 짤리지 않을 만큼만 이미지 반복, 처음과 마지막 반복 이미지는 요소의 양쪽 끝에 고정 후, 각 이미지 사이의 남은 여백을 고르게 분배. 이미지가 짤리는 경우는 이미지 크기가 요소 사이즈보다 클 경우임
round 요소 사이즈가 늘어나면, 그 때 반복해서 이미지를 채우고, 이미지가 짤리지 않도록, 전체 반복 이미지 사이즈도 재조정
no-repeat 이미지를 반복하지 않음. 반복하지 않은 이미지의 위치는 background-position CSS 프로퍼티로 설정 가능

이 글과 비슷한 Q&A