건프의 소소한 개발이야기

[Html/Css] 페이지 만들기 - 간단하게 레이아웃(틀) 잡기 본문

개발 이야기/Web Front 이야기

[Html/Css] 페이지 만들기 - 간단하게 레이아웃(틀) 잡기

건강한프로그래머 2016. 5. 9. 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파일이 존재하는 경로를 써주셔야 합니다.




이건 css 파일의 내용입니다.

width 속성을 %로 주면, 전체 화면 크기 의 변화에 맞춰서 변화시킬 수 있습니다. 만약 그걸 원하지 않는다면, 직접 px 값을 박으시면 됩니다.


이를 완료하고 나면 다음과 같이 레이아웃이 잡힙니다.




레이아웃을 잡는 법을 봤으니, 이제 여러분들이 customizing 하실 차례입니다~ ㅎㅎ



공유하기 링크
Comments