항해 16기/CSS 사전강의
[LEV.1-2] CSS 활용하기
해갈
2023. 8. 3. 17:45
오늘부터 항해16기에 본과정에 들어가기 전 필수코스를 진행했습니다.
이전까지 들었던 웹개발 종합반 복습을 포함해 CSS 강의와 SQL 강의 중
하나를 선택해 8/3 ~ 8/7 까지 오후 3시부터 오후 9시까지 진행된 예정인데요.
저는 프론트엔드 개발자를 준비하고 있기에 CSS 강의를 선택했습니다.
때문에 이번 'CSS 기초강의' 카테고리에선
5일 동안 배울 내용과 수업을 들으면서 어려웠던 점에 대한 내용을 기술할 예정입니다.
배웠던 내용
이번 강의에서 배웠던 내용은 앞에서 배운 CSS 내용을 갖고 복습하면서
전보다 많은 클래스를 지정해 구역, 텍스트, 버튼 등 각각의 디자인을 달리 하고,
전에 쓰지 않았던 구글 폰트를 입히고, margin 을 좀 더 적극적으로 활용해서
기존에 있던 '띵동 로그인 페이지' 를 클린코딩해 보았습니다.
prac02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
font-family: 'Pretendard', serif;
}
.wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
margin: 70px auto auto auto;
padding: 80px 50px 50px 50px;
border: 1px solid lightgray;
border-radius: 8px;
}
.wrap > img {
width: 90px;
height: 46px;
margin-bottom: 40px;
margin-right: auto;
}
.context {
font-size: 22px;
color: rgb(38, 52, 61);
line-height: 1.5;
margin-right: auto;
margin-bottom: 40px;
}
.button {
width: 320px;
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: bold;
font-family: Pretendard;
border-radius: 8px;
border: none;
background-color: rgb(255, 226, 55);
cursor: pointer;
color: rgb(28, 29, 30);
}
span {
margin-top: 26px;
}
</style>
</head>
<body>
<div class="wrap">
<img
src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg"
/>
<div class="context">
<p>매주 월요일, <br />내 강의실에 찾아오는 <br />코딩학습지</p>
</div>
<button class="button">카카오로 1초만에 시작하기</button>
<span>이메일로 시작하기</span>
</div>
</body>
</html>느낀 점
이전에 프로젝트를 했던 경험에서 CSS 코드를 작성할 때 어려웠던 점은
flex 에 대한 개념이 부족해서 대부분의 구역(div)의 display 를 block 속성으로만 작성하느라
margin, padding, float 등 1px 1px씩 움직이고, 수정하느라 애를 먹었었습니다.
이번 강의를 통해 flex 에 대한 개념이 조금씩 잡혔고,
마지막엔 이를 활용하니 디자인에 맞추기 위한 미세한 작업이 줄어들어서
코딩을 하는 데에 이전보다 오랜 시간이 걸리지 않았습니다.