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>Wecode Jonghyeok</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<img class="main-background" src="frankfurt.jpg" alt="">
<section class="contents">
<h1 class="title">Hi, there!<br></br>I'm Jonghyeok!</h1>
<ul class="sub-contents">
<li>여행 다니는 것을 좋아합니다! 요즘엔 여행 vlog로 대리만족 하고 있어요✈️</li>
<li>축구를 좋아하고 여행지에서 유니폼을 FLEX 해요⚽️</li>
<li>향긋한 커피☕️와 청량한 맥주를 즐겨요🍻</li>
<li>개발자가 되기 위해 한걸음 한걸음 가고 있어요📝</li>
</ul>
<div class="blank"></div>
<div class="read-more">👇🏻 나에 대해 더 알고 싶다면! 👇🏻</div>
<div class="logos">
<a href="https://velog.io/@dev_marco" target="_blank">
<img class="logo-image" src="vel_logo.jpeg" alt="">
</a>
<a href="https://github.com/devMarco14" target="_blank">
<img class="logo-image" src="git_logo.png" alt="">
</a>
<a href="https://asiastore2.fcbayern.com/ko/" target="_blank">
<img class="logo-image" src="bay_logo.png" alt="">
</a>
</div>
</section>
</div>
</body>
</html>css
@import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap');
구글 폰트 url
body {
margin: 0;
}
.container{
width: 100vw; 웹에 맞게 가로 그림사이즈를 조절한다.
height: 100vh; 웹에 맞게 세로 그림사이즈를 조절한다.
position: relative; 사진위에 글을 올리기위해 사용(부모)
color: #eee;
}
.main-background{
width: 100%; 그림사이즈를 창에 전부 채운다(가로)
height: 100%; 그림사이즈를 창에 전부 채운다(새로)
object-fit: cover; 한 창안에는 무조건 그림 하나
filter: brightness(0.5); 글씨를 잘 보이게 하기 위해 그림을 어둡게한다
}
.contents {
width: 100%;
height: 100%;
position: absolute; 사진위에 글을 올리기 위해 사용(자식)
left: 0; 첫 시작점을 맨 앞으로 하기위해 left와top을 0으로 시작
top: 0; x축과y축을 생각하면 이해하기 쉽다.
display: flex; 컨테이너가 차지하는 공간에 맞게 사이즈를 조정
flex-direction: column; 컨텐츠 안의 박스들을 세로로 정렬한다.
justify-content: center; 새로정렬 후 가운데 정렬
}
.title {
text-align : center;
/* margin-top: 250px; */
font-size: 50px;
font-family: 'Montserrat', sans-serif;
line-height: 25px; 폰트사이 세로 자간줄이기
}
.sub-contents{
list-style: none; li 태그의 .표시를 사라지게 함
padding-left: 0;
text-align: center;
font-size: 18px;
font-family: 'Gamja Flower', cursive;
}
.blank {
margin: 100px;
}
.logo-image{
width: 40px;
height: 40px;
border-radius: 50%; 로고를 둥글게
margin-left: 7px;
margin-right: 7px;
}
.read-more{
text-align: center;
font-size: 27px;
/* margin-bottom: 10px; */
font-family: 'Gamja Flower', cursive;
}
.logos {
text-align: center;
}
@media screen and (max-height: 768px) { 반응형으로 대응하기 위한 속성
.blank {
margin: 50px;
}
}