2024-10-10
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#first {
line-height: 200%;
}
#second ul li {
line-height: 2;
list-style: square;
}
#third ul li {
line-height: 2;
list-style: circle;
}
#first {
float: left;
}
#second {
float: left;
margin-left: 170px;
}
#third {
float: left;
margin-left: 170px;
}
.foot {
clear: both; /* float 속성을 해제시키는 값 */
margin-left: 200px;
}
</style>
</head>
<body>
<!--
float 속성
- 웹 문서의 요소를 떠 있게 하는 속성.
- 수직적인 요소를 수평적인 요소로 바꾸어 주는 속성.
- 왼쪽 구석이나 오른쪽 구석에 배치한다는 의미.
- 문서의 레이아웃을 구성하기 위해서 많이 사용되는 속성.
- float 속성의 값
* right : 오른쪽부터 차례로 왼쪽 방향으로 떠 있게 함.
* lefe : 왼쪽부터 차례로 오른쪽 방향으로 떠 있게 함.
* both : 양쪽 어느 쪽도 떠 있지 않게 함.
==> 해제하는 값.
- float 속성을 사용한 후에는 반드시 해제(clear: both;)
해 주어야 함.
-->
<div id="first">
<h2>회사소개</h2>
<ul>
<li>대표인사말</li>
<li>조 직 도</li>
<li>비 전</li>
<li>오시는 길</li>
</ul>
</div>
<div id="second">
<h2>사업영역</h2>
<ul>
<li>포털사이트</li>
<li>시스템통합</li>
<li>마케팅</li>
<li>웹디자인</li>
</ul>
</div>
<div id="third">
<h2>고객센터</h2>
<ul>
<li>다운로드</li>
<li>질의/응답</li>
<li>자유게시판</li>
<li>1:1 게시판</li>
</ul>
</div>
<address class="foot">
서울시 마포구 신촌로 176 중앙빌딩
</address>
</body>
</html>
