패스트캠퍼스 파이썬 웹개발 올인원 패키지 후기(23)
파이썬 웹개발 올인원 패키지 23 일차 후기 겸 학습기록 입니다.
HTML, CSS - header 레이아웃
min-width 최소 넓이 > 컨텐츠 크기가 최소 크기보다 작아지면 안될때
max-width 최대 넓이 > 컨텐츠 크기가 최대 크기이상으로 커지면 안될때
가운데 정렬
margin: 0 auto 0 auto <<<< top right bottom left
margin: 0, auto <<< top/bottom rigth/left
margin: 10px <<<< 4개 모두
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./normalize.css" />
<link rel="stylesheet" href="./style.css" />
<title>The Web framework for perfectionists with deadlines | Django</title>
</head>
<body>
<header class="header">
<div class="container">
<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>
</div>
</header>
<main class="main">
<div class="hero-section">히어로</div>
<div class="main-content">메인 콘텐츠</div>
<div class="side-content">사이드 콘텐츠</div>
</main>
<footer class="footer">푸터</footer>
</body>
</html>*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
min-width: 1060px;
font-size: 1.8rem;
}
.header {
background: aqua;
height: 72px;
}
.container {
max-width: 1400px;
background: red;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
.logo {
margin: 0;
position: absolute;
top: 0;
left: 0;
}
.nav {
text-align: right;
}
.list {
margin: 0;
}
.list-item {
display: inline-block;
}
.hero-section {
background: skyblue;
}
.main-content {
float: left;
width: 70%;
background: pink;
}
.side-content {
float: right;
width: 30%;
background: yellow;
}
.footer {
background: green;
}
HTML, CSS - header 스타일링
웹폰트 : 웹에서 언제나 글꼴을 얻도록 하는 기능
구글폰트 : 오픈소스로 올라와있는 폰트 사용 가능
a 요소의 밑줄 제거
text-decoration 초기화
text-decoration: none;
영어 대문자로 만들기
text-transform: uppercase;
HTML, CSS - main hero 마크업 & 스타일링
float 영향 해제
clear: both
텍스트 가운데 정렬
text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./normalize.css" />
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900"
rel="stylesheet"
/>
<title>The Web framework for perfectionists with deadlines | Django</title>
</head>
<body>
<header class="header">
<div class="container">
<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>
</div>
</header>
<main class="main">
<div class="hero-section">
<div class="container">
<p class="intro-desc">
Django makes it easier to build better Web apps more quickly and
with less code.
</p>
<a href="#" class="cta">
Get started with Django
</a>
</div>
</div>
<div class="container-float">
<div class="main-content">
메인 콘텐츠
</div>
<div class="side-content">
사이드 콘텐츠
</div>
</div>
</main>
<footer class="footer">푸터</footer>
</body>
</html>/* 공통 속성 */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
min-width: 1060px;
font-size: 1.8rem;
line-height: 1.6;
font-family: Roboto, Avenir, sans-serif;
}
a {
text-decoration: none;
}
/* HEADER */
.header {
background: #0c4b33;
height: 72px;
padding: 15px 0 4px;
}
.container,
.container-float {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
.container-float::after {
display: block;
content: "";
clear: both;
}
.logo {
margin: 0;
padding-left: inherit;
position: absolute;
top: 0;
left: 0;
}
.nav {
text-align: right;
}
.list {
margin: 0;
font-size: 0;
}
.list-item {
font-weight: 700;
display: inline-block;
font-size: 1.3rem;
text-transform: uppercase;
}
.list-item > a {
color: white;
display: block;
padding: 10px;
}
.list-item > a:hover {
color: #c9f0dd;
}
/* MAIN */
.hero-section {
padding: 50px 0;
text-align: center;
border-bottom: 1px solid #cfe3dc;
}
.intro-desc {
margin: 40px auto 50px;
width: 700px;
font-weight: 300;
font-size: 3.6rem;
line-height: 1.3;
}
.cta {
color: white;
width: 300px;
font-weight: 400;
margin: 0 auto 60px;
display: block;
padding: 20px 50px;
border-radius: 8px;
background: #44b78b;
}
.cta:hover {
background: #51be95;
}
.main-content {
float: left;
width: 70%;
background: pink;
}
.side-content {
float: right;
width: 30%;
background: yellow;
}
/* FOOTER */
.footer {
background: green;
clear: both;
}
패스트캠퍼스 파이썬 인강 자세한 내용은 아래 링크를 참고해 주세요!