-
[코딩3] html 배경색 + 배경이미지 추가코딩의 즐거움/HTML 2020. 10. 7. 15:49
html 배경색
<body> 태그안에 bgcolor="색상이름" or bgcolor="색상코드"를 넣어주면 된다.
나는 red(색상이름) 컬러를 넣었다.
빨간색의 색상코드는 #ff0000
색상코드는 검색하면 쉽게 알 수 있다.
저장을 하고 웹페이지를 열어주면,
bgcolor로 지정한 색상이 배경색으로 들어간 걸 확인할 수 있다.
색상코드 구성 맛보기
RRGGBB로 RED(빨간색) GREEN(초록색) BLUE(파란색)으로 구성 = RGB
각자리별로 16진수 사용 : 0~9 A~F
0에 가까울수록 어둡고 F에 가까울수록 밝아진다.
ex)
red(빨간색) -> #ff0000
white(흰색) -> #ffffff (f에 가까울수록 흰색이니 전체 f)
black(검정색) -> #000000 (0에 가까울수록 어두우니 전체 0)
html 배경이미지 삽입
배경이미지는 태그를 적어주기 전에 경로설정을 먼저 해줘야 한다.
연습폴더 안에 진행중인 html 파일을 넣고
연습 폴더안에 images라는 이미지폴더를 하나더 만들어서
그안에 이미지를 넣어준다.
정해진 경로가 잘못 되었을 경우,
이미지가 제대로 않나타날수도 있으므로 동일하게 설정해줘야 한다.
image.png 나는 이전에 만들어뒀던 돋보기 이미지를 넣어보려고 한다.
이름.확장자는 image.png로 저장했다.
배경색과 마찬가지로 <body> 태그 안에 background="경로(폴더이름)/이미지이름.확장자"를 적어준다.
경로지정은 헷갈리기 때문에 나도 위에 정해진 위치에다가 매번 동일하게 저장해서 사용한다.
저장을하고 웹페이지를 열어보면
동일한 이미지가 연속되서 보여진다.
나는 가로 40픽셀 세로 40픽셀의 작은 이미지를 사용했기때문에
위와같이 엄청난 양이 무한 반복되서 나타났다.
배경색과 배경이미지 동시에 주기
어렵게 생각할 것 없다.
배경색과 배경이미지 둘다 나타나게 하려면
둘 다 적어주면 된다.
물론 body 태그 안에다 적어야 된다는 것 잊지말자.
bgcolor 적고 한칸 띄고 background를 적어주면된다.
이번에는 색깔만 다르게 베이지컬러로 넣어봤다.
레드가 너무 강렬한것 같애서 바꿔봤다.
마찬가지로 저장하고, 웹페이지를 열면,
베이지색과 이미지가 동시에 나타나는 걸 볼 수있다.
이미지를 한번만 나타나게 하고싶다면 css를 사용해야 한다.
사실 실습할 때 body 태그에 background와 bgcolor를 이용해서 웹페이지를 만든 적은 없다.
html에는 텍스트를 적고,
css로 디자인을 한다고 한다.
현역으로 일하다가 강사를 하고 있는 쌤의 말이니 맞지 않을까?
아직 배우는 단계인 나로써는 그렇다면 그런줄 알고 열심히 배울 뿐이다.
html이 기본 언어이니 만큼
배워둬서 나쁠 건 없다고 생각한다.
아는 만큼 보인다고, 한단계 한단계 나아갈 뿐이다.
'코딩의 즐거움 > HTML' 카테고리의 다른 글
[코딩6] body 여백 (0) 2020.10.12 [코딩5] html 링크 걸기 & 텍스트 색 바꾸기 (0) 2020.10.10 [코딩4] html 제목 태그 <h1> ~<h6> & 문단태그 <p> & 줄바꿈 태그 <br> (0) 2020.10.09 [코딩2] HTML 기본 구조 - title & body 실습 (0) 2020.10.06 [코딩1] HTML 편집기 - 에디트플러스 EditPlus & 아톰 Atom (0) 2020.10.05