방법 - 웹사이트 만들기
PC, 노트북, 태블릿, 휴대폰 등 모든 기기에서 작동하는 반응형 웹사이트를 만드는 방법을 알아보세요.
처음부터 웹사이트 만들기
"레이아웃 초안"
웹사이트를 만들기 전에 페이지 디자인의 레이아웃 초안을 그리는 것이 현명할 수 있습니다.
탐색 모음
사이드 콘텐츠
문자좀 문자좀..
주요 내용
문자좀 문자좀..
문자좀 문자좀..
문자좀 문자좀..
보행인
첫 번째 단계 - 기본 HTML 페이지
HTML은 웹사이트를 만들기 위한 표준 마크업 언어이고 CSS는 HTML 문서의 스타일을 설명하는 언어입니다. HTML과 CSS를 결합하여 기본 웹 페이지를 만듭니다.
참고: HTML과 CSS를 모르는 경우 HTML 자습서를 읽어보는 것으로 시작하는 것이 좋습니다 .
예시
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
예시 설명
<!DOCTYPE html>선언은 이 문서를 HTML5로 정의합니다 .<html>요소는 HTML 페이지의 루트 요소입니다 .<head>요소에는 문서에 대한 메타 정보가 포함되어 있습니다 .- 요소는 문서 의
<title>제목을 지정합니다 <meta>요소는 문자 집합을 UTF-8로 정의해야 합니다 .- name="viewport"가 있는
<meta>요소는 웹사이트가 모든 장치 및 화면 해상도에서 보기 좋게 표시됩니다. <style>요소에는 웹사이트의 스타일(레이아웃/디자인)이 포함됩니다 .<body>요소에 보이는 페이지 콘텐츠가 포함되어 있습니다 .<h1>요소는 큰 제목을 정의합니다 .<p>요소는 단락을 정의합니다 .
페이지 콘텐츠 만들기
웹사이트 요소 내에서 <body>"레이아웃 초안"을 사용하고 다음을 생성합니다.
- 헤더
- 탐색 모음
- 주요 내용
- 사이드 콘텐츠
- 바닥글
헤더
헤더는 일반적으로 웹사이트 상단(또는 상단 탐색 메뉴 바로 아래)에 있습니다. 종종 로고나 웹사이트 이름이 포함됩니다.
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
그런 다음 CSS를 사용하여 헤더의 스타일을 지정합니다.
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
탐색 모음
탐색 모음에는 방문자가 웹사이트를 탐색하는 데 도움이 되는 링크 목록이 포함되어 있습니다.
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
CSS를 사용하여 탐색 모음 스타일 지정:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
콘텐츠
"사이드 콘텐츠"와 "메인 콘텐츠"로 구분된 2열 레이아웃을 만듭니다.
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
CSS Flexbox를 사용하여 레이아웃을 처리합니다.
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
그런 다음 미디어 쿼리를 추가하여 레이아웃을 반응형으로 만듭니다. 이렇게 하면 모든 장치(데스크톱, 랩톱, 태블릿 및 휴대폰)에서 웹사이트가 보기 좋게 표시됩니다. 결과를 보려면 브라우저 창의 크기를 조정하십시오.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
팁: 다른 종류의 레이아웃을 만들려면 플렉스 너비를 변경하면 됩니다(단, 최대 100%가 되도록 하십시오).
팁: @media 규칙이 어떻게 작동하는지 궁금하십니까? CSS 미디어 쿼리 장에서 이에 대해 자세히 알아보세요 .
팁: Flexible Box Layout Module에 대한 자세한 내용은 CSS Flexbox 장 을 참조 하십시오.
박스사이징이란?
세 개의 떠 있는 상자를 나란히 쉽게 만들 수 있습니다. 그러나 각 상자의 너비를 늘리는 항목(예: 패딩 또는 테두리)을 추가하면 상자가 깨집니다. 이 box-sizing속성을 사용하면 상자의 전체 너비(및 높이)에 패딩과 테두리를 포함할 수 있으므로 패딩이 상자 내부에 유지되고 깨지지 않습니다.
CSS Box Sizing Tutorial 에서 box-sizing 속성에 대해 자세히 알아볼 수 있습니다 .
보행인
마지막으로 바닥글을 추가합니다.
<div class="footer">
<h2>Footer</h2>
</div>
스타일을 지정하십시오.
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
축하합니다! 반응형 웹사이트를 처음부터 구축했습니다.
W3학교 공간
자신만의 웹사이트를 만들고 .html 파일을 호스팅 하려면 W3schools Spaces 라는 무료 웹사이트 빌더 를 사용해 보세요 .
