<2단 레이아웃 만들기>
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset="utf-8">
<title>2단 레이아웃</title>
<style>
div {
border: 1px solid #ccc;
}
#container{
width: 960px;
padding: 20px;
margin:0 auto;
}
#header{
padding:20px;
margin-bottom:20px;
}
#contents{
width: 620px;
padding: 20px;
float: left;
margin-bottom: 20px;
}
#sidebar{
width: 220px;
padding: 20px;
float: right;
margin-bottom: 20px;
}
#footer{
clear: both;
padding: 20px;
}
</style>
</head>
<body>
<div id = "container">
<div id = "header">
<h1>사이트 제목</h1>
</div>
<div id = "sidebar">
<h2>사이드바</h2>
<ul>
<li>국회의원은 국회에서 직무상 행한 발언과 표결에 관하여 국회외에서 책임을 지지 아니한다.</li>
</ul>
</div>
<div id = "contents">
<h2>본문</h2>
<p>재판의 심리와 판결은 공개한다. 다만, 심리는 국가의 안전보장 또는 안녕질서를 방해하거나 선량한 풍속을 해할 염려가 있을 때에는 법원의 결정으로 공개하지 아니할 수 있다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다.</p>
<p>사면·감형 및 복권에 관한 사항은 법률로 정한다. 국회의 정기회는 법률이 정하는 바에 의하여 매년 1회 집회되며, 국회의 임시회는 대통령 또는 국회재적의원 4분의 1 이상의 요구에 의하여 집회된다. 대통령은 국가의 안위에 관계되는 중대한 교전상태에 있어서 국가를 보위하기 위하여 긴급한 조치가 필요하고 국회의 집회가 불가능한 때에 한하여 법률의 효력을 가지는 명령을 발할 수 있다.</p>
</div>
<div id = "footer">
<h2>푸터</h2>
<p>모든 국민은 사생활의 비밀과 자유를 침해받지 아니한다. 국무총리는 국무위원의 해임을 대통령에게 건의할 수 있다.</p>
</div>
</div>
</body>
</html>
position속성 : 배치방법 지정하기
-> position 속성을 이용하여 텍스트나 이미지를 나란히 배치하거나, 여러개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있음.
position: static | relative | absolute | fixed
| 속성 값 | 설명 |
| static | 요소를 문서의 흐름에 맞추어 배치 |
| relative | 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있음 |
| absolute | 원하는 위치를 지정해 배치 |
| fixed | 지정한 위치에 고정해 배치함. 화면에서 요소가 잘릴 수도 있음. |
visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기
=> 특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성
visibility: visible | hidden | collapse
| 속성 값 | 설명 |
| visible | 화면에 요소를 표시함. 기본값 |
| hidden | 화면에서 요소를 감춤. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 미침. |
| collapse | 표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절함. 그 외의 영역에서 사용하면 'hidden'처럼 처리. |
'웹 프로그래밍 > HTML+CSS' 카테고리의 다른 글
| 가변 그리드 레이아웃 (2) | 2024.11.16 |
|---|---|
| 반응형 웹 (0) | 2024.11.15 |
| 가상 클래스와 가상 요소 (1) | 2024.11.15 |
| 시맨틱 태그가 사용된 HTML5 문서 (1) | 2024.11.14 |
| CSS와 박스 모델 (1) | 2024.11.12 |