HTML, CSS 연습문제(메뉴 만들기, 인접동생 숨기기/표시, position)

*메뉴 만들기-1

상단 메뉴박스

// HTML
<!-- 메뉴 박스 -->
<nav>
    <!-- 메뉴 -->
    <section>
        <!-- 메뉴 아이템 -->
        <div>
            <!-- 메뉴 텍스트 -->
            <a href="#">메뉴 아이템 1</a>
        </div>
        <div>
            <a href="#">메뉴 아이템 2</a>
        </div>
        <div>
            <a href="#">메뉴 아이템 3</a>
        </div>
        <div>
            <a href="#">메뉴 아이템 4</a>
        </div>
    </section>
</nav>


// CSS
/*노멀라이즈 시작*/
body {
    margin: 0;
}
a {
    color:inherit;
    text-decoration:none;
}
/*노멀라이즈 끝*/

/*커스텀*/
nav {
    text-align: center;
    margin-top: 10px;
}
nav > section {
    background-color: #9995;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    padding: 0 10px;
    border-radius: 10px;
}
nav > section > div {
    display: inline-block;
}
nav > section > div > a {
    display: block;
    padding: 15px;
}
nav > section > div:hover > a {
    background-color: black;
    color: white;
}

*메뉴 만들기-2

// HTML
<h1>메뉴 연습</h1>
<nav class="menu-box-1">
    <ul>
        <li><a href="#">1차 메뉴 아이템 1</a></li>
        <li><a href="#">1차 메뉴 아이템 2</a></li>
        <li><a href="#">1차 메뉴 아이템 3</a></li>
        <li><a href="#">1차 메뉴 아이템 4</a></li>
    </ul>
</nav>


// CSS
body, ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}
a {
    color: inherit;
    text-decoration: none;
}
.menu-box-1 {
    background-color:red;
    text-align:center;
}
.menu-box-1 > ul {
  display: inline-block;
  background-color: #afafaf;
  font-weight: bold;
  border-radius: 10px;
  padding: 0 10px;
}
.menu-box-1 > ul > li {
  display: inline-block;
}
.menu-box-1 > ul > li > a {
  display: block;
  padding: 15px;
  background-color: pink;
}
.menu-box-1 > ul > li:hover > a {
  background-color: black;
  color: white;
}

 

*인접동생 숨기기/ 마우스 올리면 표시

- + 사용하여 인접 동생 숨기기 / 표시 진행

마우스를 버튼에 올리면 숨겨져있던 인접동생인 안녕이 표시된다.

// HTML
<a href="#">버튼</a>
<div>안녕</div>
<div>잘가</div>


// CSS
a + div {
    display: none;
}
a:hover + div {
    display: block;
}

 

*position 이용한 문제

1. 화면 4등분

// HTML
<h1>완료 : 화면의 좌측 하단을 붉은색으로 채워주세요.</h1>
<h1>요구 : 화면의 우측 하단을 골드색으로 채워주세요.</h1>

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>


// CSS
section>div {
    position:absolute;
    width:50%;
    height:50%;
}

/* section 의 자식인 div 이면서 1번째 자식인 엘리먼트 */
/* `section>div:first-child` 와 `section>div:nth-child(1)` 는 같은 뜻 입니다. */
section>div:first-child {
    /* y 좌표 */
    top:0;
    /* x 좌표 */
    left:0;
    background-color:black;
}

/* section 의 자식인 div 이면서 2번째 자식인 엘리먼트 */
section>div:nth-child(2) {
    /* y 좌표 */
    top:0;
    /* x 좌표 */
    left:50%;
    background-color:green;
}

/* section 의 자식인 div 이면서 뒤에서 2번째 자식인 엘리먼트 */
section>div:nth-last-child(2) {
    /* y 좌표 */
    top:50%;
    /* x 좌표 */
    left:0%;
    background-color:red;
}
section>div:nth-child(4) {
    /* y 좌표 */
    bottom:0%;
    /* x 좌표 */
    right:0%;
    background-color:gold;
}

 

2. 화면 3등분

// HTML
<section>
    <div></div>
    <div></div>
    <div></div>
</section>


// CSS
section > div {
    position:absolute;
    width:33.3333%;
    height:100%;
    background-color:red;
}

section > div:nth-child(1) {
    top:0;
    left:0;
}

section > div:nth-child(2) {
    top:0;
    left:33.3333%;
    background-color:green;
}

section > div:nth-child(3) {
    top:0;
    left:66.6666%;
    background-color:black;
}

 

3. 화면 9등분

// HTML
<h1>요구 : 화면을 3*3 으로 나눠서 색을 칠해주세요.</h1>

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>


// CSS
section > div {
    position:absolute;
    width: 33.3333%;
    height: 33.3333%;
}
section > div:nth-child(1) {
    background-color: red;
    width: 33.3333%;
    height: 33.3333%;
    top: 0%;
    left: 0%;
}
section > div:nth-child(2) {
    background-color: blue;
    width: 33.3333%;
    height: 33.3333%;
    top: 0%;
    left: 33.3333%;
}
section > div:nth-child(3) {
    background-color: black;
    width: 33.3333%;
    height: 33.3333%;
    top: 0%;
    right: 0%;
}
section > div:nth-child(4) {
    background-color: gray;
    width: 33.3333%;
    height: 33.3333%;
    top: 33.3333%;
    left: 0%;
}
section > div:nth-child(5) {
    background-color: pink;
    width: 33.3333%;
    height: 33.3333%;
    top: 33.3333%;
    left: 33.3333%;
}
section > div:nth-child(6) {
    background-color: green;
    width: 33.3333%;
    height: 33.3333%;
    top: 33.3333%;
    right: 0%;
}
section > div:nth-child(7) {
    background-color: gold;
    width: 33.3333%;
    height: 33.3333%;
    bottom: 0%;
    left: 0%;
}
section > div:nth-child(8) {
    background-color: navy;
    width: 33.3333%;
    height: 33.3333%;
    bottom: 0%;
    left: 33.3333%;
}
section > div:nth-child(9) {
    background-color: orange;
    width: 33.3333%;
    height: 33.3333%;
    bottom: 0%;
    right: 0%;
}

 

4. 화면 4등분(width, height 사용 없이)

// HTML
<h1>요구 : 화면을 2*2 으로 나눠서 색을 칠해주세요. 단 widht, height 속성은 사용할 수 없다.</h1>
<h1>힌트 : top, left, right, bottom 속성을 사용해주세요.</h1>

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>


// CSS
section > div{
    position: absolute;
}
section > div:nth-child(1) {
    background-color: black;
    top: 0;
    left: 0;
    bottom: 50%;
    right: 50%;
}
section > div:nth-child(2) {
    background-color: blue;
    top: 50%;
    left: 0%;
    bottom: 0%;
    right: 50%;
}
section > div:nth-child(3) {
    background-color: pink;
    top: 50%;
    left: 50%;
    bottom: 0%;
    right: 0%;
}
section > div:nth-child(4) {
    background-color: green;
    top: 0%;
    left: 50%;
    bottom: 50%;
    right: 0%;
}