8. 배경(Background)과 경계(Border), 여백
여러분이 HTML5에서 배경, 경계, 여백을
이해하기 위해서는 기본적으로 HTML 요소들을 웹 브라우저를 나타낼 때 어떻게 나타내는지 아는 것은
학습에 대단히 도움이 됩니다.
HTML 요소들이 웹 브라우저에 표현될 때 직사각형 영역 안에 나타내며 해당 영역 안에는 컨텐츠(내용)가 들어가는 직사각형 형태가 존재하게 됩니다. 그래서 요소 내부에는
직사각형 형태의 컨텐츠와 요소에 해당하는 직사각형 사이의 여백을 padding이라고 하고 이를 상, 하, 좌, 우로 구분하여
나타내면 아래 그림과 같이 나타낼 수 있습니다.
다음으로 요소의
경계(border)를 실선(solid line)으로 나타낼
지 아니면 점선(dotted line)으로 나타낼 지 등을 설정하는데
border 속성을 이용합니다.
또한 HTML 문서 내에 위치하는 요소는 외부에 여백을 설정할 수 있는데 이 때 사용하는
여백이 외부 여백 즉 margin을 이용하여 설정하게 되며 이 외부 여백 역시 상, 하, 좌, 우를 구분하여
아래와 같이 나타낼 수 있습니다. 이를 바탕으로 배경(background)부터
차례대로 사용방법을 알아봅니다.
8.1 배경(background)과 관련된 속성들
여기서는 background-color, background-image, background-repeat, background-attachment, background-position과 background 속성에 대하여 설명합니다.
8.1.1 background-color 속성
background-color 속성은 해당 요소의 배경색을 설정하는데 사용하는 속성으로 다음과 같은 형식을 사용합니다.
background-color : 속성값
속성값으로는 기본값으로 “transparent”, 즉 투명하게 설정되어 있으며 필요한 색을 RGB값의 형태를 설정하거나 부모 요소로부터 상속받아 적용되는 “inherit”로 설정될 수 있습니다.
메모장을 열어서 HTML 문서의 기본적인 구조를 작성하고 <body>…</body> 블록을 다음과 같이 작성합니다.
<body>
<h1>background-color의 사용</h1>
<p>p요소의 바탕색은 파랑색입니다.</p>
</body>
이제 스타일을 적용하기 위해 <style>…</style> 블록을 다음과 같이 작성합니다.
<style>
body{background-color: #000;}
h1{ background-color: yellow;}
p{background-color: #00f;}
</style>
위에서 body 요소의 배경색을 검정, h1 요소의 배경색을 노란색, 마지막으로 p 요소의 배경색을 파란색으로 설정한 후 “background-colorEx.html”로 저장하고 IE9를 통해 보면 다음과 같습니다.
8.1.2 background-image 속성
background-image 속성은 해당 요소의 배경으로 이미지(image)를 설정하는데 사용하는 속성으로 다음과 같은 형식을 사용합니다.
background-image : 속성값
속성값으로는 기본값으로 “none”이며 이는 배경 이미지가 없다는 것을 의미합니다. 이미지가 있는 URL을 이용해서 배경으로 사용할 이미지를 속성값으로 설정하거나 부모 요소로부터 상속받아 적용되는 “inherit”로 설정될 수 있습니다.
background-image 속성을 사용하여 배경 이미지를 설정할 때 혹시라도 배경 이미지로 선택된 이미지가 사용이 불가능할 수도 있으므로 background-color 속성과 함께 사용해주는 것이 좋습니다.
“background-colorEx.html”을 메모장을 열고 <body>…</body> 블록을 다음과 같이 수정합니다.
<body>
<p>오늘을 마지막 날이라 생각하며 살자.</p>
</body>
이제 background-image 속성을 적용해볼까요? <style>…</style> 블록을 다음과 같이 작성합니다.
<style>
body { background-image: url("flower2.jpg");
background-color: #000; }
p { color:white; }
</style>
위와 같이 “flower2.jpg” 이미지를 배경 이미지로 설정하고 배경색을 검은색으로 설정하였고 p 요소의 색은 흰색으로 설정합니다.
그 다음 다른 이름으로 저장을 선택하고 “background-imageEx.html”로 저장한 후 IE9를 통해 보면 다음과 같이 나타납니다.
8.1.3 background-repeat 속성
background-repeat 속성은 background-image 속성에 의해 배경 이미지가 설정된 상태에서 사용할 수 있는 속성으로 방금 전 예제 “background-imageEx.html”에서처럼 이미지가 반복해서 나타낼지 아니면 한 번만 나타낼 지 등을 설정하는 속성으로 다음과 같은 형식을 따릅니다.
background-repeat : 속성값
속성값으로는 기본적으로 반복하는 “repeat”로 설정이 되며 수평적으로만 반복하는 “repeat-x”, 수직적으로만 반복하는 “repeat-y”와 이미지가 한 번만 출력되고 반복하지 않는 “no-repeat” 값 등이 올 수 있습니다. 메모장으로 “background-imageEx.html” 연 후 <style>…</style> 블록을 다음과 같이 수정합니다.
<style>
body { background-image: url("flower2.jpg");
background-color: #000;
background-repeat: repeat-x; }
p { color:white; }
</style>
위와 같이 수평적으로만 반복하도록
background-repeat 속성을 이용하여 정의한 후 다른 이름으로 저장을 선택하여 “background-repeatEx.html”로
저장한 후 IE9를 통해 보면 다음과 같이 수평적으로 “flower2.jpg”
이미지가 나타나게 됩니다.
여러분들은 <style>…</style> 블록 내에서 background-repeat 속성값을 바꿔가면서 결과를 확인해보기 바랍니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 8.2 내부 여백인 padding, 경계(border), 그리고 외부여백(margin) (0) | 2013.08.04 |
|---|---|
| 8.1.4 background-attachment 속성 (0) | 2013.08.04 |
| 7.7 Text Decoration (0) | 2013.08.04 |
| 7.6 text-indent 속성을 이용한 들여쓰기 (0) | 2013.08.04 |
| 7.5 문장 내 간격(Spacing) 처리하기 (0) | 2013.08.04 |
