dancoffee

라디오버튼과 체크박스를 커스텀 체크박스로 스타일링 관련 질문 드립니다.

<p>찾아서 확인했습니다.</p><p>감사합니다.</p>

'기본형 드롭다운 네비게이션'이 zip 화일 안에 없습니다.

세로 슬라이드에서 font-size: 0이 적용되지 않습니다.

<pre><code class="language-html">소스를 부분만 올려서 죄송합니다.

네비게이션-상단-03-개별(완성)입니다.

HTML은 바뀐 부분이 없고 CSS는 위에 올린 부분만 변경했습니다.
header 부분에 float를 적용하거나 display:flex를 적용해도 동일한 문제가 나타납니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>네비게이션-상단-03-개별(완성)</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="header-inner">
        <header>
          <div class="header-logo">로고</div>
          <div class="navi">
            
            <ul class="menu">
              <li>
                <a href="#none">MENU-1</a>
                <div class="sub-menu">
                  <a href="#none">SUBMENU-1</a>
                  <a href="#none">SUBMENU-2</a>
                  <a href="#none">SUBMENU-3</a>
                  <a href="#none">SUBMENU-4</a>
                </div>
              </li>
              <li>
                <a href="#none">MENU-2</a>
                <div class="sub-menu">
                  <a href="#none">SUBMENU-1</a>
                  <a href="#none">SUBMENU-2</a>
                  <a href="#none">SUBMENU-3</a>
                  <a href="#none">SUBMENU-4</a>
                </div>
              </li>
              <li>
                <a href="#none">MENU-3</a>
                <div class="sub-menu">
                  <a href="#none">SUBMENU-1</a>
                  <a href="#none">SUBMENU-2</a>
                  <a href="#none">SUBMENU-3</a>
                  <a href="#none">SUBMENU-4</a>
                </div>
              </li>
              <li>
                <a href="#none">MENU-4</a>
                <div class="sub-menu">
                  <a href="#none">SUBMENU-1</a>
                  <a href="#none">SUBMENU-2</a>
                  <a href="#none">SUBMENU-3</a>
                  <a href="#none">SUBMENU-4</a>
                </div>
              </li>
            </ul>
            
          </div>
        </header>
      </div>
      <div class="content-inner">
        <section class="slide">
          <div>이미지 슬라이드</div>
        </section>
        <section class="items">
          <div class="news">공지사항(C.1)</div>
          <div class="banner">갤러리(C.2)</div>
          <div class="shortcut">바로가기(C.3)</div>
        </section>
      </div>
      <div class="footer-inner">
        <footer>
          <div class="footer-logo">Copyright</div>
          <div class="footer-content">
            <div>SNS</div>
            <div>패밀리 사이트</div>
          </div>
        </footer>
      </div>
    </div>

    <script type="text/javascript" src="script/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="script/custom.js"></script>
  </body>
</html>


@charset "utf-8";

body {
    margin: 0;
    font-size: 15px;
    color: #222;
    line-height: 1.6em;
    background-color: #fff;
}
a {
    text-decoration: none;
    color: #222;
}
.container {}

/* Header */
.header-inner {
    background-color: #eee;
}
header {
    border: 1px solid #ccc;
    width: 1200px;
    margin: auto;
    height: 100px;
    /* flex */
    display: flex;
    justify-content: space-between;
    /* flex */
}
header div {
    height: 100px;
    border: 1px solid #ccc;
}
.header-logo {
    width: 200px;
    /* header에 display : flex 적용 */
    /* float: left; */
    text-align: center;
    line-height: 100px;
}
.navi {
    width: 600px;
    /* header에 display : flex 적용 */ 
    /* float: right; */
}

/* Content */
.content-inner {
    width: 1200px;
    margin: auto;
}
.slide {
    width: 1200px;
    height: 300px;
    text-align: center;
    line-height: 300px;
}
.slide div {
    border: 1px solid #ccc;
    height: 300px;
}

.items {
    overflow: hidden;
}
.items > div {
    border: 1px solid #ccc;
    height: 200px;
    float: left;
    box-sizing: border-box;
}
.news {
    width: 500px;
    text-align: center;
    line-height: 200px;
}
.banner {
    width: 350px;
    text-align: center;
    line-height: 200px;
}
.shortcut {
    width: 350px;
    text-align: center;
    line-height: 200px;
}

/* Footer */
.footer-inner {
    background-color: #eee;
}
footer {
    width: 1200px;
    margin: auto;
    overflow: hidden;
}
footer > div {
    border: 1px solid #ccc;
    height: 100px;
    float: left;
    box-sizing: border-box;
}
.footer-logo {
    width: 1000px;
    text-align: center;
    line-height: 100px;
}
.footer-content {
    width: 200px;
    text-align: center;
    line-height: 100px;
}
.footer-content div {
    border: 1px solid #ccc;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

/* Navigation */
.menu {
    padding: 0;
    margin-top: 30px;
    list-style: none;
    display: flex;
}
.menu li {
    /* float: left; */
    width: 25%;
    text-align: center;

    border: 1px solid #000;
    box-sizing: border-box;
    background-color: #fff;
}
.menu li > a {
    display: block;
    padding: 5px;
    transition: 0.5s;
}
.menu li:hover > a {
    background-color: #000;
    color: #fff;
}
.sub-menu {
    height: 135px;
    display: none;
}
.sub-menu a {
    display: block;
    padding: 5px;
    transition: 0.5s;
}
.sub-menu a:hover {
    background-color: #000;
    color: #fff;
}

</code></pre>

dancoffee

投稿