html 배경이미지 넣기
■ 홈페이지 전체의 분위기 또는 특정 요소의 분위기를 결정짓는 것 중 가장 중요한 것이 배경이미지 일 텐데요. 어떤 그림을 어떻게 넣느냐에 따라서 그 웹 페이지의 분위기가 확 바뀌게 됩니다. 배경이미지에 대한 속성들이 너무 많기 때문에 한 번에 모두 정리할 수는 없을 것 같구요. 이 글에서 못다 한 내용은 다음 글에 이어서 순서대로 하나씩 정리해보겠습니다. 이번 글에서는 가장 먼저 웹 문서 전체의 배경을 이미지로 채우는 속성을 몇 가지 알아볼게요.
■ 먼저 배경이미지를 넣는 형식은 [background-image:url(파일 경로);]입니다. 여기서는 <body>전체의 배경을 이미지 한 장으로 채워볼 텐데요. 만드는 웹 페이지의 크기와 준비한 이미지의 크기가 같으면 크게 문제 되지 않겠지만, 준비한 이미지가 작을 때는 해당 이미지가 반복해서 배경을 채워나가게 되는데요. 물론 반복하지 않게 할 수도 있습니다. 반복하지 않을 때는 준비한 이미지와 비슷한 색을 배경색으로 지정해주면 이미지가 짧더라도 배경색이 채워주니까 좀 더 자연스럽게 연출이 될 거에요. 먼저 이 과정을 진행해볼게요.
■ 이런 그림을 하나 준비하고 배경으로 채워보겠습니다.
■ body에 id="aaa"를 할당해서 형식에 맞게 배경이미지를 넣었습니다. 그림이 크기가 작아서 계속 반복되면서 화면을 채우게 될 것입니다.
■ 이게 기본값 입니다(repeat). 그럼 그림들이 반복되지 않도록 설정해보겠습니다.
■ 반복되지 않도록 하는 속성은 no-repeat입니다. 예제처럼 [background-repeat : no-repeat;] 로 설정해주면 아래 그림처럼 그림 한장만 나타나게 되는데요.
■ 이렇게 그림이 웹 페이지보다 작을 때는 왼쪽 위 모서리를 기준으로 위치하게 됩니다. 이 중앙으로 옮겨볼게요.
■ 이미지를 위치를 지정해주는 속성은 [background-position]인데요. 그림처럼 가로 세로 각각 50%로 지정해주면 됩니다.
■ 그림처럼 중앙에 위치하게 되구요. 여기서는 일부러 그림을 작은 걸 준비했지만 실제로는 이렇게까지는 공간이 많이 생기지는 않겠죠? 아무튼, 빈공간의 색을 그림의 배경색과 비슷한 색으로 채워버리면 좀 더 자연스럽게 될 거에요.
■ 배경의 색을 지정해주는 속성은 [background-color: 색]입니다. 조금 비슷한 색을 찾아본다고 했는데 차이가 많이 나네요.ㅠ.ㅠ
■ 여기서 중요한 건 준비한 배경이미지가 웹 페이지보다 작더라도 배경색을 비슷한 색으로 채워서 자연스럽게 연출할 수 있다는 겁니다.
■ 마지막으로 배경이미지의 기본설정은 그림이 반복(repeat)하면서 화면을 채워나간다고 앞에서 알아봤는데요. 화면을 채워나갈 때 특정방향으로만 반복하게 할 수 있는 속성을 알아볼게요. 그림이 작아서 왼쪽 위 모서리에서 시작할 때 기본값은 오른쪽과 아래로 모두 반복이 되거든요. 그런데 이 방향을 하나로만 지정할 수도 있습니다. 즉, 오른쪽이나 아래쪽 한 방향만 선택할 수도 있습니다. 속성값에 repeat-x 또는 repeat-y를 넣어주면 되는데요. 예제에서는 'repeat-x'로 해볼게요. "y"는 직접 해보세요.^^;
■ 속성값에 "repeat-x"값을 넣어줬습니다.
■ 이렇게 오른쪽으로만 반복돼서 채워나가게 됩니다. 이 부분도 참고로 알고 계시다가 응용해보세요.
배경이미지에 대한 속성이 몇 가지 더 있는데요. 그 부분은 다음 글에 이어서 정리할게요. 수고하셨습니다.
