[기초강좌] 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>

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

HTML<br>

CSS<br>

JavaScript</div>

Content goes here</div>

</div>

</body>

</html>

눈으로 직접 보기.

결과물은 아래와 같다.

HTML Layouts - Using Tables

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

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

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

<!DOCTYPE html>

<html>

<body>

<tr>

<h1>Main Title of Web Page</h1>

</td>

</tr>

<tr>

HTML<br>

CSS<br>

JavaScript

</td>

Content goes here</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

눈으로 직접 보기.

결과는 위와 동일한다.

HTML Layout - Useful Tips

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

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

HTML Layout Tags

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

다음 강좌 보기 >>

저작자표시 비영리 변경금지

'프로그래밍 놀이터 > Web' 카테고리의 다른 글

[기초강좌] HTML IFrames - w3schools 번역 (0)	2014.03.23
[기초강좌] HTML Forms and Input - w3schools 번역 (0)	2014.03.21
[기초강좌] HTML Blocks - w3schools 번역 (0)	2014.03.18
Bootstrap All Functions #2 (0)	2014.03.18
[기초강좌] HTML Lists - w3schools 번역 (0)	2014.03.17