여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. How To - 웹사이트 만들기

How To – 웹사이트 만들기

3주전 작성

w3.css

웹사이트 만들기

PC, 노트북, 태블릿, 휴대폰 등 모든 기기에서 작동하는 반응형 웹사이트를 만드는 방법을 알아보자.

레이아웃 초안

웹사이트를 만들기 전에 페이지 디자인의 레이아웃 초안을 그려보는 것이 좋다.

첫 번째 단계 – 기본 HTML 페이지

HTML은 웹사이트를 만드는 표준 마크업 언어이고 CSS는 HTML 문서의 스타일을 설명하는 언어다. HTML과 CSS를 결합하여 기본 웹 페이지를 만들 것이다.

1단계) 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>는 문단을 정의한다.

페이지 콘텐츠 생성

웹사이트 요소 내부에서 “레이아웃 초안”을 사용하여 다음을 생성한다.

  • 헤더
  • 탐색 바
  • 메인 콘텐츠
  • 사이드 컨텐츠
  • 바닥글

헤더

헤더는 일반적으로 웹사이트 상단(또는 상단 탐색 메뉴 바로 아래)에 위치한다. 여기에는 종종 로고나 웹사이트 이름이 포함된다.

예제
<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 

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%;
  }
}
기본 예시
예제 보기

바닥글

마지막으로 바닥글을 추가하자.

예제
<div class="footer">
  <h2>Footer</h2>
</div>

 

스타일을 지정하자.

예제
.footer {
  padding: 20px; /* Some padding */
  text-align: center; /* Center text*/
  background: #ddd; /* Grey background */
}

기본 예시
예제 보기

참고

Mingg`s Diary
밍구
밍구
공부 목적 블로그