[HTML] 배경 색, 이미지 변경하기(CSS 도 포함)
이번 html 강좌는 백그라운드 변경하는 방법입니다. HTML페이지 전체에 이미지나 색상을 넣는건데요.
색을 추가하는 방법과 이미지를 추가하는 코드가 다릅니다.
여기에 HTML 에서 코딩하는 방법이 있고 CSS를 통해서 코딩하는 방법이 있습니다.
어렵지 않은 부분이니 모두 알아보도록 하겠습니다.
기본 HTML을 준비했습니다. 단순히 <BODY> 태그와 내용에는 배경색 변경하기 라는 글자가 있습니다.
본문 전체에 배경색이나 이미지를 지정하려면 <BODY> 태그 안에서 하면 되는데요
먼저 배경색을 넣어보도록 하겠습니다.
1 2 3 | <body bgcolor="yellow"> 배경색 변경하기 </body> | cs |
브라우저에 실행하면 전체 배경이 노란색으로 되는것을 확인할 수 있습니다.
색상코드로 배경을 설정할 수 있는데요. 색상코드를 사용하면 좀더 디테일한 색상을 설정할 수 있습니다.
노란색의 색상코드는 FFFF00인데요. 아래 색상코드 사이트에서 참고하시면 됩니다. 코드는 bgcolor를 사용합니다.
http://tv.lovepw.cf/View/ColorTable/ColorMain
1 2 3 | <body bgcolor="#FFFF00"> 배경색 변경하기 </body> | cs |
이미지를 배경으로 삽입할 수 있습니다.
이미지는 색상과 다르게 background를 사용합니다.
HTML 파일과 동일한 폴더에 이미지 파일이 있을경우 입니다. 이미지 삽입 방법은 아래 강좌를 참고하세요
1 2 3 | <body background="5.jpg"> 배경색 변경하기 </body> | cs |
이미지가 배경으로 되었습니다.
css로 이미지 및 배경을 설정할 수 있습니다. html 코딩에서 사용하는 코드가 다릅니다.
먼저 색상을 사용할 경우 입니다.
style ="background:yellow" 이렇게 사용됩니다.
1 2 3 | <body style ="background:yellow" > 배경색 변경하기 </body> | cs |
css를 이용해서 이미지를 사용할 경우에는 url을 사용해야 합니다. url 부분에 이미지 파일명을 넣으시면 됩니다.
style="background:url('5.jpg')"
1 2 3 | <body style="background:url('5.jpg')" > 배경색 변경하기 </body> | cs |
지금 까지 [HTML] 배경 색, 이미지 변경하기(CSS 도 포함) 방법을 알아보았습니다.
