[프론트엔드] 메인페이지

초안

링크

html

<!-- 완료 : 마무리 작업 -->

<div class="con">
  <div class="logo-bar">
    <ul>
      <li><a href="#">Dolphin</a></li>
    </ul>
    <div>
      <a href="#">로그인</a>
      <a href="#">회원가입</a< /li>
    </div>
  </div>

  <div class="menu-bar">
    <nav class="menu-box-1">
      <ul class="inline-grid">
        <li><a href="#">남성의류</a></li>
        <li><a href="#">여성의류</a></li>
        <li><a href="#">기타</a></li>
        <li><a href="#">고객센터</a></li>
      </ul>
    </nav>
  </div>
  <div class="top-image-bar">
    <img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKTcWH%2FbtrHqCW20xp%2Fu2fWAuK6K1tjHHhUUBLirk%2Fimg.png" alt="">
  </div>
    <div class="bottom">
      <div class="text1">
        <hr>
        <p>돌핀</p>
        <p>대표이사 : 돌핀 | 사업자등록번호:버언호 | 통신판매업 신고</p>
        <p>(주)돌핀 | 주소: 대전시 서구 둔산동 어딘가</p>
        <p>공부를 위해 만든 페이지 입니다.</p>
        <p>안전거래센터 <a href="#">신고하기</a></p>
      </div>
    </div>
</div>

CSS

/* 폰트 */
@font-face {
    font-family: 'BMJUA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html > body,
html > body input,
html > body select,
html > body textarea,
html > body pre,
html > body button {
  font-family:"BMJUA";
  color: #333;
  text-underline-position: under;
  line-height:1.3;
}


/* 노말라이즈 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

/* 라이브러리 */
.con {
  width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.inline-grid {
  font-size:0;
}

.inline-grid > * {
  font-size:1rem;
  display:inline-block;
  vertical-align:top;
  box-sizing:border-box;
}

/* 커스텀 */
.logo-bar{
  display:inline-block;
  width: 100%;
  margin-top:20px;
}

.logo-bar > div{
  float:right;
}

.logo-bar > ul{
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size:4rem;
  font-weight:bold;
}
/* 로그인, 회원가입 */
.logo-bar a{
  text-decoration: none;
  padding: 10px 10px;
  font-weight:bold;
}

/* 메뉴 */

.menu-bar {
  margin-top:20px;
}

.menu-box-1 > ul > li {
  width:calc(100% / 4);
  font-size:1.5rem;
}

.menu-box-1 > ul > li > a {
  display:block;
  text-align:center;
  font-weight:bold;
  border:0 solid black;
  border-width:0 1px;
}

.menu-box-1 > ul > li:hover > a {
  color:brown;
}

.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-image-bar {
  margin-top:20px;
}

.top-image-bar > img {
  width:100%;
}

/* 바텀 */
.bottom{
  height:100%;
  width:100%;
  background-color:#d2d2d2;
  
}

.text1 > p {
  margin : 10px;
}

.text1 > p > a{
  text-decoration:underline;
}

참고할 수 있는 사이트

• 쇼핑몰 footer 작성
  링크
• 색상 코드표
  링크
• CSS 내비게이션바 양쪽 정렬
  링크