div 프레임나누기/ 배치하기
Html프레임나누려면 가끔 컴터나 OS, 모니터, 해상도, 브라우져, 따라 엉클어 진다.
그래서 고정하면서 배치하는 방법에 대해 알아보도록 하겠다. 우선은 %를 통해서 여백을 정리하는 방법이다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>div div{border:1 solid red;margin:5;padding:25; text-align:center;}</style>
기본스타일을 설정하고 텍스트는 가운데에 정렬해 보았다.
</head>
<body>
<ul> 형태로 감싸준 후 전체를 div로 CSS정의 내린다.
<div style='width:100%; height:400px;float:left; background-color:#0CC;'>
<div style='width:25%; height:330px;float:left; background-color:#F00;'>왼쪽</div>
<div style='width:25%; height:330px;float:right; background-color:#9F0;'>오른쪽</div>
<div style='width:50%; height:134px;float:left; background-color:#066;'>가운데01</div>
<div style='width:50%; height:133px;float:left; background-color:#09C;'>가운데02</div>
<div style='width:50%; height:133px;float:left; background-color:#3FF;'>가운데03</div>
각각의 형태를 생각하며 직접 스타일을 정리한다.
</div>
</ul>
</body>
이런 작업들이 많아 자주 만들다 보면 점점 적응이 되면서 나중엔 스타일시트를 직접 div에 넣지 않고 헤드에 정의를 바로 만들면서 작업 할 수 있을 것이다.
[홈페이지만들기] - first-child / last-child 활용하기
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| ul li 가로정렬로 메뉴만들기 (css가로정렬) (5) | 2017.01.27 |
|---|---|
| div 프레임나누기 (2) | 2017.01.25 |
| html 테이블구조 만들기 (0) | 2016.12.30 |
| first-child / last-child 활용하기 (0) | 2016.12.29 |
| 폰트 URL 적용하기 (0) | 2016.12.19 |
