웹프로그래밍/CSS

프로그래밍 언어 활용 16일차 (24/12/02)

wkun 2024. 12. 2. 17:58

CONTENTS

 

CSS 기능

1. dropdown

2. 제작순서

 1) dropdown

 2) slider

 

 

---------------------------------------------------------------

 

CSS 기능

 

1. dropdown

 

예제1)

 

Boxing

 

Dom tree

 

html

<body>
  <header class="container">
    <!--header logo  -->
    <div class="logo">
      <img src="logo.png" alt="logo">
    </div>
    <!-- header nav -->
    <nav>
      <ul class="menu1">
        <li><a href="#">HOME</a></li>
         <li class="drop"><a href="#">PAGES<i class="fa-solid fa-sort-down"></i>
         </a>
         <ul class="submenu">
          <li>About</li>
          <li>Testimonial</li>
         </ul>
        </li>
        <li><a href="#">PRODUCT</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#"><i class="fa-solid fa-cart-shopping"></i></a></li>
        <li><a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>
      </ul>
    </nav>
  </header>
</body>

 

css

*{
  margin:0;
  padding:0;
  text-decoration : none;
  list-style:none;
  box-sizing:border-box;
  color: inherit;
}

.container{
  width: 80%;
  margin: 0 auto;
}

/* header start */

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

header .logo{
  width: 250px;
}

img{
  width: 100%;
  height: auto;
}

/* header logo end */

/* header logo end */

header nav ul{
  display: flex;
}

header nav ul li{
  margin-right: 20px;
  font-weight: 600;
}

.drop{
  position: relative;
}

.submenu{
  display: flex;
  flex-direction: column;
  position: absolute;
  border: 1px solid;
  box-shadow: 5px 5px;
  padding: 20px;
  margin-top: 20px;
  display: none;
  line-height: 25px;
}

.menu1 .drop:hover .submenu{
  display: block;
}

 

 

예제2)

 

Boxing

 

Dom tree

 

html

<body>
  <!-- header 시작 -->
  <header>
    <!-- logo -->
    <div class="logo">
      <h1>Fruitables</h1>
    </div>
    <!-- nav 메뉴 -->
    <nav>
      <ul class="menu1">
        <li class="color"><a href="#">Home</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">Shop Detail</a></li>
        <li class="drop"><a href="#" class="color">Pages<i class="fa-solid fa-angle-down"></i>
        </a>  
        <ul class="submenu">
          <li><a href="#">Cart</a></li>
          <li><a href="#">Chackout</a></li>
          <li><a href="#">Testimonial</a></li>
          <li><a href="#">404 Page</a></li>
        </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div>
      <!-- icon -->
      <i class="serch"><i class="fa-solid fa-magnifying-glass"></i></i>
      <i><i class="fa-solid fa-bag-shopping"></i></i>
      <i><i class="fa-solid fa-user"></i></i>
    </div>
  </header>
  <!-- header 끝 -->
</body>

 

css

*{
  margin:0;
  padding:0;
  text-decoration : none;
  list-style:none;
  box-sizing:border-box;
  color: inherit;
}

header{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  font-family: "Open Sans", sans-serif;
}

header .logo{
  color: #81c408;
}

header .menu1{
  display: flex;
  color: gray;
  font-weight: 100;
}

header .menu1 li{
  padding: 12px;
  font-weight: 700;
}

.color{
  color: #81c408;
}

.drop{
  position: relative;
}

header .submenu{

 margin-top: 10px;
 position: absolute;
 left: 2px;
 display: none;
 border-radius: 10px;
 font-size: 12px;
 font-weight: 600;
 line-height: 2px;
 background-color: #F2F2F2;
 color: black;
}

.menu1 .drop:hover .submenu{
  display: block;
}

i{
  margin-right: 10px;
  color: #81c408;
}

.serch{
  padding: 9px;
  padding-right: 2px;
  border: 1px solid;
  border-radius: 50%;
  color: orange;
}

 

2. 제작 순서

 

1)dropdown

