오늘은 레이아웃 설정에 대해 알아보도록 합시다.
보통 일반적으로 <화면구성>은
- 상단영역 : header
- 카테고리 메뉴(네비게이션) : nav
- 본문영역 : section
- 하단영역 : footer
이렇게 4영역으로 이루어 집니다.
<!DOCTYPE html>
<html>
<head>
<title>::: 16_HTML_태그소개_레이아웃_설정하기 :::</title>
<style>
/* 상단영역(header) */
#header{
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
/* 카테고리(네비게이션) 메뉴 영역(nav) */
#nav {
background-color: #eeeeee;
width: 100%;
height: 30px;
padding: 10px;
text-align: center;
}
/* 본문 내용영역(section) */
#section{
background-color: aqua;
width: 50%;
padding: 10px;
}
#section2{
background-color: yellow;
padding: 10px;
}
/* 하단 영역(footer) */
#footer{
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<!-- div는 이어쓰면 아래로 내려감 즉 옆으로 자리 차지 -->
<!-- (화면구성)
- 상단영역 : header
- 카테고리 메뉴(네비게이션) : nav
- 본문 영역 : section
- 하단영역 : footer
-->
<!-- 상단영역(header) -->
<div id = "header">
<h1>Index Site : 상단 영역</h1>
</div>
<!-- 카테고리(네비게이션:nav) -->
<div id = "nav">
<a href = "http://www.daum.net">Daum</a>
<a href = "http://www.naver.com">Naver</a>
<a href = "http://www.google.com">Google</a>
</div>
<!-- 본문 내용 : Section -->
<div id = "section">
<h2>공지사항</h2>
<ul>
<li>[필독] 금일 공지사항</li>
<li>[필독] 금일 공지사항</li>
<li>[필독] 금일 공지사항</li>
<li>[필독] 금일 공지사항</li>
<li>[필독] 금일 공지사항</li>
</ul>
</div>
<div id = "section2">
<h2>질문 답변</h2>
<ul>
<li>[필독] 금일 질문사항</li>
<li>[필독] 금일 공지사항</li>
<li>[필독] 금일 공지사항</li>
<li>[필독] 금일 공지사항</li>
<li>[필독] 금일 공지사항</li>
</ul>
</div>
<!-- 하단 영역 : footer -->
<div id = "footer">
Copyright c Corp. All rights reservde.
</div>
</body>
</html>Index Site : 상단 영역
공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
질문 답변
- [필독] 금일 질문사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
이런형태가 나오지만 영역을 나누고 스타일을 설정하면서 float를 설정해주면
Index Site : 상단 영역
공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
질문 답변
- [필독] 금일 질문사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
- [필독] 금일 공지사항
이런 형태로도 나올수 있습니다.
float 를 left 나 right로 설정해주면 한 열의 왼쪽과 오른쪽으로 위치하게 됩니다.
'wab' 카테고리의 다른 글
| CSS기초_테이블_행단위_색입히기 (0) | 2023.03.13 |
|---|---|
| 15_HTML_태그소개_iframe (0) | 2023.03.13 |
| 13_HTML_태그소개_div 블록태그 사용하기 (0) | 2023.03.13 |
| 12_HTML_태그소개_목록생성하기 (0) | 2023.03.13 |
| 11_HTML_태그소개_Table정의하기 (0) | 2023.03.13 |
