간단한 블로그 만들기(다듬기)

header 위치 여백 조정

header{
  width: 1240px;
  margin: 0 auto 50px;
}

 

header의 nav 위치 조정 및 글꼴,배경 색깔, 테두리 지정 

header nav ul{
  display: flex;
  justify-content: center;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
  background-color: aquamarine;
  padding:12px 0 10px;
  li{
    margin: 0 20px;
    a{
      font-size: 20px;
      font-weight: bold;
      color: darkgreen;
    }
    a:hover{
      text-decoration: underline double;
    }

  }
}

 

 

hover는 마우스(커서)를 올렸을때 스타일을 변경할수 있는 가상의 클래스이다.

text-decoration: 선의 위치 선의 종류 선의 색상 선의 두께;

 

a:hover{
  text-decoration: underline double;
}

 

이미지 위치 조정

h1{
  text-align: center;
  padding: 20px 0 16px;
}

 

 

문서 구조에 영향을 주지않으면서 HTML을 그룹화 하기 위해 div태그와 span태그 사용

main과 aside영역을 다 감싸도록 div태그 설정

<div>
<main>
  <h2> 홈페이지에 오신걸 환영합니다!</h2>
  <time datetime="2024-11-22">
    2024-11-22
  </time>
  <p> 뭘 적어야 잘 적었다고 소문이 날까</p>
    <figure>
  <img src="../img/토끼.jpg" alt="이미지를 찾을수 없음">
</figure>
<p style = "text-align: center; font-weight: bold;"> 귀요미 토끼 사진 </p>
<article>
  <section>
  <h3> 대충 기사 제목 </h3>
  <p>
    대충 기사 내용
  </p>
  </section>
</article>
</main>

<aside>
  <img src="../img/당근.png" alt="당근당근">
  <nav>
    <h2 style="font-size: 20px"> Category </h2>
    <ul>
      <li> <a href="https://store.steampowered.com/?l=koreana" target="_blank"> STEAM </a></li>
      <li> <a href="https://store.epicgames.com/ko/" target="_blank"> EPIC </a></li>
    </ul>
  </nav>
</aside>

</div>

div{
  width: 1240px;
  margin:0 auto 50px;
  display: flex;
  justify-content: space-between;
}

 

 

 

최종본

 

https://github.com/kotlin2024/warming_up

GitHub - kotlin2024/warming_up