🖊️html로 이력서를 작성해보자.
📒 참고사항.
display : flex; 쓰지않기, p태그 대신 ul,ol태그 이용 inline-block을 사용하여 되도록이면 기본에 충실하게 작성해보기 padding과 margin을 적절히 사용하면서 만들어 보자.
html구조 잡기
크게 header, main, footer로 잡는 것이 일단 첫번째다.
<html>
<head>
<body>
<header>
#헤더
</header>
<main>
#메인
</main>
<footer>
#푸터
</footer>
</body>
</head>
</html>그냥 간단하게 이렇게 구도를 잡자.
조금 더 조건에 맞게 바꿔보면
<html>
<head>
<title>myprofile_dark</title>
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
<link rel='stylesheet' href='https://websfont.github.io/scoreDream/scoreDream.css' />
<script src="https://unpkg.com/feather-icons"></script>
<style>
main{
width: 768px;
margin: 0 auto;
}
header{
background-color: red;
height: 273px;
}
footer{
width: 768px;
margin: 0 auto;
text-align: center;
margin-bottom: 31px;
}
</style>
<!--헤더-->
<header>
#헤더
</header>
<!--//헤더-->
<!--메인-->
<main>
#메인
</main>
<!--//메인-->
<!-- 푸터-->
<footer>
#푸터
</footer>
<!-- //푸터-->
</head>
</html>그냥 가운데 정렬과 헤더의 높이를 설정해 주었다.
화면은 일단 이렇게 구성된다.
초보 개발자 이야기