김세훈 / Sehoon Kim

I always do what i want it to be.

1 minute read

2022.09.08(목)

혼자서 만들어보는 네이버 YTN뉴스기사

스크린샷 2022-09-08 15 25 40

HTML코드 [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">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="Training.css"/>
    <link rel="stylesheet" href="index_t.css"/>
    <script type="text/javascript" src="Training.js"></script>
    <title>YTN</title>
</head>
<body>
    <header>
        <div class="top">
            <h1><img class="logo" src="/Training/img/네이버뉴스로고.png" alt="네이버뉴스로고" ></h1>
            <div> <h2>구독</h2></div>
            <div> <h3>YTN</h3></div>
        </div>
        <div class="nav">
            <nav>
                <ul>
                    <li><a href="a">주요뉴스</a></li>
                    <li><a href="a">생중계</a></li>
                    <li><a href="a">정치</a></li>
                    <li><a href="a">경제</a></li>
                    <li><a href="a">사회</a></li>
                    <li><a href="a">생활</a></li>
                    <li><a href="a">세계</a></li>
                    <li><a href="a">IT</a></li>
                    <li><a href="a">랭킹</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="postheader">
        <h1>"혼자서 만들어보는 YTN기사 페이지"</h1>
        <h2>입력2022.09.08. 오후 1:26  수정2022.09.08. 오후 1:33 <br> 김세훈 기자<br>
            <img class="postimg" src="/Training/img/김세훈.JPG" alt="김세훈 이미지"></h2>
        
    </div>

</body>
</html>

✅ 아무 도움없이 혼자서 진행하다보니 막히는 부분이 굉장히 많았다.

✅ 아직 레이아웃 짜는법을 정확하게 모르는것 같다.

✅ 반응형으로 만드는데에는 아직 무리가 있다.

CSS코드 [index.css]
html {
  font-size: 20px;
}
body {
  font-size: 1rem;
  
}
header {
  background: rgb(27, 27, 148);
}
.top {
  width: 54.5rem;
  height: 3.2rem;
  margin: 0 auto;
  position: relative;
}
header .logo {
  width: 90px;
}
h1 {
  float: left;
}
h2 {
  float: right;
  font-size: 15px;
  color: aliceblue;
}
h3 {
  text-align: center;
  padding-top: 1.5rem;
  color: aliceblue;
}
.nav li {
  float: left;
}
.nav {
  font-size: 0.7rem;
  height: 2rem;
  display: block;
  line-height: 100%;
  border-top: 0.5px solid white;
}

.nav li ~ li {
  padding-left: 2rem;
}
.postheader {
  width: 54.5rem;
  margin: auto;
  margin-top: 2rem;
  position: relative;
}
.postheader h1 {
  font-size: 40px;
}
.postheader h2 {
  font-size: 12px;
  color: grey;
  float: left;
}
.postimg {
  float: left;
  height: 28rem;
  position: relative;
}
CSS코드 [default.css]
a:hover {
  color: white;
}
a:link {
  color: white;
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
}

✅ CSS공부는 아직 확실히 모자르다. 원하는 위치에 배열하는 것에 많은 어려움을 겪었다.

결과물

YTN MY Page

스크린샷 2022-09-08 22 47 42

Comments

You May Also Enjoy