오늘의 코드
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>Resoft</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
*{margin: 0px; padding: 0px;}
div.project-t {
padding-left: 240px;
}
.bold {
top: 480px;
left: 240px;
font-size: 40px;
}
.medium {
top: 538px;
left: 240px;
font-size: 18px;
}
.container {
width: 679px;
height: 592px;
overflow: hidden;
position: relative;
}
.container > background {
position: absolute;
top: 618px;
left: 240px;
opacity: 1;
}
p.eco {
font-size: 22px;
}
.ecoce > background {
position: absolute;
top: 846px;
left: 1228px;
opacity: 1;
}
</style>
</head>
<body>
<header>
<div id="header" style="top:80px; left:0px; width: 1920px; height: 300px;">
<span class="span">사업현황</span>
</div>
</header>
<div class="project_t">
<p class="bold">에코스</p>
<p class="medium">ECO-Clean Earth</p>
<div id="container">
<article><img id="front" src="./img/Ecoce_front.png" alt="" width="475px" height="687px" ></article>
</div>
<div style="position: absolute; left:1364px; top:618px;">
<p class="bold-r">국내 최초 <br>
탄소중립 실천인증 플랫폼</p>
</div>
<div id="ecoce"></div>
<p class="eco">ECO-Clean Earth</p>
</div>
</body>
</html>
css코드
project-t {
padding-left: 240px;
}
p {
font-family: 'Noto Sans KR', sans-serif;
margin: 0px 0px 0px 0px; line-height: 150%;
}
.bold {
font-weight: 700;
text-align: left;
font: normal bold 40px/58px Noto Sans KR;
letter-spacing: 0px;
opacity: 1;
}
.medium {
font-weight: 500;
text-align: left;
color: #C8C8C8;
font: normal medium 18px/26px Noto Sans KR;
letter-spacing: 0px;
opacity: 1;
}
#header{
background: rgba(30, 30, 30, 1) 0% 0% no-repeat padding-box;
opacity: 0.;
background-image: url(./img/Head.png);
display:flex;
flex-wrap: nowrap;
justify-content:center;
align-items: center;
padding-left: 0px;
margin-left: 0px;
}
.span {
display: block;
width: 148px;
height: 58px;
left: 886px;
right: 201px;
color: #ffffff;
font-size: 100px;
font: normal bold 40px/58px Noto Sans KR;
letter-spacing: 0px;
opacity: 1;
}
.bold-r {
font-weight: 700;
font-size: 30px;
text-align: right;
font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) var(--unnamed-font-size-30)/var(--unnamed-line-spacing-44) var(--unnamed-font-family-noto-sans-kr);
letter-spacing: var(--unnamed-character-spacing-0);
width: 317px;
height: 88px;
font: normal normal bold 30px/44px Noto Sans KR;
letter-spacing: 0px;
color: #1E1E1E;
opacity: 1;
}
#container {
background: 0% 0% no-repeat padding-box;
background-image: url(./img/Ecoce_back.png);
}
.article {
padding-top: 676px;
padding-left: 469px;
opacity: 1;
}
#ecoce {
background: 0% 0% no-repeat padding-box;;
background-image: url(./img/Ecoce.png);
opacity: 1;
width: 452px;
height: 125px;
position: right;
}
.eco {
font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold) 22px/32px var(--unnamed-font-family-noto-sans-kr);
letter-spacing: var(--unnamed-character-spacing-0);
text-align: right;
font: normal normal bold 22px/32px Noto Sans KR;
letter-spacing: 0px;
color: #1E1E1E;
opacity: 1;
padding-left: 1502px;
width: 178px;
height: 32px;
}결과물
일단 위 사진처럼 대략적인 형태는 잡혔는데 사진들의 배치가 아직 제대로 안잡히고 있다. 그리고 왼쪽에 헤더부분이미지 아래로부터 240px 정도 띄어져야하는데 아무리 html 어느 코드에 추가해야하는지 모르겠다..
느낀점
일단..계속해서 프로젝트 내용들이 추가되니깐 조금 압박감이 느껴지기 시작한다. 알아보고자하는데..왜 안되는지 모르겠다. 일단 다시 마음을 비우고 찾아봐야할거 같다.
코딩 신생아