학습 후기:
1.5주차 복습
1)HTML, CSS
-HTML은 뼈대
html 은 크게 head와 body로 구성되어 있다!
<div class="main">
<h3>매주 월요일, 내 강의실에 찾아오는<br/>온라인 코딩 학습지</h3>
<h1>띵동코딩이 도착했어요!</h1>
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/hero.png">
</div>-CSS는 꾸미기
css 를 적용하려면? 이름표(class) 붙여주고, 꾸며주기!
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 60px;
}
.main > img {
width: 1300px;
}
.main > h3 {
text-align: center;
font-size: 22px;
font-weight: 500;
line-height: 1.5;
color: #415b6d;
margin-bottom: 10px;
}
.main > h1 {
font-size: 46px;
font-weight: 800;
color: #26343d;
}2)CSS 여백주기
⇒ margin
테두리 바깥으로의 여백
⇒ padding
테두리 안쪽으로는 여백
2.스스로 다지기
<!DOCTYPE html>
<html lang="en">
<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 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
<title>결혼 청첩장</title>
<style>
*{
font-family: 'IBM Plex Sans KR', sans-serif;
}
body, h1, h2, h3, p, a{
font-size:16px;
margin:0px;
padding:0px;
text-decoration: none;
font-weight: normal;
}
.wrap {
text-align:center;
width: 350px;
margin: auto;
color: white;
}
.wrap>h1{
background-color: pink;
height:50px;
margin-left:20px;
line-height: 50px;
}
.pic{
margin-top:10px;
color:pink;
background-color: white;
}
.pic>p{
line-height: 50px;
}
.pic>img{
width:250px;
height:200px;
border:pink solid 2px;
}
.name>hr{
width:200px;
border-color:pink;
}
.name{
background-color: white;
color:pink;
margin-bottom: 20px;
}
.name>p{font-size:30px;}
.main{
background-color: pink;
}
.TITLE{
font-size:20px;
height:50px;
line-height: 50px;
}
.content{
text-align:left;
margin-left:20px;
}
.place{
margin-top:20px;
height:60px;
}
.bottom{
background-color: white;
color:pink;
margin-top:40px;
text-align: left;
}
.bottom p{
text-align:center;
}
.bottom input{
margin-top:-5px;
}
.bottom>button{
margin-top:10px;
background-color: pink;
color:white;
border-radius:10px;
width:200px;
height:50px;
border:1px solid white;
}
.msg-box{
marin-top:10px;
width:300px;
height:100px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>영희와 철수의 첫 시작을 축하해주세요</h1>
<div class="pic">
<p>save the Date</p>
<img src="xiang.png" alt="항우">
<p>12.31.SUNDAY.PM.12:30</p>
</div>
<div class="name">
<p>
<hr>
항우&로보
<hr>
</p>
</div>
<div class="main">
<p class="TITLE">INVITATION</p>
<p class="content">
서로 다른 두 사람이 만나<br>
사랑으로 하나 되는 자리에<br>
소중한 여러분들을 초대합니다.<br>
기쁠 떄나, 슬플 때나<br>
서로를 사랑으로 품으며<br>
행복의 계단을 쌓아가겠습니다.<br>
저희의 첫 시작을 함께 해주신다면<br>
감사한 마음 깊이 간직하며 잘 살겠습니다.<br>
</p>
<p class="place">
2023.12.31.SUN.PM 12:30<br>
스파르타웨딩 르탄홀
</p>
</div>
<div class="bottom">
<p>축하메시지를 남겨주세요.</p><br>
<input type="text" placeholder="이름" class="name"><br>
<input type="text" class="msg-box" placeholder="메시지를 남겨주세요" rows="10"><br>
<button>메시지 남기기</button>
</div>
</div>
</body>
</html>
'Lobo's study room > [Sparta]띵동코딩' 카테고리의 다른 글
| [5주차]css활용 (0) | 2022.09.24 |
|---|---|
| 4주차.HTML, CSS 기초 (0) | 2022.08.21 |
| 3주차.웹스크래핑 복습(네이버 영화 순위 분석 크롤링) (0) | 2022.08.20 |
| 2주차.네이버 뉴스 크롤링 (0) | 2022.08.01 |
| 1주차.파이썬 기초문법 (0) | 2022.07.31 |
