CSS background 배경 관련 스타일(background-image, background-repeat)

CSS background 배경 관련 스타일(background-image, background-repeat)

 

background-image

  - background-image 속성을 사용하면 배경에 이미지를 넣어줄 수 있습니다.

  - 기본형은 아래와 같습니다.

  - 선택자 { background-image: url(파일 경로); }

  - 파일 경로는 상대 경로와 절대 경로로 지정해줄 수 있습니다.

  - 상대 경로란 index파일을 기준으로 지정하는 방법입니다. 자세한 내용은 아래를 참고해주세요.

2020/10/11 - [홈페이지 만들기/1단계. HTML] - HTML 이미지(img) 태그: 태그와 경로 설정(src / ..)

  - 절대 경로란 'http://'로 시작하는 경로를 말합니다.

  - 절대 경로를 지정하면 웹 상에 있는 이미지를 가져올 수 있는 장점이 있습니다. 그러나 원본 이미지가 삭제 및 수정 되면 사용할 수 없는 제한 사항이 있습니다. 또 저작권이 문제가 될 수도 있겠지요.

  - 절대 경로를 가져오기 위해서는 이미지를 우클릭해서 '이미지 주소 복사'를 누르면 됩니다. 그러면 이미지 주소가 복사되는데 그것을 파일 경로에 넣어주면 됩니다.

  - 위 예시에서는 상대 경로를 사용하여 이미지 파일을 삽입해주었습니다.

  - index.html 파일과 같은 위치에 이미지 파일이 있기 때문에 파일 경로를 'url(cat.jpg)'라고만 써주면 되었습니다.

  - 배경이 되는 이미지가 채우려는 요소 크기보다 작을 경우, 해당 요소를 가득 채울 정도로 가로와 세로로 반복됩니다.

 - 위 예시에서 원래 원본 이미지는 '줄넘기를 하는 고양이 한 마리'입니다. 그런데 body가 화면을 꽉채우므로 고양이가 가로·세로로 반복되어 나타난 것입니다.

 

background-repeat

012

  - background-repeat 속성을 사용하면 배경 이미지 반복 방법을 지정해줄 수 있습니다.

  - 위에서 설명하였듯이 배경 이미지가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시됩니다.

  - 따라서 이러한 경우에는 배경 이미지 반복 방법을 지정해주는 것이 좋습니다.

  - 기본형은 아래와 같습니다.

  - 선택자 { background-repeat: 속성값; }

  - 속성값으로는 repeat, repeat-x, repeat-y, no-repeat이 들어갈 수 있습니다.

  - repeat은 배경 이미지를 가로와 세로로 반복합니다. 속성값을 입력하지 않았을 때는 repeat이 기본값이 됩니다.

  - repeat-x는 배경 이미지를 가로로 반복합니다.

  - repeat-y는 배경 이미지를 세로로 반복합니다.

  - no-repeat은 한 번만 표시하고 반복하지 않습니다.

  - 위 예시 이미지를 보면, 첫 번째 이미지가 repeat-x를, 두 번째 이미지가 repeat-y를, 세 번째 이미지가 no-repeat을 사용한 것입니다.

 

  그럼 오늘은 이만 :D