ㅤㅤㅤ
Html/Css 페이지 만들기 - 간단하게 레이아웃(틀) 잡기 본문
[Html/Css] 페이지 만들기 - 간단하게 레이아웃(틀) 잡기
건강한프로그래머 2016.05.09 15:56안녕하세요, 건프입니다.
개발을 하다보면, 사람들이 브라우저와 인터넷 만 연결되어 있으면, 언제든 접속할 수 있는 웹 페이지를 제작해보고 싶어질 수 있습니다.
(제 경우가 그렇....)
그랬을때, 가장 먼저 고민이 되는 것이, '페이지의 레이아웃을 어떻게 짜는 것이 좋을까' 에 대한 고민을 하게되는데,
아래에서 간단한 예시를 보여드리겠습니다.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div 태그</title>
<link href="./static/css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<div id="top">top</div>
<div id="left">left</div>
<div id="main">main</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
(코드 하이라이터로 이쁘게 보여드릴려고 햇는데, html 태그 여서 그런지 뭔가 잘 안되네요.. 일단 이렇게 가겠습니다)
<div> 태그는 말그대로 비어있는 빈 박스 모양의 태그입니다. 따라서 전체 레이아웃을 잡을때 많이들 사용합니다.
(div 로 위치를 잡을때, 각각의 div 에 id 나 class를 추가해서, css에서 margin 이나 text, color 등을 관리하는 형식이죠)
저기서 stylesheet 를 link 하는 경로는 제 개인적인 경로입니다. 여러분들은 작성하실때, 현 기준파일을 기준으로 하던, 절대경로를 사용하던, css파일이 존재하는 경로를 써주셔야 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | @charset "utf-8";/* CSS Document */body { margin: 0px; <!-- 언제나 전체 body에는 margin 값을 0으로 세팅해준다--> font-size: 18px; color: #FFF;}#box { position: relative; height: auto; margin: auto; <!-- 레이아웃을 싸고 있는 box의 margin을 auto로 주면 중앙정렬 효과--> background-color: #F90;}#top { background-color: #333; height: 100px; position: relative;}#left { background-color: #09C; float: left; height: 500px; width: 15%; position: relative;}#main { background-color: #3C0; float: left; height: 500px; width: 85%; position: relative;}#bottom { background-color: #C0F; height: 70px; position: relative; clear: both; <!-- 상단의 흐름을 한번 끊어주기 위해 clear를 해준다.. -.-;;?? --> float: left; <!-- 새로운 흐름을 지정해줘야 깨지지 않는다-->} |
이건 css 파일의 내용입니다.
width 속성을 %로 주면, 전체 화면 크기 의 변화에 맞춰서 변화시킬 수 있습니다. 만약 그걸 원하지 않는다면, 직접 px 값을 박으시면 됩니다.
이를 완료하고 나면 다음과 같이 레이아웃이 잡힙니다.
레이아웃을 잡는 법을 봤으니, 이제 여러분들이 customizing 하실 차례입니다~ ㅎㅎ
출처: http://ljs93kr.tistory.com/18 [건프의 소소한 개발이야기]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
body {
margin: 0px; <!-- 언제나 전체 body에는 margin 값을 0으로 세팅해준다-->
font-size: 18px;
color: #FFF;
}
#box {
position: relative;
height: auto;
margin: auto; <!-- 레이아웃을 싸고 있는 box의 margin을 auto로 주면 중앙정렬 효과-->
background-color: #F90;
}
#top {
background-color: #333;
height: 500px;
position: relative;
}
#left {
background-color: #09C;
float: left;
height: 500px;
width: 50%;
position: relative;
}
#main {
background-color: #3C0;
float: left;
height: 500px;
width: 50%;
position: relative;
}
#bottom {
background-color: #C0F;
height: 70px;
position: relative;
clear: both; <!-- 상단의 흐름을 한번 끊어주기 위해 clear를 해준다.. -.-;;?? -->
float: left; <!-- 새로운 흐름을 지정해줘야 깨지지 않는다-->
}
</style>
</head>
<body>
<div id="box">
<div id="top">top</div>
<div id="left">left</div>
<div id="main">main</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
'プログラミング > HTMLとCSS' 카테고리의 다른 글
| table태그 속성 (0) | 2017.08.03 |
|---|---|
| nav, ul, li 태그 HTML과 CSS로 가로형 메뉴 만들기 (0) | 2017.07.26 |
| CSS 고정형 레이아웃 만들기 (0) | 2017.07.25 |