패스트캠퍼스 파이썬 웹개발 올인원 패키지 후기(24)
파이썬 웹개발 올인원 패키지 24 일차 후기 겸 학습기록 입니다.
HTML, CSS - main main-content 마크업
<h2> 요소 >> Stay in the loop
<p> 요소 >> Subscribe to one of our mailing lists to stay up to date with everything in the Django community
<h3> 요소 >> Using Django, Contributing to Django
<fomr> 요소 >> Enter email
mailing-desc 클래스 >> Get help with Django . . . .
[전체 레이아웃]
div.main-content
h2.main-title
p.main-desc
div.mailing-layout
div.mailing
h3.mailing-title
a
p.mailing-desc
form
p.mailing-desc
div.mailing
......
HTML, CSS - form 요소
form : 로그인, 검색, 입력 할때 등 사용 >> 사용자와 웹애플리케이션 간 상호작용
속성(attribute)
action : 어디로 폼 데이터를 보낼지?
method : get, post, delete, put 등
type : 폼의 형태 (text, checkbox, search, number 등)
예:
<form action='#'>
<label for="input-following">send email for following news</label>
<input type="email" placeholder="Enter email" id="input-following" name="input-following" />
<button type="submit" class="mailing-form-btn">Submit</button>
</form>
HTML, CSS - main main-content 스타일링
간격 css
- 첫번째 요소에만 마진을 주고 싶을때 가상클래스 사용
예:
.mailing:first-child {
margin-right: 4%;
}
예:
.mailing-form {
margin: 10px 0 30px;
}
레이블 요소 없애기
.mailing-form > label {
display: none;
or
visibility: hidden;
or
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
margin: -1px;
clip: rect(0, 0, 0, 0);
}
<!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">
<h2 class="main-title">Stay in the loop</h2>
<p class="main-desc">
Subscribe to one of our mailing lists to stay up to date with
everything in the Django community:
</p>
<div class="mailing-layout">
<div class="mailing">
<h3 class="mailing-title">
<a href="#">
Using Django
</a>
</h3>
<p class="mailing-desc">
Get help with Django and follow announcements.
</p>
<form action="#" class="mailing-form">
<label for="input-following"
>send email for following news</label
>
<input
type="email"
placeholder="Enter email"
id="input-following"
name="input-following"
/>
<button type="submit" class="mailing-form-btn">Submit</button>
</form>
<p class="mailing-desc">
You can also subscribe by sending an email to
<a href="mailto:django-users+subscribe@googlegroups.com"
>django-users+subscribe@googlegroups.com</a
>
and following the instructions that will be sent to you.
</p>
</div>
<div class="mailing">
<h3 class="mailing-title">
<a href="#">Contributing to Django</a>
</h3>
<p class="mailing-desc">
Contribute to the development of Django itself.
</p>
<form action="#" class="mailing-form">
<label for="email-contribute"
>send e-mail for contribution</label
>
<input
type="email"
placeholder="Enter email"
id="email-contribute"
name="email-contribute"
/>
<button type="submit" class="mailing-form-btn">
Submit
</button>
</form>
<p class="mailing-desc">
Before asking a question about how to contribute, read
<a
href="https://docs.djangoproject.com/en/dev/internals/contributing/"
>Contributing to Django</a
>. Many frequently asked questions are answered there.
</p>
</div>
</div>
</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 */
.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 */
.main-content {
float: left;
width: 70%;
padding-right: 20px;
}
.main-title {
font-weight: 400;
margin: 40px 0 20px 0;
font-size: 3.2rem;
letter-spacing: -1px;
}
.main-desc {
margin: 0 0 20px 0;
}
.mailing-layout {
padding-top: 20px;
}
.mailing-layout::after {
content: "";
display: block;
clear: both;
}
.mailing {
float: left;
width: 48%;
}
.mailing:first-child {
margin-right: 4%;
}
.mailing-title {
margin: 0 0 20px 0;
font-size: 1.8rem;
font-weight: 700;
}
.mailing-title > a,
.mailing-desc > a {
color: #20aa76;
}
.mailing-title > a:hover,
.mailing-desc > a:hover {
color: #25c488;
}
.mailing-desc {
margin: 0;
font-size: 1.4rem;
line-height: 1.3;
}
.mailing-form {
margin: 10px 0 30px;
position: relative;
}
.mailing-form > label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
margin: -1px;
clip: rect(0, 0, 0, 0);
}
input[type="email"] {
width: 100%;
border: 1px solid #cfe3dc;
border-radius: 4px;
height: 5rem;
padding: 6px 80px 8px 10px;
}
.mailing-form-btn {
position: absolute;
top: 30%;
right: 1rem;
border: 0;
color: #44b78b;
background: transparent;
cursor: pointer;
}
.mailing-form-btn:hover {
color: #0c4b33;
}
/* SIDE CONTENT */
.side-content {
float: right;
width: 30%;
background: yellow;
}
/* FOOTER */
.footer {
background: green;
clear: both;
}
패스트캠퍼스 파이썬 인강 자세한 내용은 아래 링크를 참고해 주세요!
'Web,FrontEnd' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 26 회차 미션 (0) | 2020.06.19 |
|---|---|
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 25 회차 미션 (0) | 2020.06.18 |
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 22 회차 미션 (0) | 2020.06.15 |
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 21 회차 미션 (0) | 2020.06.14 |
| [패스트캠퍼스 수강 후기] 파이썬 인강 자기계발 챌린지 20 회차 미션 (0) | 2020.06.13 |
