(혼) (공) (web)

CSS 복습(9일차)

만석이 2024. 2. 22. 22:45

 

알림벨 만들기

<!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; */
display: inline-block;
position: relative;
}

.icon {
width: 2rem;
fill: #333;
}

.badge {
width: 0.75rem;
height: 0.75rem;
background-color: #f00;
display: block;
/* 계산하기 번거로울 때 큰 값을 적용한다 */
border-radius: 99px;
/* position */
position: absolute;
top: 0;
right: -0.25rem;
border: 2px solid #fff;
}
  </style>

  <div class="container">
    <span class="badge"></span>
    <svg 
      class="icon"
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 448 512"
    >
      <path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>
    </svg>
  </div>


  </body>
  </html>


이번에 만들어 볼것은 알림벨이다.




순서를 보자 

1.컨테이너안에 아이콘을 넣는다
2. 빨간동그라미를 오른쪽 상단에 넣는다.

코드를 보자

container 클래스를 보면 display를 inline-block 설정해주었다.

여기서 다시한번 기억할겸 정리해보자


===========================================

inline - 줄 바꿈없이 한줄에 다른 엘리먼트와 나란히 배치

block - 다른엘리먼트들을 밀어내고 혼자 한줄사용

inline-block - 줄바꿈이 이루어지지않는다.
                     block 처럼 width와 height를 지정할수있다.
                     만약 widht 와 height를 지정하지않을 경우
                     inline과 같이 컨텐츠만큼 영역이 잡힌다.

============================================



그리고 빨강색 동그라미에 border을 설정해주어 테두리를 
흰색으로 덮어주었다.

 

 

<!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 solid #ddd;
border-radius: 0.5rem;
padding: 0 1rem;
position: relative;
}

.close-btn {
position: absolute;
right: 0;
padding: 0.25rem 0.5rem;
/* 엔티티의 크기 조절 */
font-size: 1.5rem;
}
</style>

<div class="container">
    <span class="close-btn">&times;</span>
    <h3>Message for you!</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
    </p>
  </div> 
  </body>
  </html>


사진상으로는 잘 안보이지만 테두리를 둥글게만들었다.

일단 컨테이너 먼저 만들어주었다.
position을 relative로 설정해주었다.

자 여기서 positon:reative 와 position:absolute를 정리하겠다.

먼저 absolute는 부모의 위치를 기준으로 움직인다.
그리고 그 부모의 역할을 부여해주는 표식이 reative라고 생각하면된다. 하지만 모든 클래스가 relative가 없는 상태에서 
absoulte를 사용하게 되면 부모는 body가 된다.

reative만 독립적으로 사용하면 위치를 자유롭게 이동할수있는 상태가 된다. (자신의 위치 기준으로)

자 다시 설명을 이어가면 컨테이너 만들어주고 reative 설정해서 자유로운 위치선언을 해주었다.  그리고 close-btn 클래스를
만들어서 x버튼을 설정해주었다.

x버튼은 &times;를 사용해서 만들어주었다.

 

 

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>
#checkbox {
display: none;
}

.switch {
display: inline-block;
width: 40px;
height: 20px;
padding: 4px;
background-color: #ddd;
border-radius: 99px;
/* 애니메이션 효과 - 배경색이 변하는 데 0.5초가 걸린다 */
transition: background-color 0.5s;
}

/* 엘리먼트 1 + 엘리먼트 2
엘리먼트 1 바로 다음의 엘리먼트 2를 선택한다
*/
#checkbox:checked + .switch {
background-color: #333;
}

.head {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 99px;
/* 애니메이션 효과 - 20px 움직이는데 0.5초가 걸린다 */
transition: transform 0.5s;
}

/* 헤드 움직이기 */
#checkbox:checked + .switch .head {
transform: translateX(20px);
}
</style>

<input type="checkbox" name="" id="checkbox">
  <label for="checkbox" class="switch">
    <div class="head"></div>
  </label> 
  </body>
  </html>		 토글 버튼을 만들어보았다.

정리.


1. 버튼 밖에 있는 동그라미 (  swith )
2. 버튼 (head)
3. 애니매이션효과

switch클래스는 
display:inline-block 효과를 주었다.
그래서 기본적으로 block 성질을 가지지만 높이나 넓이를 
설정해줄수있다.
또한 transiton:background-color 0.5s 를 설정해주어서 
배경이 0.5초에 걸쳐서 변하도록 애니메이션 효과를 주었다.

그리고 head를 보면 transition:transform 0.5s가 있다.
이것은 요소를 변형시키는데 0.5초를 걸쳐하겠다 라는 의미다.


#checkbox:checked + .switch .head {
transform: translateX(20px);
}

이것은 checkbox가 사용자에 의해서 클릭되었을때 
switch의 자식인 head가 x축으로 20px만큼 움직인다는뜻이다.

 

 

<!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 {
      /* size */
      width: 50px;
      height: 25px;
      /* layout */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .item {
      /* size */
      width: inherit;
      height: 5px;
      /* design */
      background-color: #000;
/* 애니메이션 효과 */
transition: transform 0.2s;
    }

.container:hover .top {
transform: translateY(10px) rotate(45deg);
}

.container:hover .bottom {
transform: translateY(-10px) rotate(-45deg);
}
</style>

<div class="container">
    <div class="item top"></div>
    <div class="item bottom"></div>
  </div>

<style>
body {
/* 의도적으로 스크롤 생성 

calc(연산) 함수 - 계산된 값을 적용할 수 있다
*/
height: calc(100vh + 100px);
}

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

.menu {
/* 기본값 제거 */
list-style: none;
margin: 0;
padding: 0;
/* layout */
display: flex;
background-color: #333;
}

.link {
display: block;
padding: 0.75rem;
color: #fff;
/* 밑줄 제거 */
text-decoration: none;
}

.link:hover {
background-color: #222;
}

main {
margin-top: 4rem;
}
</style>

<nav class="navbar">
    <ul class="menu">
      <li>
        <a href="#" class="link">Home</a>
      </li>
      <li>
        <a href="#" class="link">About</a>
      </li>
      <li>
        <a href="#" class="link">Blog</a>
      </li>
      <li>
        <a href="#" class="link">Contact</a>
      </li>
    </ul>
  </nav>

  <main>
    <h1>Navigation Bar</h1>
    <p>..</p>
  </main> 
  </body>
  </html>