HTML <ul>
<li><a href="#">HOME</a></li>
<li class="dropdown"><a href="#">PAGES
<i class="fa-solid fa-caret-down"></i>
</a>
<ul class="submenu">
<li><a href="#">About</a></li>
<li><a href="#">Testimonial</a></li>
</ul>
</li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#"><i class="fa-solid fa-cart-shopping"></i></a></li>
<li><a href="#"><i class="fa-solid fa-magnifying-glass"></i></a></li>
</ul>
1. 서브메뉴가 들어갈 li요소를 확인하고, 해당 요소의 자식으로 서브메뉴를 작성한다(html)
CSS
  
2. 네비게이션 메뉴를 정렬한다
header nav > ul { display:flex;}
1) 첫번째 ul에 display:flex로 각 항목 가로정렬
header nav > ul > li {
height: 30px;
line-height: 30px;

margin-right: 20px;
}
2) 첫번째 ul, 직계 li에 margin, padding으로 세부조정, 크기 주기
 
3. 서브메뉴 위치 조정하기
header nav .dropdown {
position: relative;
}
1) position:absolute;의 기준점 잡기 -> 서브메뉴 포함하고 있는 li태그가 기준점
header nav .submenu{
position: absolute;
top: 30px;
left: 0;
}
2) 서브메뉴의 position:absolute; top: 포함하고 있는 li요소의 높이px; left: 0px;
 
4. 서브메뉴 숨기기
header nav .submenu{
position: absolute;
top: 30px;
left: 0;
display : none;
}
1) 서브메뉴 선택하고 display:none;
 
5. 서브메뉴 나타날 조건 제시하고 속성 주기
header nav .dropdown:hover .submenu{
display: block;
}
1) 서브메뉴를 포함하고 있는 li요소에 :hover 했을 시, li요소 안에 있는 서브메뉴 나타내기
    display: block;  

 

 

2)slider

HTML
 <input type="radio" name="slider_selector" id="a">
<input type="radio" name="slider_selector" id="b">
<input type="radio" name="slider_selector" id="c">
<input type="radio" name="slider_selector" id="d">		 라디오 버튼에 id를 부여
<div id="slider_box"></div>  
<div id="slider_box">
<ul id="sliders">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>		  
<div id="slider_box">
<ul id="sliders">
<li><label for="a">클릭</label></li>
<li><label for="b">클릭</label></li>
<li><label for="c">클릭</label></li>
<li><label for="d">클릭</label></li>
</ul>
</div>
!체크
클릭을 클릭하여 라디오버튼이 연결되는지 확인
<div id="slider_box">
<ul id="sliders">
<li>
<img src="./img/slide01.jpg" alt="">
<label for="d"></label>/*4번*/
<label for="b"></label>/*2번*/
</li>
<li>
<img src="./img/slide02.jpg" alt="">
<label for="a"></label>/*1번*/
<label for="c"></label>/*3번*/
</li>
<li>
<img src="./img/slide03.jpg" alt="">
<label for="b"></label>/*2번*/
<label for="d"></label>/*4번*/
</li>
<li>
<img src="./img/slide04.jpg" alt="">
<label for="c"></label>/*3번*/
<label for="a"></label>/*1번*/
</li>
</ul>
</div>		 라벨은 라디오 버트을 연결하고있다.
라디오 버튼은 CSS를 통하여
선택된다면 특정 li를 보여준다
<div id="slider_box">
<ul id="sliders">
<li><!--1번그림-->
<img src="./img/slide01.jpg" alt="">
<label for="d"><img src="./img/left-arrow.png" alt=""></label><!--4번-->
<label for="b"><img src="./img/right-arrow.png" alt=""></label><!--2번-->
</li>
<li><!--2번그림-->
<img src="./img/slide02.jpg" alt="">
<label for="a"><img src="./img/left-arrow.png" alt=""></label><!--1번-->
<label for="c"><img src="./img/right-arrow.png" alt=""></label><!--3번-->
</li>
<li><!--3번그림-->
<img src="./img/slide03.jpg" alt="">
<label for="b"><img src="./img/left-arrow.png" alt=""></label><!--2번-->
<label for="d"><img src="./img/right-arrow.png" alt=""></label><!--4번-->
</li>
<li><!--4번그림-->
<img src="./img/slide04.jpg" alt="">
<label for="c"><img src="./img/left-arrow.png" alt=""></label><!--3번-->
<label for="a"><img src="./img/right-arrow.png" alt=""></label><!--1번-->
</li>
</ul>
</div>
버튼역할을 할 이미지를 라벨안에 삽입
레프트 라이트 버튼 색상때문에 안보임
이럴때 보더나 백그라운드로 볼수 있음

