자신의 웹사이트나 블로그를 운영중이신 분들은 기본적인 html을 아는것이 중요한데요.
그 중에서 기본적으로 알아두면 좋은 html 배경 이미지 넣기 방법에 대해서 알아보겠습니다.
보통 body나 div 태그를 이용하여 영역을 지정하고 background 옵션에 URL을 설정하면 되는데요.
이번 시간에는 html 배경 옵션에 따라 출력 되는 이미지를 설정하는 등의 다양한 옵션들을 알아보겠습니다.
1. TAG에 직접 지정
보통 html 파일에는 body라는 태그가 존재하는데요. 여기 한번 배경을 적용해 보겠습니다.
해당 영역에 background 기능을 통해 주소를 적어주면 해당 이미지를 배경으로 지정하게 됩니다.
2. CSS 에서 지정
1번의 방법과 같이 할경우 html 소스가 지저분 하게 되고 웹표준 준수에 어긋날 수가 있습니다.
그래서 보통 모든 태그들의 속성들은 css로 분배하여 정하는것이 좋은데요.
위와 같이 css의 body에 background-image 주소를 적어서 html 배경 이미지 넣기 기능을 구현할 수 있습니다.
1번과 2번 모두 위와 같은 동일한 결과를 보여주고 있습니다.
3. 배경 반복 해제
윈도우에서 바탕화면을 지정해 보신분들이라면 바둑판식 배열이라고 들어보셨을 텐데요.
1번, 2번의 방법과 같이 지정하면 해당 배경이 바둑판식으로 설정되게 됩니다.
이를 해제하기 위해선 해당 background css에 repeat 속성을 지정해 주면 좋습니다.
위와 같이 body 옵션에 no-repeat을 지정해 주도록 합니다.
no-repeat 지정으로 인해 html 배경 이미지가 반복되지 않고 단일로 지정되어 출력되는 모습입니다.
위와 같은 방식과 옵션으로 자신의 웹사이트 html 배경 이미지 넣기 기능을 구현할 수 있는데요.
기회가 되면 다양한 옵션으로 웹사이트에 배경을 넣는 방법을 소개하도록 하겠습니다.
질문자
배경을 폴더에 저장된 이미지를 넣을려면 폴더 경로를 복사해서(“주소”)라고 적혀있는 곳에 넣으면 되나요?
관리자
네 주소 부분에 경로를 넣어주심 됩니다.