[UXUI 웹디자인] 1달차 과제_11 / G마켓 푸터 메뉴 만들기

https://ninefloor.github.io/web-practice/work/11/

ninefloor.github.io

<!DOCTYPE html>

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>

  <body>
    <div id="menu">
      <ul>
        <li>
          <a href="#">G마켓 소개</a>
        </li>
        <li>
          <a href="#">채용정보</a>
        </li>
        <li>
          <a href="#">이용약관</a>
        </li>
        <li>
          <a href="#">개인정보처리방침</a>
        </li>
        <li>
          <a href="#">청소년보호정책</a>
        </li>
        <li>
          <a href="#">전자거래금융약관</a>
        </li>
        <li>
          <a href="#">제휴·광고</a>
        </li>
      </ul>
    </div>
  </body>
</html>

/* 예제용 기본 속성 시작 */

* {
  margin: 0;
  padding: 0;
}
@font-face{
    src: url("../fonts/GmarketSansTTFMedium.ttf");
    font-family: "gmedium";
}
a {
  text-decoration: none;
  color: rgb(83, 83, 83);
  font-size: 14px;
  font-family: "gmedium";
}
ul {
  list-style-type: none;
}
body {
  padding: 10px;
  box-sizing: border-box;
}
h1 {
  margin-top: 10px;
}

/* 예제용 기본 속성 끝 */


#menu{
    width: 920px;
    height: 45px;
    border-top: 0.5px solid rgb(206, 206, 206);
    border-bottom: 0.5px solid rgb(206, 206, 206);

    padding: 10px;
    box-sizing: border-box;
}

#menu ul{
    margin: 0 auto;
}

#menu ul li{
    float: left;
    margin-left: 25px;
    position: relative;
}

#menu ul li::after{
    content: ' ';
    width: 1px;
    height: 14px;
    background-color: rgb(206, 206, 206);
    display: inline-block;

    position: relative;
    top: 2px;

    margin-left: 18px;
}

#menu>ul>li:nth-child(4){
    font-weight: bold;
}

#menu>ul>li:nth-child(7):after{
    display: none;
}

티스토리툴바

[UXUI 웹디자인] 1달차 과제_11 / G마켓 푸터 메뉴 만들기

티스토리툴바