HTML 레이아웃

우리가 일상에서 접하는 웹페이지는 늘 질서정연하고 보기에도 편한데, 어떻게 하는지 아시나요? HTML 요소와 일부 CSS 스타일을 사용하여 레이아웃이 지정되었으므로 오늘 페이지 레이아웃 방법을 배워보겠습니다.

웹사이트 레이아웃

대부분의 웹사이트는 잡지나 신문처럼 콘텐츠를 여러 열로 배열합니다.

대부분의 웹사이트는 <div> 또는 <table> 요소를 사용하여 여러 열을 만들 수 있습니다. CSS는 요소를 배치하거나 페이지의 배경과 다채로운 모양을 만드는 데 사용됩니다.

HTML 테이블 태그를 사용하여 아름다운 레이아웃을 디자인할 수 있지만 테이블 태그를 레이아웃 도구로 사용하는 것은 권장되지 않습니다. 테이블은 레이아웃 도구가 아닙니다.

팁: 웹사이트의 외관을 개선하려면 웹페이지 레이아웃이 매우 중요합니다. 웹페이지 레이아웃을 신중하게 디자인하세요.

HTML 레이아웃 - <div> 요소 사용

div 요소는 HTML 요소를 그룹화하는 데 사용되는 블록 수준 요소입니다.

예

다음 예에서는 5개의 div 요소를 사용하여 간단한 CSS 스타일로 다중 열 레이아웃을 만듭니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<div id="container" style="width:400px">
<div id="header" style="background-color:#baff9e;">
    <h1 style="margin-bottom:0;">主要的网站标题</h1></div>
<div id="menu" style="background-color:#45caff;height:200px;width:150px;float:left;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:250px;float:left;">
    这里是内容</div>
<div id="footer" style="background-color:#fdd8ff;clear:both;text-align:center;">
    版权 © php.cn</div>
</div>
</body>
</html>

위의 HTML 코드 will 다음 결과를 생성합니다:

테이블을 사용한 HTML 레이아웃

댓글 : <table> 요소는 레이아웃 도구로 설계되지 않았습니다.

<table> 요소는 표 형식의 데이터를 표시하는 데 사용됩니다.

<table> 요소를 사용하면 CSS를 통해 table 요소의 스타일을 지정할 수 있으므로 레이아웃 효과를 얻을 수 있습니다.

예

<table> 요소를 사용하여 레이아웃

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<table width="400" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
            <h1>网站标题</h1>
        </td>
    </tr>
    <tr>
        <td style="background-color:#FFD700;width:50px;">
            <b>网站菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </td>
        <td style="background-color:#EEEEEE;height:200px;width:350px;">
            网站内容</td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            版权 © php.cn</td>
    </tr>
</table>
</body>
</html>

코드 실행 결과:

HTML 레이아웃

팁: CSS 사용의 가장 큰 장점은 CSS 코드를 외부 스타일 시트에 저장하면 사이트를 유지 관리하기가 더 쉽다는 것입니다. 단일 파일을 편집하면 모든 페이지의 레이아웃을 변경할 수 있습니다. CSS에 대해 자세히 알아보려면 CSS 튜토리얼을 방문하세요.

팁: 고급 레이아웃을 만드는 데는 시간이 많이 걸리므로 템플릿을 사용하는 것이 빠른 옵션입니다. 검색 엔진을 통해 사용할 수 있는 무료 웹사이트 템플릿이 많이 있습니다(이러한 사전 구축된 웹사이트 레이아웃을 사용하고 최적화할 수 있습니다).

예를 들어 Bootstrap 사용

Bootstrap 은 기성 CSS 프레임워크를 사용하는 것입니다.

Bootstrap은 반응형 웹 개발에 가장 널리 사용되는 HTML, CSS, JS 프레임워크입니다.

Bootstrap은 모니터, 노트북, 태블릿, 휴대폰 등 어떤 크기에서도 멋지게 보이는 사이트를 개발하는 데 도움이 됩니다.

Bootstrap에 대해 알아보려면 Bootstrap 튜토리얼을 읽어보세요.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <div id="container" style="width:400px"> <div id="header" style="background-color:#baff9e;"> <h1 style="margin-bottom:0;">主要的网站标题</h1></div> <div id="menu" style="background-color:#45caff;height:200px;width:150px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:250px;float:left;"> 这里是内容</div> <div id="footer" style="background-color:#fdd8ff;clear:both;text-align:center;"> 版权 © php.cn</div> </div> </body> </html>

제출하다 코드 재설정

자동운전