HTML_CSS_030_사이트모작_05

작업_5

이미지 삽입

HTML

<div class="con">
  <div class="logo-bar">
    <a href="#">BMX</a>
  </div>
  <div class="menu-bar">
    <nav class="menu-box-1">
      <ul class="inline-grid">
        <li><a href="#">BRAND</a></li>
        <li><a href="#">VISUAL</a></li>
        <li><a href="#">STYLE</a></li>
        <li><a href="#">MEDIA</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">STORE</a></li>
        <li><a href="#">CUSTOMER</a></li>
      </ul>
    </nav>
  </div>
  <div class="top-img-bar">
    <img src="https://picsum.photos/id/10/1200/500" alt="">
  </div>
  <div class="top-2-img-bar inline-grid">
    <img src="https://picsum.photos/id/11/600/600" alt="">
    <img src="https://picsum.photos/id/12/300/300" alt="">
    <img src="https://picsum.photos/id/13/300/300" alt="">
  </div>
</div>

CSS

/* 노멀라이즈 */
body,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
/* 인라인그리드 */
.inline-grid {
  font-size: 0;
}
.inline-grid > * {
  font-size: 1rem;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}
/* 라이브러리 */
.con {
  /*   임시 크기 지정 */
  width: 80vw;
  height: 100%;
/*   background-color: #afafaf; */
  /*   가운데 정렬 */
  margin-left: auto;
  margin-right: auto;
}
/* logo-bar 구현 */
.logo-bar {
  /*   background-color: red; */
  text-align: center;
  margin-top: 20px;
}
.logo-bar > a {
  /*   background-color: gold; */
  font-weight: bold;
  font-size: 3rem;
}
.menu-box-1 {
  margin-top: 20px;
}
.menu-box-1 > ul > li {
  /*   background-color:gold; */
  width: calc(100% / 7);
  text-align: center;
}
.menu-box-1 > ul > li > a {
  /*   background-color:green; */
  display: block;
  font-weight: bold;
  border: 0 solid black;
  border-width: 0 1px;
}
.menu-box-1 > ul > li:hover > a {
  color: blue;
  text-decoration: underline; 
}
.menu-box-1 > ul > li:first-child > a {
  border-left-width: 2px;
}
.menu-box-1 > ul > li:last-child > a {
  border-right-width: 2px;
}
/* 이미지 삽입 */
.top-img-bar {
  margin-top: 20px;
}
.top-img-bar > img {
  width: 100%;
}
.top-2-img-bar {
  margin-top: 20px;
}
.top-2-img-bar > img:nth-child(1) {
  width: 50%
}
.top-2-img-bar > img:nth-child(2) {
  width: 25%
}
.top-2-img-bar > img:nth-child(3) {
  width: 25%
}