(혼) (공) (web)

CSS 복습(8일차)

만석이 2024. 2. 21. 19:20

CSS 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 예제</title>
</head>
<body>

<style>
.btn {
padding: 0.5rem;
border: 1px solid #888;
/* 투명하게 */
background-color: transparent;
color: #888;
font-size: 1rem;
border-radius: 20px;
/* 풀사이즈 */
width: 100%;
/* 레이아웃 */
display: flex;
justify-content: center;
/* 손가락 모양 커서 */
cursor: pointer;
}

.icon {
width: 1rem;
margin-left: 0.5rem;
fill: #888;
}

/* 버튼에 호버했을 때 효과 */
.btn:hover {
background-color: #eee;
}
</style>

<button class="btn">
<span>Show more</span>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
</svg>
</button>

</body>
</html>

btn클래스를 만들어줌

padding
border
background
color(글자색)
fontsize
border-radius(btn 가장자리 동그랗게설정)
width(넓이 최대값)
display: flex
justifly-content:center(아이템을 중간으로 지정)
cursor:pointer(btn컨테이너에 접근시 커서 손가락모양으로 변경)

icon클래스는 외부에서 icon을 가져올경우 그 아이콘에 적용할
클래스이다.

width, margin, fill을 설정해주었다.

fill은 불러온 아이콘의 색상을 안꿔준다.

hover을 설정해주어서 btn컨테이너에 접근시 배경색을 바꾸는걸 설정해주었다.

svg는 이미지를 불러올때 사용하는 속성이다. svg를 사용하는 이유는
불러온 이미지를 줌을해도 깨지지않는다. 즉 불러온 이미지의
퀄리티가 좋아서 사용한다.

<span>태그로 이름을 지정해주었다.

Document

드랍다운

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


<h1>드랍다운</h1>

    <style>
        .container{
            display: inline-block;
        }

        .btn {
            border: none;
            background-color: #333;
            color: #fff;
            padding: 0.5rem 0.75rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
        }

        .contentBox{
            padding: 0;
            margin: 0;
            list-style: none;

            width: 12rem;
            border: 1px solid #ddd;
            background-color: white;
            display: none;
            position: absolute;
        }

        .container:hover .contentBox{
            display: block;
        }

        .link{
            display: block;
            color: black;
            padding: 0.5rem;
        }

    </style>

    <div class="container">
        <button class="btn">Button</button>
            <ul class="contentBox">
                <li>
                    <a href="#" class="link">Link</a>
                </li>

                <li>
                    <a href="#" class="link">Link</a>
                </li>

                <li>
                    <a href="#" class="link">Link</a>
                </li>
            </ul>
    </div>

</body>
</html>

드롭다운은 마우스 커서가 아이콘에 닿으면 목록이 나타나는
속성이다.

먼저 알아둬야할것이있다.

1.아이콘만들기
2.커서 갖다대면 보일 컨테이너만들기
3.컨테이너안의 목록만들기

미리 만들어 놓은 컨테이너를 display:none 설정으로 안보이게하고 커서가 아이콘에 닿으면 display:block으로 보이게하는것
이것이 가능할수있는 이유는 hover 속성을 사용해서 그렇다

