HTML, CSS 관련 연습 문제

*무지개 만들기

// HTML
<nav>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</nav>

// CSS
nav {
    text-align: center;
}
nav > div {
    background-color: red;
    width: 13%;
    height: 100px;
    display: inline-block;
}

nav > div:nth-child(7n + 2) {
    background-color: orange;
}

nav > div:nth-child(7n + 3) {
    background-color: yellow;
}

nav > div:nth-child(7n + 4) {
    background-color: green;
}

nav > div:nth-child(7n + 5) {
    background-color: blue;
}

nav > div:nth-child(7n + 6) {
    background-color: navy;
}

nav > div:nth-child(7n + 7) {
    background-color: purple;
}

 

*이미지 배치 ( 엘리먼트 4개만 사용하여 )

// HTML
<img src="http://bnx.oa.gg/img/20160913AM105101_1074.jpg" alt=""> 
<img src="http://bnx.oa.gg/img/20160921PM33800_8489.jpg" alt="">
<img src="http://bnx.oa.gg/img/20160913PM122312_9304.jpg" alt="">
<img src="http://bnx.oa.gg/img/20160913PM122323_2917.jpg" alt="">



// CSS
body {
    text-align:center;
}
img:nth-child(1) {
    display:block;
    margin-left: auto;
    margin-right: auto;
}

 

*메뉴 만들기

// HTML
<h2>메뉴 예시</h>

<!-- 메뉴 박스 -->
<nav>
    <!-- 메뉴 -->
    <section>
        <!-- 메뉴 아이템 -->
        <div>
            <!-- 메뉴 아이템 텍스트(클릭하면 이동해야 하므로 a태그 사용)-->
            <a href="#">Home</a>
        </div>
        <div>
            <a href="#">Tutorials</a>
        </div>
        <div>
            <a href="#">Articles</a>
        </div>
        <div>
            <a href="#">Inspiration</a>
        </div>
    </section>
</nav>



// CSS
/* 노말라이즈 항상 먼저 진행*/
/* 노말라이즈 시작 */
body, h2 {
    margin: 0;
}
a {
    color:inherit;
    text-decoration: none;
}
/* 노말라이즈 끝 */
/* 커스텀 */
nav {
    text-align: center;
}
nav > section {
    background-color:#afafaf;
    display: inline-block;
    text-align:center;
    border-radius: 10px;
    padding: 0 20px;
}
nav > section > div {
    display: inline-block;   
}
nav > section > div > a {
    padding: 20px;
    display: block;
    font-weight: bold;
}

nav > section > div:hover > a {
    background-color: black;
    color: white;
}