과제. 자기소개 페이지 꾸미기
학습 목표
- HTML의 요소를 CSS로 선택(select)할 수 있다.
- 각 요소가 하나의 박스라는 것을 이해한다.
- 원하는 CSS 속성을 검색해서 사용할 수 있다.
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">
<title>주냥하는 자기소개</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="container">
<header>
<h1>안녕하세요😌
<br>
개발자❓가 아닌 개발자❗️를
<br>
꿈꾸는 양연주입니다</h1>
</header>
<div>
<section class="section-me">
<img src="/Users/yj/Desktop/practice/me.jpeg" />
</section>
<section class="section-goal">
<ul class="ul-goal">
🌿 목표
<li class="li-goal">🌟 수료 후 업력 5년 이상인 기업에 프론트엔드 개발자로 입사 🌟</li>
</ul>
</section>
<section>
<ul class="ul-plan">
🌿 다짐
<li class="li-plan">▶️ 매일 기록 남기기</li>
<li class="li-plan">▶️ 체력단련을 위해 운동하기</li>
<li class="li-plan">▶️ 아이디어 노트 쓰기</li>
<li class="li-plan">▶️ 개인 공부 시간 최소 2시간 이상 갖기</li>
</ul>
</section>
</div>
</div>
</body>
</html>index.css
* {
}
body {
margin: 0 auto;
max-width: 500px;
text-align: justify;
background-color: #F8EDE3;
}
#container {
padding: 20px;
border-right: 2px dotted #798777;
border-left: 2px dotted #798777;
}
ul {
list-style: none;
}
img {
width: 100%;
border-radius: 20px;
}
.section-goal {
}
.ul-goal {
font-weight: 500;
margin-left: -10px;
margin-bottom: 30px;
}
.li-goal {
margin-top: 10px;
}
.ul-plan {
font-weight: 500;
margin-left: -10px;
margin-bottom: 30px;
}
.li-plan {
margin-top: 10px;
}결과물
마무리
그다지 만족스럽진 않아서... 조금 더 공부하면서 디벨롭 해보는 걸로 ㅎㅎ
감성있는 개발자를 꿈꿔요