본문 바로가기
프로그래밍 놀이터/Web

[기초강좌] HTML Layouts - w3schools 번역

by 돼지왕 왕돼지 2014. 3. 19.
반응형


 [기초강좌] HTML Layouts - w3schools 번역

 

[기초강좌] HTML Layouts - w3schools 번역


w3school 의 강좌 내용을 번역한 글입니다.


원문 : http://www.w3schools.com/html/html_layout.asp


웹 페이지 레이아웃은 웹 사이트를 나이스 하게 보이도록 하는 데 매우 중요한 요소이다.


당신의 웹 페이지를 신중하게 디자인하라.


Website Layouts


대부분의 웹사이트는 내용을 여러개의 컬럼을 이용하여 표시한다. ( 잡지나 신문처럼 )


여러개의 컬럼은 <div> 나 <table> element 를 사용하여 만들 수 있다. CSS 는 element 들의 위치를 지정하거나, 배경 지정, 그리고 컬러풀한 외관을 위해 사용된다.


Tip : HTML table 을 이용해서도 좋은 레이아웃팅을 할 수는 있지만, table tag 는 테이블 정보를 표시할 때만 사용되기 위해 생겨난 tag 이기 때문에 layout 에 쓰는 것은 권장되지 않는다.




HTML Layouts - Using <div> Elements


div element 는 block level element 로 HTML element 들을 그룹화하는데 사용한다.


아래 예제는 5개의 div element 를 사용하여 여러개의 컬럼 레이아웃을 만든다.


<!DOCTYPE html>

<html>

<body>


<div id="container" style="width:500px">


<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>


<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>Menu</b><br>

HTML<br>

CSS<br>

JavaScript</div>


<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

Content goes here</div>


<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

Copyright © W3Schools.com</div>


</div>


</body>

</html>



결과물은 아래와 같다.







HTML Layouts - Using Tables


<table> tag 를 사용해서 손쉽게 레이아웃팅을 할 수 있다.


여러개의 컬럼은 <div> 나 <table> element 를 사용하여 구성할 수 있다. CSS 는 element 의 위치, 배경 지정, 컬러풀한 외관을 위해 사용된다.


Tip : HTML table 을 이용해서도 좋은 레이아웃팅을 할 수는 있지만, table tag 는 테이블 정보를 표시할 때만 사용되기 위해 생겨난 tag 이기 때문에 layout 에 쓰는 것은 권장되지 않는다.


아래 예제는 table, 3개의 행, 그리고 2개의 열을 사용하여 레이아웃팅 한 것이다. - 첫번째 행과 마지막 행은 colspan 속성을 이용하여 2개의 열을 합쳤다.

<!DOCTYPE html>
<html>
<body>

<table width="500">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>


결과는 위와 동일한다.



HTML Layout - Useful Tips


Tip : CSS 를 쓰는 가장 큰 장점은, CSS code 를 외부 style sheet 으로 유지하면, 유지보수가 훨씬 쉬워진다. 웹 사이트의 모든 페이지들을 css 파일 하나만 바꾸어 수정 가능하다. CSS 에 대해서 잘 배우고 싶다면 CSS 기초강좌를 수강하자.


Tip : 고급 레이아웃팅은 만드는 데 시간이 오래 걸린다. 빨리 만들 수 있는 좋은 방법은 템플릿을 이용하는 것이다. Google 검색을 통해서 무료로 웹사이트 템플릿을 제공하는 것을 찾아 사용해보자. ( 미리 완성된 웹사이트도 커스터마이즈 해서 사용할 수 있다. )




HTML Layout Tags


TagDescription
<div>Defines a section in a document (block-level)
<span>Defines a section in a document (inline)



다음 강좌 보기 >>






반응형

댓글