Resoft홈페이지 W2-1/5

MINJOO·2022년 7월 25일

오늘의 코드

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>
        project_t {
            margin-top: 480px;
            margin-left: 240px;
        }
        
    </style>
</head>
<body>
<header>
    <div id="header">
        <span class="span">사업현황</span>
    </div>       
</header>

    <div class="project_t">
        <p class="bold">에코스</p>
        <p class="medium">ECO-Clean Earth</p>

        <img class="background" src="/img/Ecoce_back.png" alt="" width="679px" height="592px" X="240px" Y="618px">
        <img class="front" src="/img/Ecoce_front.png" alt="" width="475px" height="687px" X="469px" Y="676px">
    </div>
    <div class="project_script">
        <p class="bold">국내 최초 <br>
        <br>탄소중립 실천인증 플랫폼</p>
    </div>
    <img src="/img/Ecoce.png" alt="" width="452px" height="125px" X="1228px" Y="846px">
    <div class="text">
        <h3>ECO-Clean Earth</h3> 
    </div>
</body>
</html>


부모태크로 해서 이미지하나는 백그라운드에 
자식태클고 해서 모바일이미지는 div태크로 구현

CSS코드


p {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0px 0px 0px 0px; line-height: 150%;
}


.bold {
    font-weight: 700;
    font-size: 40px;
    top: 480px;
    left: 240px;
    text-align: left;
    font: normal normal bold 40px/58px Noto Sans KR;
    letter-spacing: 0px;
    opacity: 1;
}
.medium {
    font-weight: 500;
    font-size: 18px;
    text-align: left;
    top: 538px;
    left: 240px;
    color: #C8C8C8;
    font: normal normal medium 18px/26px Noto Sans KR;
    letter-spacing: 0px;
    opacity: 1;
}


#header{
    width: 1920px;
    height: 300px;
    top:80px;
    left:0px;
    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;
}

.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;
}

지난번에 제목부분에 폰트가 바뀌지 않은 부분과 아래 소제목들의 폰트를 바꿔 보았다. 한글과 영문 소제목 p태그간에 간격이 발생하여 css코드에서 패딩값을 모두 0으로 주니 해결되었다.