오늘부터 항해16기에 본과정에 들어가기 전 필수코스를 진행했습니다.
이전까지 들었던 웹개발 종합반 복습을 포함해 CSS 강의와 SQL 강의 중
하나를 선택해 8/3 ~ 8/7 까지 오후 3시부터 오후 9시까지 진행된 예정인데요.
저는 프론트엔드 개발자를 준비하고 있기에 CSS 강의를 선택했습니다.
때문에 이번 'CSS 기초강의' 카테고리에선
5일 동안 배울 내용과 수업을 들으면서 어려웠던 점에 대한 내용을 기술할 예정입니다.
배웠던 내용
첫 번째로 들은 LEVEL1 의 'HTML, CSS 시작하기' 에선
HTML 에서 주로 쓰이는 태그를 익히고,
꾸미고 싶은 HTML 태그를 class 라는 식별자를 통해
해당하는 태그를 선택해 원하는 대로 꾸며줄 수 있는 CSS 에 대해 배워보았습니다.
login.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>
.mytitle {
background-image: url('https://static.spartacodingclub.kr/media/main_carousel/1kq0i51tuqc2kfzp.png');
background-position: center;
background-size: cover;
width: 300px;
height: 250px;
color: white;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrap {
width: 300px;
margin: auto;
}
.mybtn {
width: 300px;
height: 50px;
border-radius: 10px;
border: none;
background-color: brown;
color: white;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h3>코딩의 시작, 띵동코딩</h3>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="password" /></p>
<button class="mybtn">로그인하기</button>
</div>
</body>
</html>
느낀 점
첫 번째로 들은 LEVEL1 의 '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-3] HTML, CSS 복습하기 (0) | 2023.08.03 |
| [LEV.1-2] CSS 활용하기 (0) | 2023.08.03 |
