피키캐스트 실습

by David Oh

HTML

<body>
    <div id="body">
      <div class="header" id="header">
        <div class="header-wrap">
          <div class="header-nav1" id="header-nav1-logo">
            <a class="logo img" href="piki.html">
              <img class="logo img" id="logo-img"...

CSS

body {
  margin:0px;
  padding:0px;
  width: 100%;
}

ul, ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

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

#header {
  position: fixed;
  background-color: white;
  width: 100%;
}

.header-wrap {
  overflow: hidden;
  width: 1280px;
  margin: 0 auto;
  padding: 10px 0;
}

.header-nav1 {
  height: 30px;
  float: left;
}

.header-nav2 {
  height: 30px;
  float: right;
}


.logo {
  float: left;
  height: 30px;
}

.search {
  float: left;
  margin: 0px;
  padding: 0px;
  height: 30px;
  border: none;
}

.search.text {
  width: 350px;
  background-color: #D3EEF9;

}

.search.submit {
  background-color: #44B6E6;
  color: white;
  cursor: pointer;
}

.menu {
  float: right;
  height: 30px;
  color: #26A9E1;
}

.menu.log{
  text-decoration: none;
  font-size: 13px;
  font-family: '돋움';
}

#header-nav1-logo {
  margin-left: 20px;
  width: 150px;
}

#header-nav1-search {
  margin-left: 130px;
}

#header-nav2-menu {
  margin-right: 20px;
  margin-left: 20px;
}

#header-nav2-log {
  padding-right: 30px;
  border-right: 1px solid #D3EEF9;
}



/* 중간 */
#middle {
  padding-top: 50px;
  width: 100%;
  background-color: #efefef;
  overflow: hidden;
}

.middle-wrap {
  width: 1280px;
  margin: 0 auto;
  padding-top: 10px;
}

.navi-wrap {
  width: 290px;
  margin-right: 10px;
  float: left;
  position: fixed;
}

.navi-top {
  height: 280px;
  text-align: center;
  color: white;
  border: 1px solid #d8d8d8;
  background-color: #26A9E1;
  position: relative;
}

.navi-top-desc {
  font-size: 19px;
  font-family: '돋움';
}

#navi-top-bttn {
  font-family: '돋움';
  font-size: 15px;
  color: white;
  background-color: transparent;
  border: 1px solid white;
  border-radius: 30px;
  padding: 7px 20px;
}

#navi-top-bttn:hover {
  font-family: '돋움';
  font-size: 15px;
  color: #26A9E1;
  background-color: white;
  border: 1px solid white;
  border-radius: 30px;
  padding: 7px 20px;
  cursor: pointer;
}

#navi-top-sign {
 ...