프로그래밍 공부

2024.12.02 HTML CSS 공부 심화

3452 2024. 12. 2. 16:12

1. hover 드롭다운리스트

 

- 목적 : 평상시엔 가려져있다가 마우스 오버하면 숨겨진 메뉴가 나타나는 프로그램 구현

 

<nav>
        <ul>
          <li> <a href="#" id="home">HOME</a></li>
          <li id="pages"> <a href="#"> PAGES <i class="fa-solid fa-caret-down"></i></a>
            <ul class="hover_menu">
              <li><a href="#">About</a></li>
              <li><a href="#">Testimonial</a></li>
            </ul>
          </li>
          <li> <a href="#" id="Products">PRODUCTS</a></li>
          <li> <a href="#" id="blog">BLOG</a></li>
          <li> <a href="#" id="contact">CONTACT</a></li>
          <li> <a href="#" id="cart"><i class="fa-solid fa-cart-shopping"></i></a></li>
          <li class="search"> <a href="#" id="search"><i class="fa-solid fa-magnifying-glass"></i></a></li>
        </ul>
      </nav>

html 코드

 

네비게이션 메뉴에 상시로 HOME PAGES PRODUCTS BLOG CONTACT가 있고, PAGES 위에 마우스 오버할때
About, Testimonial 나타나게 하기

 

#pages {
  position: relative;
}

#pages:hover .hover_menu {
  display: block;

}

.hover_menu {
  width: 190px;
  height: 96px;
  position: absolute;
  left: 0px;
  top: 100%;
  text-align: left;
  border: 1px solid black;
  background-color: white;
  flex-direction: column;
  padding: 10px 20px;
  display: none;
}

.hover_menu li {
  padding: 0;
  margin: 0;
  text-align: left;
  height: auto;
}

.hover_menu a {
  display: block;
}

css 코드

 

#pages(PAGES 메뉴)를 relative 포지션을 부여하고, hover_menu(PAGES 오버시 나타나게 할 메뉴)에 absolute를 부여하여 hover_menu가 PAGES위에 나타날수 있게 위치 설정을 하고, hover_menu에 display: none을 부여하여 평소에는 숨김처리 하다가 #pages:hover .hover_menu에 display: block을 두어 마우스 오버시 hover_menu가 block으로 바뀌게 하여 나타나게 한다.

 

2. 슬라이드

 

- 목적 : 왼쪽 또는 오른쪽 화살표를 누르면 순서에 따라 표시되는 화면이 달라지게 한다.

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="slide.css">
  <script src="https://kit.fontawesome.com/4e29a079f9.js" crossorigin="anonymous"></script>
</head>

<body>

  <input type="radio" name="slider_selector" id="a" checked>
  <input type="radio" name="slider_selector" id="b">
  <input type="radio" name="slider_selector" id="c">
  <input type="radio" name="slider_selector" id="d">

  <div class="screen">
    <ul>
      <li>
       
        <div class="no1"><label for="d" name="left1"><i class="fa-solid fa-angle-left"></i></label>
          <label for="b" name="right1"><i class="fa-solid fa-angle-right"></i></label>1</div>
      </li>
      <li>
       
        <div class="no2"><label for="a" name="left2"><i class="fa-solid fa-angle-left"></i></label>
          <label for="c" name="right2"><i class="fa-solid fa-angle-right"></i></label>2</div>
      </li>
      <li>
       
        <div class="no3"><label for="b" name="left3"><i class="fa-solid fa-angle-left"></i></label>
          <label for="d" name="right3"><i class="fa-solid fa-angle-right"></i></label>3</div>
      </li>
      <li>
       
        <div class="no4"><label for="c" name="left4"><i class="fa-solid fa-angle-left"></i></label>
          <label for="a" name="right4"><i class="fa-solid fa-angle-right"></i></label>4</div>
      </li>
    </ul>
  </div>
</body>

</html>

html 코드

 

div class="screen"은 실제로 사용자에게 보여지는 화면이고, 그안의 li 에는 순서대로 보여지게 할 화면들이다.

라디오버튼으로 abcd를 두고 연결된 라벨을 화살표에 배치해 라벨을 눌러 라디오가 활성화되면 연결된 화면으로 이동하는 메커니즘이다.

 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

.screen {
  width: 1200px;
  height: 800px;
  border: 3px solid black;
  margin: 10px;
  align-items: center;
  margin: auto;
  overflow: hidden;
}

.screen ul {
  display: flex;
}
.no1 {
  width: 1200px;
  height: 800px;
  font-size: 50px;
  text-align: center;
  line-height: 800px;
  background-color: lightyellow;
  position: relative;
}

.no2 {
  width: 1200px;
  height: 800px;
  font-size: 50px;
  text-align: center;
  line-height: 800px;
  background-color: lightblue;
  position: relative;
}

.no3 {
  width: 1200px;
  height: 800px;
  font-size: 50px;
  text-align: center;
  line-height: 800px;
  background-color: lightgreen;
  position: relative;
}

.no4 {
  width: 1200px;
  height: 800px;
  font-size: 50px;
  text-align: center;
  line-height: 800px;
  background-color: lightpink;
  position: relative;
}

label[name="left1"] {
  width: 120px;
  height: 800px;
  /* background-color: red; */
  position: absolute;
  top: 0;
  left: 0;
}

label[name=right1] {
  width: 120px;
  height: 800px;
  /* background-color: red; */
  position: absolute;
  top: 0;
  right: 0px;
}

label[name="left2"] {
  width: 120px;
  height: 800px;
  /* background-color: red; */
  position: absolute;
  top: 0;
  left: 0;
}

label[name=right2] {
  width: 120px;
  height: 800px;
  /* background-color: red; */
  position: absolute;
  top: 0;
  right: 0;
}

label[name="left3"] {
  width: 120px;
  height: 800px;
  /* background-color: red; */
  position: absolute;
  top: 0;
  left: 0;
}

label[name=right3] {
  width: 120px;
  height: 800px;
  /* background-color: red; */
  position: absolute;
  top: 0;
  right: 0px;
}

label[name="left4"] {
  width: 120px;
  height: 800px;
  /* background-color: red; */
  position: absolute;
  top: 0;
  left: 0;
}

label[name=right4] {
  width: 120px;
  height: 800px;
  /* background-color: red; */
  position: absolute;
  top: 0;
  right: 0px;
}

#a:checked ~ .screen li {
  transform: translateX(0%);
}

#b:checked ~ .screen li {
  transform: translateX(-100%);
}

#c:checked ~ .screen li {
  transform: translateX(-200%);
}

#d:checked ~ .screen li {
  transform: translateX(-300%);
}

input {
  display: none;
}

css 코드

 

이것을 구현하기 위해서 실제로 보여질 screen의 크기는 임의로 1200x800으로 두었고, overflow:hidden을 적용시켰다.

보여질 화면은 display:flex로 가로로 길게 일자로 연결된 형태이고, 구분을 위해 가운데 숫자, 배경색을 다르게 했다.

화면 내에 라벨을 앱솔루트로 배치하여 좌우에 영역을 가지게 하고 영역(라벨)을 누르면 해당하는 라디오가 체크되어 해당하는 화면으로 이동하는 식이다.