오늘부터 항해16기에 본과정에 들어가기 전 필수코스를 진행했습니다.
이전까지 들었던 웹개발 종합반 복습을 포함해 CSS 강의와 SQL 강의 중
하나를 선택해 8/3 ~ 8/7 까지 오후 3시부터 오후 9시까지 진행된 예정인데요.
저는 프론트엔드 개발자를 준비하고 있기에 CSS 강의를 선택했습니다.
때문에 이번 'CSS 기초강의' 카테고리에선
5일 동안 배울 내용과 수업을 들으면서 어려웠던 점에 대한 내용을 기술할 예정입니다.
배웠던 내용
3장에서는 '스스로 다지기' 인 만큼 1, 2장에서 배웠던 내용을 갖고
모바일 청첩장을 클린코딩해보았습니다.
왠만해선 힌트들을 보지 않고, 예시만 보고서 직접 코딩해보았습니다.
청첩장\index.html
<!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;
}
h1 {
background-color: pink;
color: white;
padding: 16px;
font-weight: 500;
}
.wrap {
width: 350px;
margin: auto;
}
h1 {
display: block;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
/* 사진 */
.pic {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.pic > h2 {
color: pink;
letter-spacing: 3px;
}
.pic > img {
width: 250px;
border: 3px solid pink;
margin-top: 10px;
margin-bottom: 10px;
}
.pic > span {
color: pink;
letter-spacing: 3px;
}
/* 이름 */
.name {
color: pink;
font-size: 24px;
font-weight: 500;
border-top: 1px solid pink;
border-bottom: 1px solid pink;
width: 200px;
margin: 30px auto 30px auto;
text-align: center;
}
/* 내용 */
.main {
background-color: pink;
color: white;
padding: 20px;
}
.invitation {
font-size: 20px;
text-align: center;
}
.content {
line-height: 30px;
margin-top: 30px;
margin-bottom: 30px;
}
/* 장소 */
.place {
text-align: center;
}
/* footer */
.bottom {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 30px;
}
.bottom > p {
color: pink;
font-weight: 500;
margin-bottom: 10px;
}
.bottom > input {
width: 250px;
margin-bottom: 10px;
}
.bottom > textarea {
width: 250px;
height: 100px;
margin-bottom: 10px;
}
.bottom > button {
width: 150px;
height: 40px;
background-color: pink;
color: white;
border: none;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>영희와 철수의 첫 시작을 축하해주세요</h1>
<div class="pic">
<h2>Save The Date</h2>
<img src="image.png" />
<span>12.31.SUNDAY.PM.12:30</span>
</div>
<div class="name">김영희 & 이철수</div>
<div class="main">
<p class="invitation">INVITATION</p>
<p class="content">
서로 다른 두 사람이 만나 <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>
<input type="text" placeholder="이름" />
<textarea placeholder="이름을 남겨주세요"></textarea>
<button>메시지 남기기</button>
</div>
</div>
</body>
</html>
느낀 점
처음부터 직접 코딩을 하면서 어려웠던 점은
각 태그에 알맞는 CSS 코드를 작성하는 것보다는
빈 화면에 무엇부터 해야할지 막막했다는 것이었습니다.
이전엔 어디서부터 어떻게 시작해야할지 몰랐었는데,
앞에서 들었던 수업내용을 상기하며 우선 구현하고자 하는 웹페이지의 구역을 나눠
어디서부터 어디까지 구역을 나눠야 효율적일지 생각하는 것도 중요하다고 느꼈습니다.
'항해 16기 > CSS 사전강의' 카테고리의 다른 글
| [Lev.2] Netflix 클론코딩 (0) | 2023.08.04 |
|---|---|
| [Lev.1-5] 부트스트랩 활용하기 (0) | 2023.08.03 |
| [Lev.1-4] 부트스트랩 (0) | 2023.08.03 |
| [LEV.1-2] CSS 활용하기 (0) | 2023.08.03 |
| [LEV.1-1] HTML, CSS 시작하기 (0) | 2023.08.03 |
