패스트캠퍼스 파이썬 웹개발 올인원 패키지 후기(22)
파이썬 웹개발 올인원 패키지 22 일차 후기 겸 학습기록 입니다.
오늘은 HTML, CSS 에서 CSS Reset, Normalize.css, 그리고 웹사이트의 기본 구조 및 header 마크업에 대해서 공부해보았습니다.
HTML, CSS - CSS Reset vs Normalize.css
브라우저 마다 제공하는 User-agent 스타일이 있습니다.
브라우저 마다 일관된 스타일을 제공하는 것은 아닙니다.
따라서 모든 브라우저에서 일관된 스타일을 제공하기위해 CSS Restet을 사용합니다.
CSS Normalize라는 기능도 있습니다.
유용한 브라우저의 기본값을 보존 하며,
스타일을 Normalize합니다.
<이용할 normalize.css 파일 참고>
https://necolas.github.io/normalize.css/8.0.1/normalize.css
<index.html>
<!DOCTYPE html> <!-- 독타입 선언 : 문서 최상단에 반드시 위치 -->
<html lang="en"> <!-- html 요소 : 루트요소, lnag 속성 : 검색엔진, 브라우저가 참고하여 우리가 작성한 문서가 어떤 언어로 되어 있는지 알려줌-->
<head> <!-- 문서의 기본 설정, css 연결 등, 문서에는 직접 표현되지 않음-->
<meta charset="UTF-8"> <!-- charset : 문자 인코딩 명시, 전세계 문자를 표현하기 위한 표준으로 UTF-8 널리 사용-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- viewport : 브라우저 크기, 기기의 크기에 따라 웹페이지의 크기를 맞춰서 표시-->
<title>The Web framework for perfectionists with deadlines | Django</title> <!-- 중요 : 문서의 제목 표시! 브라우저의 탭 이름으로 표시 됨.-->
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./normalize.css">
</head>
<body>
</body>
</html><style.css>
*,
*::before,
*::after {
box-sizing: border-box;
}
HTML, CSS - 웹사이트의 기본 구조
헤더영역 : 보통 가장 상단에 위치, 제목, 로고 등 표시 <header> 태그 사용
네비게이션 : 메뉴 버튼, 링크 버튼, 검색 등 <nav> 태그 사용
메인 : 본문 <main> 태그 사용
사이드바 : 메뉴, 광고 등 <aside>태그 사용
푸터 : 주소, 연락처 등 <footer> 태그 사용
참고 사이트 : https://www.djangoproject.com
The Web framework for perfectionists with deadlines | Django
The Django Software Foundation deeply values the diversity of our developers, users, and community. We are distraught by the suffering, oppression, and systemic racism the Black community faces every day. We can no longer remain silent. In silence, we are
www.djangoproject.com
style.css
*,
*::before,
*::after {
box-sizing: border-box;
}
/* HEADER */
.header {
background: yellow;
}
/* MAIN */
.main{
background: lime;
}
.hero-section {
background-color: aqua;
}
.main-content {
background: blue;
float: left;
width: 70%
}
.side-content {
background: pink;
float: right;
width: 30%;
}
/* CONTENT-INFO */
.content-info {
background: green
}
.links {
background: lightgreen;
}
.footer {
background: purple;
}
index.html
<!DOCTYPE html> <!-- 독타입 선언 : 문서 최상단에 반드시 위치 -->
<html lang="en"> <!-- html 요소 : 루트요소, lnag 속성 : 검색엔진, 브라우저가 참고하여 우리가 작성한 문서가 어떤 언어로 되어 있는지 알려줌-->
<head> <!-- 문서의 기본 설정, css 연결 등, 문서에는 직접 표현되지 않음-->
<meta charset="UTF-8"> <!-- charset : 문자 인코딩 명시, 전세계 문자를 표현하기 위한 표준으로 UTF-8 널리 사용-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- viewport : 브라우저 크기, 기기의 크기에 따라 웹페이지의 크기를 맞춰서 표시-->
<title>The Web framework for perfectionists with deadlines | Django</title> <!-- 중요 : 문서의 제목 표시! 브라우저의 탭 이름으로 표시 됨.-->
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./normalize.css">
</head>
<body>
<header class="header">헤더</header>
<main class="main">
<div class="hero-section">히어로</div>
<div class="main-content">메인 콘텐츠</div>
<div class="side-content">사이드 콘텐츠</div>
</main>
<footer class="content-info">
<div class="links">링크</div>
<div class="footer">푸터</div>
</footer>
</body>
</html>
HTML, CSS - header 마크업
<!DOCTYPE html> <!-- 독타입 선언 : 문서 최상단에 반드시 위치 -->
<html lang="en"> <!-- html 요소 : 루트요소, lnag 속성 : 검색엔진, 브라우저가 참고하여 우리가 작성한 문서가 어떤 언어로 되어 있는지 알려줌-->
<head> <!-- 문서의 기본 설정, css 연결 등, 문서에는 직접 표현되지 않음-->
<meta charset="UTF-8"> <!-- charset : 문자 인코딩 명시, 전세계 문자를 표현하기 위한 표준으로 UTF-8 널리 사용-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- viewport : 브라우저 크기, 기기의 크기에 따라 웹페이지의 크기를 맞춰서 표시-->
<title>The Web framework for perfectionists with deadlines | Django</title> <!-- 중요 : 문서의 제목 표시! 브라우저의 탭 이름으로 표시 됨.-->
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./normalize.css">
</head>
<body>
<header class="header">헤더
<h1 class="logo">
<img src="https://static.djangoproject.com/img/logo-django.42234b631760.svg" alt="Django">
</h1>
<nav class="nav">
<ul class="list">
<li class="list-item"><a href="#">Overview</a></li>
<li class="list-item"><a href="#">Download</a></li>
<li class="list-item"><a href="#">Documentation</a></li>
<li class="list-item"><a href="#">News</a></li>
<li class="list-item"><a href="#">Community</a></li>
<li class="list-item"><a href="#">Code</a></li>
<li class="list-item"><a href="#">About</a></li>
<li class="list-item"><a href="#">♥ Donate</a></li>
</ul>
</nav>
</header>
<main class="main">
<div class="hero-section">히어로</div>
<div class="main-content">메인 콘텐츠</div>
<div class="side-content">사이드 콘텐츠</div>
</main>
<footer class="content-info">
<div class="links">링크</div>
<div class="footer">푸터</div>
</footer>
</body>
</html>
패스트캠퍼스 파이썬 인강 자세한 내용은 아래 링크를 참고해 주세요!
'Web,FrontEnd' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 25 회차 미션 (0) | 2020.06.18 |
|---|---|
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 24 회차 미션 (0) | 2020.06.17 |
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 21 회차 미션 (0) | 2020.06.14 |
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 20 회차 미션 (0) | 2020.06.13 |
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 19 회차 미션 (0) | 2020.06.12 |
