728x90
반응형
편의상 두 가지 사항은 미리 진행했다.
일단은 pycharm 말고, visual studio code 를 사용하자.
pycharm 보다 리소스도 용량도 적다!
1. 기본 레이아웃 디자인하기
header, nav, footer, main, section, article, aside 세맨틱 태그를 사용했다.
구성은 w3schools의 해당 글(HTML Semantic Elements)🔗을 참조했다.
div 로 wrapper 를 사용하지 않고, semantic tag를 사용하는 이유는,
1) 검색엔진에서 효율이 증가한다.
2) 시각 장애인의 웹 접근성을 높일 수 있다.
3) 끝 없는 div div 를 조금 줄일 수 있다.
(그 밖의 내용은 해당 글🔗을 참조하자.)
index.html 코드 보기👇
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/reset.css">
<link rel="stylesheet" href="/layout.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<header>
<div class="header_wrap">
header
</div>
</header>
<nav>
<div class="nav_wrap">
<i class="fa fa-bars"></i>
<ul class="nav_list">
<li><a href="">Odin</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Works</a></li>
<li><a href="">Notes</a></li>
<li><a href="">Contact</a></li>
<li><a href=""><i class="fa fa-search"></i></a></li>
</ul>
</div>
</nav>
<div class="wrapper">
<main>
<section>
section
</section>
<article>
article
</article>
</main>
<aside>
aside
</aside>
</div>
<footer>
<div class="footer_wrap">
footer
</div>
</footer>
</body>
</html>
2. css 리셋, 레이아웃 디자인하기
https://meyerweb.com/eric/tools/css/reset/
위 웹페이지에서 css를 리셋하자.
ul, li 태그 같은 경우 기본 padding이 있고, 다른 태그도 기본 값 몇 개가 있다.
해당 기본값을 없애서, 편하게 css 디자인을 하기 위해서 css 리셋을 하자.
html 역시 위쪽부터 코드를 읽고 덮어쓰기를 하므로,
reset.css 는 제일 위에 구성한다.
reset.css 코드 보기👇
더보기
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
3. 반응형 웹, layout 만들기
여기를 참조하여, 반응형 웹의 가로폭을 나누었다.
작은 화면에서는 메뉴목록이 보이지 않게 만들었다.
컴퓨터 화면에서는 <body> 태그 안의 요소가 폭에 따라 커지게 했다.
layout.css 코드 보기👇
더보기
/* Mobile Devices */
@media screen and (max-width: 480px) {
}
/* end Mobile Devices */
/* iPads, Tablets */
@media screen and (min-width:481px) and (max-width: 768px) {
}
/* end iPads, Tablets */
/* Common Settings on Mobile Devices */
@media screen and (max-width: 768px) {
.nav_list {
display: none;
}
}
/* end Common Settings on Mobile Devices */
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/* Common Settings on Computers */
@media screen and (min-width: 769px) {
/* TEMPORARY, Going to Remove */
body > * > * {
margin: 0 auto;
border: 1px solid black;
}
/* END TEMPORARY ####################### */
}
/* end Common Settings on Computers */
/* Small screens */
@media screen and (min-width:769px) and (max-width: 1024px) {
body > * > * {
width: 768px;
}
}
/* end Small screens */
/* Desktop screens */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
body > * > * {
width: 1024px;
}
}
/* end Desktop screens */
/* Wide screens */
@media screen and (min-width:1201px) {
body > * > * {
width: 1024px;
}
}
/* end Wide screens */
결과물
색상과 border, 두 가지는 구분을 편리하게 하기 위해서 적용했다.
728x90
반응형
'Programming > Making django Web Page' 카테고리의 다른 글
| django로 내 웹페이지 만들기(5) - DB 만들기 (MySQL) (0) | 2022.06.03 |
|---|---|
| django로 내 웹페이지 만들기(4) - 페이지 파일 만들기, 고정 데이터 설정하기 (0) | 2022.06.01 |
| django로 내 웹페이지 만들기(3) - static 페이지 구성하여 include 하기 (0) | 2022.06.01 |
| django로 내 웹페이지 만들기(2) - 반응형 웹, Navigation Bar 토글하기 + Header, Footer 꾸미기 (0) | 2022.05.31 |
| django로 내 웹페이지 만들기 - 개요 (0) | 2022.05.30 |
댓글