이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS, float 속성을 이용해서 만드는 Holy Grail Layout
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, float 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게
gogogameboy.tistory.com
생활코딩 강의 영상으로 공부를 하는 중인 CSS.. 이제 그 CSS 영상들도 3분의 1도 남지 않았습니다.
이번에 배울 내용은 배경 background입니다.
background
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
background-repeat는 배경 이미지를 욕실 타일 붙이듯이 반복하는 속성입니다.
넣을 수 있는 값은 repeat, repeat-x, repeat-y, no-repeat 등이 있습니다.
background-attachment를 fixed로 하면 배경이 고정이 되어서 스크롤을 내려도 배경이 움직이지 않습니다.
background-size에 픽셀 값을 지정하지 않고 cover나 contain을 넣는 방법도 있습니다.
cover는 엘리먼트 안을 이미지로 가득 채웁니다. 이미지와 엘리먼트의 비율이 맞지 않을 경우엔 이미지가 잘립니다.
contain은 이미지를 엘리먼트 안에 전부 집어넣습니다. 그래서 이미지와 엘리먼트의 비율이 맞지 않으면 엘리먼트에 빈 공간이 생기게 됩니다.
background-repeat가 no-repeat 상태이고, background-attachment와 background-size 값이 없을 때,
background-position으로 배경 이미지의 위치를 지정할 수 있습니다.
넣을 수 있는 값에는 left top, right top, left bottom, right bottom, center 등이 있습니다.
위의 많은 효과들을 축약해서 넣을 수 있습니다.
background: tomato url('내 캐릭터-01.png') repeat fixed center; 와 같은 식으로 하면 됩니다.
다음 포스트
CSS 이미지나 폰트에 필터 적용하기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 배경 색과 이미지 이 포스팅은 PC로 작성되었습니다. 모바일로 보시
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 블렌드 모드 (0) | 2021.01.10 |
|---|---|
| CSS 이미지나 폰트에 필터 적용하기 (0) | 2021.01.09 |
| CSS, float 속성을 이용해서 만드는 Holy Grail Layout (0) | 2021.01.08 |
| CSS, float (0) | 2021.01.07 |
| CSS, Media Query를 이용해 반응형 홈페이지 만들기 (0) | 2021.01.06 |
댓글