
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 theelement */ .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 */ }
기본 예시
예제 보기참고
W3C School - Make a Website