Box Model을 이용한 게시판 형태 만들기
CSS에서 대부분의 HTML 요소(Element)들은 직사각형의 Box 형태로 나타낼 수 있으며 이에
대해서는 이미 여러분들이 여기까지 따라 하셨다면 쉽게 이해할 수 있는 부분일 것입니다. 이번에는 이러한 Box Model을 이용하여 다음과 같이 ol(ordered
list) 요소 내에 li 요소를 여러 개 포함하는 형태의 게시판과
유사한 형태를 만들어 보고자 합니다.
기본적으로 ol 요소는 정렬된 리스트를 나타내는데 사용하는 요소이므로 특별한 설정을 하지 않아도 기본적으로 1, 2, 3 형태로 ol 요소에 포함된 li 요소를 나타내게 됩니다.
따라서 기본적인 ol 요소에 숫자가 아닌 다른 형태를 설정하거나 아니면 아예 나타내지 않기
위해서는 CSS3에서는 다음과 같은 형식을 사용하여 처리할 수 있습니다.
list-style-type : decimal | circle | square | lower-roman | upper-roman | …
decimal은 1, 2, … 형태로 나타내고 circle은 빈 공백 형태, square는 검은 색의 직사각형의
채워진 형태, lower-roman은 소문자로 로마자,
upper-roman은 대문자로 로마자를 나타내게 되며 만일 아예 나타내지 않을 경우는 “none”으로
설정해주면 됩니다.
그리고 list-style-type은 축약형으로 “list-type
: none” 과 같은 형태로 사용할 수 있습니다.
다음으로 box model에서 알아야 할 속성은
float 속성입니다. float 속성은 box 형태의
요소(Element)가 현재 행의 왼쪽(left), 혹은
오른쪽(right)으로 밀려나도록 하는데 사용하는 속성으로 다음과 같은 속성값으로 설정할 수 있습니다.
float : left | right | none | inherit
위에서 left는 왼쪽, right는 오른쪽, none은 float 속성 적용 안함, inherit는 부모 요소(Element)의 float 속성값을 상속함을 나타냅니다.
일반적으로 위에서 사용된 div, p, image, h1,h2,.. 등과 같은 대부분의
요소(Element)들은 하나의 요소(Element)가 나타내면
다음 라인에 나타나게 됩니다. 그런데 float 속성을 이용하면
이러한 규칙을 무시하고 부모 요소의 왼쪽(left), 오른쪽(right)에
붙게 됩니다. 따라서 이러한 float 속성을 이용할 경우
바로 이어지는 예제에서와 같이 그럴 듯한 형태로 웹 페이지를 구성할 수 있습니다.
이제 예제를 해볼까요? 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title> </title>
<style>
</style>
</head>
<body><ol>
<li class="comment">
<div class="comment-detail">
<img src="images/Buyong.png" width="80" height="80" alt="" />
<h4>부용정(芙蓉亭)</h4>
<span>1707</span>
</div>
<blockquote cite="http://www.cdg.go.kr/guide/guide_course_02.htm">
<p>부용정(보물 제 1763호)은 열십자 모영의 독특한 평면 형태, 공간구성, 거눔의
장식 등이 뛰어난 비례와 대배를 이루고 있어 건물의 아름다움의 극치를 보여주고 있는
한국정자건축의 대표적인 건물이다.</p>
</blockquote>
</li>
<li class="comment">
<div class="comment-detail">
<img src="images/Aeryeonji.png" width="80" height="80" alt="" />
<h4>애련지(愛蓮池), 애련정(愛蓮亭)</h4>
<span>1692</span>
</div>
<blockquote>
<p>애련지(愛蓮池)와 애련정(愛蓮亭)은 숙종 18년에 만들어진 것으로 숙종은 "애련정기"
에서 '연꽃은 더러운 곳에 있으면서도 변하지 않고 우뚝서서 치우치지 아니하며 지조가
굳고 맑고 깨끗하여 군자의 덕을 지녔기 때문에 이러한 연꽃을 사랑하여 정자의 이름을
애련정이라고 지었다'고 밝히고 있다.</p>
</blockquote>
</li>
<li class="comment">
<div class="comment-detail">
<img src="images/Jondeokjeong.png" width="80" height="80" alt="">
<h4>존덕정(尊德停)</h4>
<span>1644</span>
</div>
<blockquote>
<p>존덕정(尊德停)은 육각정자 형태로 겹지붕이 특이하다.</p>
<p>내부에는 '萬川明月主人翁自序' 라는 정조의 친필이 새겨진 현판이 걸려있다.</p>
</blockquote>
</li>
</ol>
</body>
</html>
위와 같이 작성한 후 “changdeokgung.html”로 저장한 후 브라우저를 이용하여 다음과 같이 서버에 웹 서버에 연결하여 보면 다음과 같이 나타납니다.
위에서 보는
것처럼 왠지 어색한 결과입니다. 이 결과를 조금 게시판의 형태처럼 만들어볼까요?
위 코드에서 <style> </style> 내부에 다음과 같이 코드를
작성합니다.
<style>
body {
margin: 0;
padding: 20px;
background: url(images/background1.png);
font-family:"굴림체",GulimChe,
Lucida Sans, Arial, Helvetica, sans-serif;
}
ol {
margin: 0;
padding: 0;
list-style-type: none;
}
.comment {
float: left;
width: 100%;
margin: 0 0 20px 0;
}
.comment-detail {
float: left;
width: 100px;
font-size: 12px;
text-align: right;
}
h4 {
margin: 0;
font-size: 11px;
font-weight: normal;
line-height: 1;
}
.comment-detail span {
font-size: 11px;
color: #666666;
}
blockquote {
margin: 0 0 0 112px;
padding: 10px 15px 5px 15px;
border-top: 2px solid #ffffff;
background-color: #a6dadc;
}
blockquote p {
margin: 0;
padding: 0 0 10px 0;
}
위와 같이 작성, 저장한 후 웹 서버에 연결하여 보면 다음과 같이 나타납니다.
이제 마지막으로 blockquote 요소의 테두리를 둥그렇게 만들어볼까요? <style> …</style> 블록 안의 blockquote 요소 스타일 적용 부분에 다음과 같이 코드를 추가합니다.
blockquote {
margin: 0 0 0 112px;
padding: 10px 15px 5px 15px;
border-top: 2px solid #ffffff;
background-color: #a6dadc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
위에서 테두리를
둥그렇게 만드는 방법은 기본적으로 border-radius 속성을 이용하는데 웹 브라우저별로 적용하는
것이 다르므로 Firefox 같은 웹 브라우저를 위해 “-moz-border-radius”,
Safari, Chrome 같은 브라우저에는 “-webkit-border-radius”를 이용하여 테두리를 둥글게 설정합니다.
창덕궁 비원
관련 이미지는 (“http://www.cdg.go.kr/guide/guide_course_02.htm”)의
이미지를 사용하였습니다. 그리고 배경 이미지로 사용된 “background1.png”는
나인글로리(http://9glory.com/)의 무료 전통무늬 소스를 이용하였습니다. 좋은 이미지를 사용할 수 있도록 해주신 디자이너 분께 지면을 통해 감사함을 전합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년
여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본에 더하여 2013년 4 월경 반드시 출간된다는 확답을 들은 후 추가 원고작업으로 작성한 것으로 출처가 명시된 이미지를 제외한 본
저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나
펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로
학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 차트(Chart) 만들기 - 막대 그래프 (2) | 2013.08.08 |
|---|---|
| 칼라 이미지를 Grayscale 이미지로 나타내기 (0) | 2013.08.08 |
| 2.sessionStorage (0) | 2013.08.08 |
| 7장 Web Storage (0) | 2013.08.08 |
| 6장 Drag and Drop (0) | 2013.08.08 |