position:위치지정
float: 흐름제어(right, left)
display: 출력유형 (block, inline)
[test.css]
@CHARSET "EUC-KR";
body{
margin: 50px 80px;
border: 1px solid #ff0000;
font: normal 12px/18px 'Helvatica' Arial san-serif;
}
#container{
width: 900px;
border: 1px solid #00ff00;
margin: 10px auto;
}
#header{
height: 50px;
border: 1px solid #0000ff;
}
#header div{
border: 1px solid #00ffff;
float: left;
}
#header #key {
clear: right;
}
#sidebar{
border: 1px solid #232323;
position: relative;
float: right;
margin: 50px;
top: 0px;
bottom: 0px;
right: 10px;
width: 70px;
}
#content{
border: 1px solid #ffff00;
}
[csstest.jsp]
<link rel="stylesheet" href="./test.css">
<body>
<div id="container">
<div id="header">
<div>1절가사</div>
<div>2절가사</div>
<div id="key">3절가사</div>
<div>4절가사</div>
</div>
<div id="content">
<div id="sidebar">
<p>무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세</p>
</div>
<p>동해물과 백두산에 마르고 닳도록 하느님이 보우하사 우리나라만세</p>
<p>남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리기상일세</p>
<p>가을하늘 공활한데 높고 구름없이 밝은달은 우리가슴 일편단심일세</p>
<p>이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라사랑하세</p>
</div>
<div id="footer">
애국가의 작곡가 안익태 선생님
</div>
</div>
</body>
'강의노트 > 웹' 카테고리의 다른 글
| web.xml (0) | 2014.03.10 |
|---|---|
| DB연결하기 (0) | 2013.07.17 |
| JSTL XML 태그 (0) | 2013.07.11 |
| JSTL SQL 태그 (0) | 2013.07.11 |
| JSTL 국제화 지역화 태그 (0) | 2013.07.10 |