Layout
레이아웃은 특정 공간에 여러 구성 요소를 효과적이고 효율적으로 배치하는 작업을 의미하며, 보기 좋게 구조화 하는 매우 중요한 요소이다. 주로 시맨틱 요소들이 사용되며, 시멘틱(Semantic) 요소는 웹페이지를 쉽게 이해할 수 있도록 정의된 의미론적 태그를 말한다.
● header
웹사이트 상단에 위치하며 주로 로고, 검색, 웹사이트의 이름 등을 표현한다.
● nav
네비게이션 바(Navigation Bar)를 의미하며 카테고리, 메뉴 등을 위치 시킨다.
- header 안에 nav 가 포함될 수도 있으며 header 밖으로 나와 단독적으로 사용되기도 한다.
● aside
보통 웹사이트 양옆에 위치하며 본문과는 연관성이 떨어진 내용을 추가한다.
● section
html 문서의 전체적인 내용과 관련이 있는 콘텐츠들로 내용을 감싸거나 나누는 용도로 이용한다.
- section은 article을 여러개 포함 할 수 있다.
● article
본문의 주내용을 포함하여 내용 그 자체로 이해할 수 있는 개별적인 부분이다.
● footer
웹사이트 하단에 위치하며 주로 사이트 제작 그리고 운영 주체의 정보, 저작권, 연락처 등을 표현한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h2>Title</h2>
</header>
<section>
<nav>
nav
</nav>
<article>
<h1>title</h1>
<p>article</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>div 요소를 이용한 레이아웃
div 태그가 스타일시트(CSS)를 쉽게 적용할 수 있어 레이아웃 작성에 자주 이용된다.
<div id="header">
<h2>header 영역</h2>
</div>
<div id="nav">
<h2>nav 영역</h2>
</div>
<div id="section">
<h2>section 영역</h2>
<span>section 영역</span>
</div>
<div id="footer">
<h2>footer 영역</h2>
</div>table 요소를 이용한 레이아웃
외에 table 요소를 이용하여 레이아웃을 작성하는 방법은 오래전에 자주 사용하던 방식이며, 현재는 거의 사용하지 않는다.
<table width="100%" style="text-align:center; border:none">
<tr>
<td colspan="2" style="background-color:lightgrey"><h2>Header 영역</h2></td>
</tr>
<tr>
<td style="background-color:#339999; color:white; width:20%"><h2>Nav 영역</h2></td>
<td style="height:200px; text-align:left"><p>Section 영역</p></td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFCC00"><h2>Footer 영역</h2></td>
</tr>
</table>Block 과 Inline
html의 모든 요소는 해당 요소가 웹브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가진다.
display 속성값으로 다음 두가지 중 하나의 값을 가지게 된다.
1. 블록(block) 속성을 갖는 요소 - 새로운 줄(line)로 바뀌며, 해당 줄의 모든 너비를 차지한다.
2. 인라인(inline) 속성을 갖는 요소 - 새로운 줄을 바뀌지 않기 때문에 다른 요소와 같이 표시되며, 라인의 전체가 아닌 해당 요소의 내용 만큼만 차지한다.
display 속성값이 Block인 대표적인 요소
기본적으로 너비 100% 속성을 가지고 있어, 화면 가로 폭을 완전히 차지하기 때문에 양 옆으로 다음 요소를 붙일 수 없다. 인라인 요소와 다르게 margin, width, height 속성을 정의하면 모두 적용된다. 모양새를 쉽게 제어할 수 있는 속성 때문에 대부분 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용한다.
<div>
<h1>~<h6>
<p>
<ul>
<ol>
<form>
display 속성값이 inline 인 대표적인 요소
- 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않는다. 인라인 요소의 상, 하 여백은 margin 속성이 아니라 line-height 속성에 의해 발생한다.
- 너비(width)와 높이(height) 속성이 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다.
- 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.
<span>
<a>
<img>
<strong>
iframe
iframe (inline frame) 요소를 이용하면 해당 웹페이지 안에 어떠한 제한없이 또 다른 페이지를 넣을 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>Sample</p>
<iframe src="보여줄 URL 주소" style="height:400px;width:100%" title="iframe Example"></iframe>
</body>
</html>
[디자인공부] - 한글폰트 만화진흥원체 무료 다운로드 및 설치
한글폰트 만화진흥원체 무료 다운로드 및 설치
만화진흥원체 (재)한국만화영상진흥원은 (주)윤디자인 그룹과 함께 저작권 분쟁 위험이 없는 자유로운 만화창작 환경을 만들고자 만화진흥원체(komacon체)를 개발하였다. 만화창작 및 상업적 사
smarti.tistory.com
[디자인공부] - 포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)
포토샵으로 치즈 텍스트 효과 만들기 (다운로드 포함)
Photo Shop으로 치즈 텍스트 만들기 포토샵을 열고 새문서를 만들어 빵이 있는 배경을 불러와 넣는다. 브러시 및 액션 다운로드 설치 '편집/사전설정/사전 설정 관리자'로 이동하여 브러시를 선택
smarti.tistory.com
HTML5 기본정리 1
HTML5 변경사항 HTML5 기본 구조 HTML5에서는 DOCTYPE 선언이 매우 간단해졌다. 또한, 문자셋(character set)의 선언도 매우 간단해졌다. HTML5에서의 기본 문자 인코딩(character encoding) 방..
smarti.tistory.com
[코딩공부] - 아파치(Apache 2.4.46) 웹서버 설치하기, 윈도우10
아파치(Apache 2.4.46) 웹서버 설치하기, 윈도우10
윈도우10 64bit APM Apache 2.4 다운로드 및 설치 윈도우에 IIS를 이용하여 웹서버를 구성할 수도 있지만, 윈도우뿐 아니라 Linux 등 다양한 환경에서 쉽게 운영할 수 있는 APM (Apache+PHP+MySQL) Apache 웹서버..
smarti.tistory.com
[코딩공부] - Sublime Text 3 다운로드 설치 및 플러그인, 윈도우10
Sublime Text 3 다운로드 설치 및 플러그인, 윈도우10
Sublime Text 다운로드 및 설치 코딩 연습을 위해 많은 에디터 중에 Sublime Text 3을 설치 www.sublimetext.com/3 에 들어가서 아래 화면에서 자신의 OS에 맞는 것을 다운로드한다. 나는 64bit 설치형을 다운로..
smarti.tistory.com
'코딩공부' 카테고리의 다른 글
| HTML 텍스트 요소 (0) | 2020.09.30 |
|---|---|
| HTML 기본요소3, list(리스트), table(테이블) (0) | 2020.09.30 |
| HTML 기본요소 2, link(링크), image(이미지) (0) | 2020.09.29 |
| HTML 기본요소 1, meta tag(메타태그), color(색), background(배경) (0) | 2020.09.29 |
| HTML5의 요소 (0) | 2020.09.10 |
| MySQL 8.0.21 다운로드 및 설치하기, 윈도우10 (0) | 2020.09.08 |
| PHP 7.4 다운로드 및 설치하기, 윈도우10 (0) | 2020.09.08 |
| 아파치(Apache 2.4.46) 웹서버 설치하기, 윈도우10 (0) | 2020.09.08 |
댓글