btn은 아이콘을 설정해줄 클래스이다.
배경색을 검정으로 해주었다.(#333)
글자색은 횐색으로 해주었다.(#fff)
글자 크기는 1rem (크롬의 설정크기 기준)
글자의 넓이는 600px
아이콘에 닿으면 커서모양이 손가락으로 바뀌게 해주었다.

contentBox는 커서가 아이콘에 닿으면 생길 컨테이너를 설정
해주는 클래스이다.
padding과 margin을 0으로 초기화해주었다.(맨위 맨왼쪽 )

list-style:none을 사용해서 <ol>또는<ul>사용하면 붙은 숫자
또는 기호를 안나오게 바꿔주었다.

박스의 넓이를 12rem
테두리설정
배경색
을 설정해주었다.

display:none을 사용해서 해당요소를 가려주었다. 즉
contentBox에 적용되는 아이템을 가렸다.
그리고 position을 absoulte를 설정해주었다.(위치독립적설정)

hover를 사용해서 container클래스가 적용된 아이템을
커서가 닿으면 가렸던 contentBox요소가 보인다.

link클래스는 ul을 설정해줄 클래스이다.
display:block 속성을 주어서 해당요소가 쌓일수있도록 만들어주었다.

CSS 예제

Dropdown Select

Volvo
Hyundai
Toyota

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 예제</title>
</head>
<body>

<style>
.container {
/* border: 1px dashed; */
width: 12rem;
}

.select {
width: inherit;
display: flex;
justify-content: space-between;
/* design */
background-color: transparent;
border: 1px solid #ccc;
padding: 0.5rem;
font-size: 1rem;
}

.icon {
width: 0.75rem;
}

.content {
/* 기본값 제거 */
list-style: none;
padding: 0;
margin: 0;
/* size */
width: inherit;
box-sizing: border-box;
/* design */
border: 1px solid #ccc;
/* 덮어쓰기 */
border-top: none;
background-color: #fff;
/* 떠있는 형태 */
position: absolute;
/* 처음에 안보이는 상태 */
display: none;
}

/* 셀렉트에 호버했을 때 컨텐츠를 나타나게 한다 */
.container:hover .content {
display: block;
}

.content li {
padding: 0.5rem;
}

.content li:hover {
background-color: #eee;
}
</style>

<h1>Dropdown Select</h1>

<div class="container">
    <button class="select">
      <span>Car Manufacturer</span>
      <svg
        class="icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 320 512"
      >
        <path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/>
      </svg>
    </button>

    <ul class="content">
      <li>Volvo</li>
      <li>Hyundai</li>
      <li>Toyota</li>
    </ul>
  </div>

  <p>..</p>
  </body>
  </html>

큰틀을 정리해보자

1.바로 보여질 컨테이너만들기
2.컨테이너에 커서 이동시 내용 컨테이너보이게하기

이게 끝이다!

보여질 컨테이너를 만들어보자
옆에 코드에서는 select클래스로 만들어보았다.

그위에있는 container클래스는 보여질 컨테이너와
내용이 보이는 컨테이너의 박스넓이를 통일하기위해
통일 수단으로 만든 클래스이다.

먼저 select클래스를 보자

inherit으로 넓이 설정해서 넓이값을 상속받아왔다.
즉 container클래스를 상속받을것이다.

그다음 trainsparent 정렬을해줄것이다.
Car Manufacturer문구와 불러온 아이콘을 일정한 공백을 가운데로 두고 정렬할것이기 때문이다.

그다음 배경색을 transparent로 배경색을 투명하게 설정해주었다.

icon클래스를 만들어서 아이콘의 넓이를 지정해주었다.

다음은 content클래스이다. 이것은 hover을 사용해서 보여질
내용컨테이너이다.

여기서 처음알게 된것은
list-style:none, box-szing:border-box 이 두개인데

list-style:none 은 ul또는 ol을 사용하면 앞에 숫자 또는 기호가 붙는다. 하지만 list-style:none 을 사용하면 붙지않는다.

그리고 box-sizing:borderbox는 container클래스로
일정한 넓이값을 둘다 받았다고 하더라도 약간의 박스의
크기차이가난다.

그 차이를 없애주는것이 box-sizing:border이다.

CSS 예제

필터 버튼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 예제</title>
</head>
<body>

<h1>필터 버튼</h1>

<style>
nav {
/* border: 1px dashed; */
width: 24rem;
/* 버튼을 감싸지 않는다 */
white-space: nowrap;
overflow-x: auto;
}

.btn {
      /* size */
      padding: 0.5rem 1rem;
      /* design */
      border: none;
      background-color: #333;
      color: #fff;
      margin: 0 0.25rem;
/* 계산하기 번거로울 때 큰 값을 적용한다 */
      border-radius: 99px;
      font-size: 1rem;
    }

/* 크롬, 사파리, 오페라에서 스크롤바 숨기기 */
nav::-webkit-scrollbar {
      display: none;
    }

/* IE, 엣지, 파이어폭스에서 숨기기 */
nav {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
</style>

<nav>
    <button class="btn">London</button>
    <button class="btn">New York</button>
    <button class="btn">Amsterdam</button>
    <button class="btn">Berlin</button>
    <button class="btn">Seoul</button>
    <button class="btn">Tokyo</button>
    <button class="btn">Taipei</button>
  </nav>

  </body>
  </html>

nav선택자를 만들어주었다.
white-space:nowrap 을 사용해서 내용물이 다음줄로 넘어가지
않도록만들어주었다.

그리고 overflow-x:auto를 사용해서 x축으로 내용물이 넘어가면 즉 가로방향으로 내용물이 넘어가면 스크롤을 만들어준다는것이다.

그리고
nav::-webkit-scorllbar; /* 크롬, 사파리, 오페라*/
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */

각 브라우저별 스크롤바를 없애는 방법이 다양하다.
알아두면 도움이될거같다.