CSS 7차시

# Dropdown

    <style>
        .container {
            display: inline-block;     // inline-block: 컨텐츠에 필요한 만큼만 공간을 차지
            position: relative;
        }
        .container:hover ul {     // container에 curser가 hover될 때 ul의 display가 none에서 block로 바뀐다
            display: block;
        }
        button {
            padding: 0.5rem;
            cursor: pointer;
            background-color: #333;
            color: #fff;
            border: none;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;

            border: 1px solid #ddd;
            width: 200px;
            display: none;     // ul을 보이지 않게 만듦
            position: absolute;     // 화면의 공간을 차지하지 않고 떠있는 형태를 만든다
            background-color: #fff;
        }
        ul li {
            padding: 0.5rem;
        }
        ul li:hover {
            background-color: #eee;
        }
    </style>

    <div class="container">
        <button>Dropdown</button>
        <ul>
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </div>

    <p>...</p>

 

---

# Modal

<h1>Modal</h1>
    <style>
        .container {
            background-color: rgba(0 0 0 / 0.2);     // 투명도를 설정하지 않으면 뒤에 Modal이 보이지 않음
            position: fixed;     // viewpoint를 기준으로 삼음 (창 크기)
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .item{

            position: relative;
            background-color: #fff;
            padding: 1rem;
            max-width: 300px;
            margin: 100px auto 0;     // 중앙에 위치시킴
            /* margin: top left/right bottom */
            /* 상하좌우를 모두 표시할 때는 시계방향으로 표시 */
        }

        button {
            position: absolute;
            top: 0; right: 0;
            font-size: 1.5rem;
            border: none;
            background-color: transparent;
        }
    </style>

    <div class="container">
        <div class="item">
            <h1>Heading</h1>

            <button>&times;</button>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
        </div>
    </div>

 

---

# Navigation: horizontal / vertical

<style>
        nav{
            background-color: #333;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;

           /* flex-direction: column; */     <-- vertical nav로 만들기 위한 문장.
        }
        a {
            color: #fff;
            text-decoration: none;     //anchor teg의 밑줄(기본값)을 없앰
            display: block;
            /* anchor teg의 기본값이 inline이기 때문에 block로 바꾸어 padding이 적용될 수 있게 함 */
            /* display와 관계없이 flex item이면 자동으로 row 
            padding: 0.5rem;
        }
        a:hover {
            background-color: #444;
        }

        @media (min-width: 640px) {     // 창의 크기가 변할 때 반응형(640px부터는 horizontal nav)
            ul {
                flex-direction: row;
            }
    </style>

    <nav>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>

---

# Navigation: submenu

 

 

    <style>
        /* body {     // 메뉴를 상단에 고정하기 위하여 상단에 여백을 두고 스크롤이 생기도록 최소 높이 지정
            padding-top: 3rem;
            min-height: 1000px;
        } */
        nav {
            border: 1px dashed;
            background-color: #333;
            /* position: fixed;     // 메뉴바 viewpoint기준 상단에 고정
            width: 100%;
            top, left: 0; */
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
            color: #fff;
            display: block;
            padding: 0.5rem;
        }
        a:hover {
            background-color: #444;
        }
        nav > ul {      // nav > ul: navigation 바로 밑의 ul 
            display: flex;
        }
        button {
            height: 100%;
            cursor: pointer;
            background-color: #333;
            color: #fff;
            border: none;
            font-size: 1rem;     // 기본적으로 버튼의 폰트 사이즈는 일반폰트보다 작음
        }
        button:hover {
            background-color: #444;
        }
        .container {
            position: relative;
        }
        .container:hover ul {     // class container위에 마우스가 hover되어 있을 때 ul의 display 변환
            display: block;
        }
        .container ul {
            position: absolute;
            /* right: 0; */      // dropdown list의 오른쪽 margin 0
            width: 200px;
            border: 1px solid #ddd;
            display: none;

            background-color: #fff;
        }
        .container li {
            padding: 0.5rem;
        }
        .container li:hover {
            background-color: #eee;
        }
    </style>

    <nav>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="container">
                <button>Dropdown +</button>
                <ul>
                    <li>list item</li>
                    <li>list item</li>
                    <li>list item</li>
                </ul>
            </li>
        </ul>    
    </nav>