!체크
이미지를 클릭하면 라디오 버튼이 정상적으로 활성화 되어야함
CSS
 style.css 파일 생성
<link rel="stylesheet" href="style.css">		  
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}		 유니버셜 설정
/*라디오 버튼 선택*/
#a,#b,#c,#d{
display: none;
}
/*
input[type="radio"]{
display: none;
}
*/		 라디오 버튼을 숨김
라디오 버튼 선택자 2가지방법
디자인 요소상 보여줄 필요가 없음
존재는 한다는 것을 기억
#slider_box{
width: 50%; /*슬라이딩 되는 것을 보여주기 위해서 작게설정*/
margin: 20px auto; /*상단 마진은 보기 편하라고설정, 양옆 오토는 중앙정렬*/
overflow: visible; /*넘치는 자식요소를 일단은 보여줌, 나중에 숨김*/
white-space: nowrap;/*이속성을 통하여 자식이 부모를 넘어갈 수 있게함*/
}
!체크 화이트 스페이스
화이트 스페이스는 인라인 즉, 텍스트가 부모를 넘어가도록 설정하는 속성
ul{
font-size: 0px;
}
!체크 font-size

li를 펼치고 이값을 통해서 테스트
li를 인라인 블록으로 바꿔야 가로 정렬됨
결국 글자속성은 모두 간격을 가짐 이것을 없앰
li{
position: relative;
width: 100%;
display: inline-block;
}
li가 펼쳐지기위해서는 인라인 속성을 가져야됨
사이즈는 부모의 전체
< > 버튼의 위치 기준이 되기위해서 relative 할당
li .slide{
width: 100%;
}
슬라이드 이미지 모두의 사이즈를 li 사이즈로 맞춤
li label {
position: absolute;
top:50%;
transform: translateY(-50%);
}
요소를 띄운다-> 부모의 relative를 기준으로 움직임
부모의 요소의 top에서 50%만큼 띄움 -> 중앙이 아님 / 요소의 크기
자기크기만큼 위로 이동 : translateY
li label {
width: 10%;
}		 라벨의 크기를 li의 10% 크기로 조절
li label.left {
left: 0;
}
li label.right {
right:0;
}		 각 라벨에 left, right 클래스를 할당하고
각 위치로 이동
li label img{
width: 100%;
}		 라벨안의 꺽쇠 이미지의 크기를 조절
#a:checked ~ #slider_box li {transform: translateX(0%);}
#b:checked ~ #slider_box li {transform: translateX(-100%);}
#c:checked ~ #slider_box li {transform: translateX(-200%);}
#d:checked ~ #slider_box li {transform: translateX(-300%);}		 라디오가 체크가 되면 이동시킴    

'웹프로그래밍 > CSS' 카테고리의 다른 글

프로그래밍 언어 활용 18일차 (24/12/04)  (0) 2024.12.04
프로그래밍 언어 활용 17일차 (24/12/03)  (0) 2024.12.03
프로그래밍 언어 활용 15일차 (24/11/29)  (4) 2024.11.29
프로그래밍 언어 활용 14일차 (24/11/28)  (0) 2024.11.28
프로그램 언어 활용 13일차 (24/11/27)  (2) 2024.11.27

'웹프로그래밍/CSS'의 다른글

  • 현재글프로그래밍 언어 활용 16일차 (24/12/02)

관련글

티스토리툴바