HTML로 배경이미지와 색상 넣어주기

HTML로 배경이미지와 색상 넣어주기HTML로 배경이미지와 색상 넣어주기

Posted at 2015. 1. 18. 18:01 | Posted in HTML 배우기

배경이 약간 밋밋하다는 느낌이 들 때에는

색깔을 바꾸어주거나 이미지를 넣어줌으로써

분위기를 바꿔 줄 수 있겠죠.

그다지 전혀 복잡한 태그는 아니니

긴장은 할 필요는 없을듯 합니다.

1. HTML을 사용하여 배경 색상 바꾸기

<body bgcolor="#E4E8AD">
안녕하세요.
</body>

길어보이지만 이 중에서 중요한 핵심은 핑크색 부분의 태그입니다.

글자의 위치는 중간으로 해두었는데,

좌측이나 우측으로 바꾸는 방법은 아래의 글 참고하세요.

그 외의 태그는 글자의 크기나 색깔 등에 해당하므로

크게 중요한 부분은 아닙니다.

위의 태그를 실행한 결과는 위의 그림과 같습니다.

저는 위에 빈칸을 몇개 두어서 중간쯤에 글을 올렸습니다.

 
 

위와 같은 태그를 사용하면 세줄의 빈칸이 생깁니다.

응용해보면 반복이 한개일 경우 한칸의 엔트,

일곱번일 경우 일곱번의 엔트가 되는 셈이죠.

2. HTML을 사용하여 배경이미지 넣기

위의 사진은 제가 디카를 이용하여 찍은 나무의 근접사진입니다.

이 사진을 배경으로 한 페이지를 만들어 보도록 하겠습니다.

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" background="백그라운드 이미지 주소">
안녕하세요.

</body>

저는 사진 크기를 1400으로 했기 때문에 아래와 같이 배경사진이

하나로서 나타나게 되었습니다.

이미지가 조금 작을 경우에는

작은 사진이 여러개로 반복하여 나타나게 됩니다.

여기서도 칸을 조금 띄워서 적고 싶다면,

위에서 띄워쓰기의 신공을 사용하시면 되겠습니다.

이렇게 백그라운드 이미지를 넣어주니

글자를 얼마 쓰지도 않았는데도,

페이지의 분위기가 완전이 업되는 느낌이 듭니다.