바이오가스 조성별 이산화탄소 분리.pdf
0.92MB

 

'Web > HTML + CSS' 카테고리의 다른 글

day05_animation  (0) 2025.04.08
day05_transform  (0) 2025.04.08
day05_미디어 쿼리  (1) 2025.04.08
day04_position_(4)absolute  (0) 2025.04.04
day04_positon_(2) fixed  (0) 2025.04.04

1. animation
- CSS에서 요소에 움직임을 부여할 수 있는 속성, 시간에 따라 스타일이 자연스럽게 변하도록 만듦.
- CSS 만으로도 부드럽고 다채로운 인터랙션(interaction)을 만들 수 있기때문에 웹 디자인에 자주 사용됨

    @keyframes
    - CSS에서 애니메이션의 "동작 단계"를 정의하는 문법.
    - 어떤 요소가 어떻게 변화할지, 언제 어떤 상태가 될지를 순서대로 알려줌.

2. CSS 그라디언트
- gradient는 두가지 이상의 색상이 자연스럽게 섞여서 부드럽게 변하는 배경효과

1.1 linear-gradient(선형 그라디언트)
- 직선
- 기본방향 top to bottom(180deg)
- to right : 왼쪽에서 오른쪽으로 색상 전개

1.2 radial-dradient(원형 그라디언트)
- 색상이 원 또는 타원 형태로 중심에서 바깥쪽으로 퍼지는 그라디언트

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation</title>
    <style>
      body {
        background: linear-gradient(to top, #a0e9ff, #fff);
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        overflow: hidden;
        margin: 0;
      }

      .ball {
        width: 80px;
        height: 80px;
        background-color: #ff6b6b;
        border-radius: 50%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        animation: bounce 1s in infinite ease-in-out;
      }

      @keyframes bounce {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-200px);
        }

        100% {
          transform: translateY(0);
        }
      }
    </style>
  </head>
  <body>
    <div class="ball"></div>
  </body>
</html>


3. animation 활용

3.1 nth-child(n) : 부모 요소의 자식 중 몇번쨰 요소인지를 기준으로 선택할 수 있게 해주는 선택자이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>animation 활용</title>
    <style>
      body {
        background-color: #222;
        height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .container {
        display: flex;
        gap: 20px;
      }

      .reward {
        width: 100px;
        height: 100px;
        background: radial-gradient(circle at center, gold, orange);
        border-radius: 50%;
        box-shadow: 0 0 15px gold;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 20px;
        font-weight: bold;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
        /* opacity: 0;  */
        transform: scale(0.3);
        animation: popUp 1.2s ease-out forwards, golw 2s infinite alternate;
      }
      /* nth-child : 애니메이션 딜레이 효과
      animation-delay : 첫번째 애니메이션, 두번째 애니메이션*/
      .reward:nth-child(1) {
        animation-delay: 0s, 0s;
      }
      .reward:nth-child(2) {
        animation-delay: 0.3s, 0s;
      }
      .reward:nth-child(3) {
        animation-delay: 0.6s, 0s;
      }

      @keyframes popUp {
        0% {
          transform: scale(0.3);
          opacity: 0;
        }
        50% {
          transform: scale(1.15);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      @keyframes golw {
        0% {
          box-shadow: 0 0 10px rgba(225, 215, 0, 0.5);
        }

        100% {
          box-shadow: 0 0 30px rgba(255, 215, 0, 1);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="reward">+100🍕</div>
      <div class="reward">+50🍔</div>
      <div class="reward">+1🍟</div>
    </div>
  </body>
</html>

'Web > HTML + CSS' 카테고리의 다른 글

졸업논문_화학공학과  (0) 2025.04.08
day05_transform  (0) 2025.04.08
day05_미디어 쿼리  (1) 2025.04.08
day04_position_(4)absolute  (0) 2025.04.04
day04_positon_(2) fixed  (0) 2025.04.04

1. transform 

1.1 translate(x, y) – 이동하기
- 요소를 x축과 y축 방향으로 이동
- 원래 위치에서 얼마나 이동할지

1.2 rotate(deg) – 회전하기
- 요소를 지정한 각도만큼 회전
- 중심점(기본적으로 요소의 중심)을 기준으로 회전

3. scale(x, y) – 확대/축소하기
요소의 크기를 x배, y배로 조절합니다.
1은 원래 크기, 2는 2배, 0.5는 절반입니다.

4. skew(x, y) – 기울이기
요소를 x축 또는 y축 방향으로 기울입니다.
기울이는 각도는 deg로 지정합니다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transform</title>
    <style>
      body {
        padding: 20px;
        text-align: center;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        margin-top: 30px;
      }

      .box {
        width: 100px;
        height: 100px;
        background-color: deepskyblue;
        /* transform 움직임을 조절해줌 */
        transition: transform 0.4s ease;
        display: flex;
        /* 세로 */
        align-items: center;
        /* 가로 */
        justify-content: center;
        font-weight: bold;
        color: white;
        border-radius: 10px;
      }

      .box:hover {
        cursor: pointer;
      }
   
      .translate:hover{
        /* translate(가로, 세로) */
        transform: translate(40px,50px);
      }

      .rotate:hover {
        transform: rotate(45deg);
      }

      .scale:hover {
        transform: scale(1.5);
      }

      .skew:hover {
        transform: skew(20deg, 10deg);
      }


    </style>
  </head>
  <body>
    <h2>각 도형에 따른 transform 효과 적용</h2>
    <p>마우스를 각 도형에 올려보세요!</p>
    <div class="container">
      <div class="box translate">translate</div>
      <div class="box rotate">rotate</div>
      <div class="box scale">scale</div>
      <div class="box skew">skew</div>
    </div>
  </body>
</html>

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>회전하는 3D 큐브</title>
    <style>
      body {
        background-color: #111;
        color: white;
        font-family: sans-serif;
        text-align: center;
        padding-top: 50px;
      }

      .scene {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        /* 시점거리 */
        perspective: 800px;
      }

      .cube {
        width: 100%;
        height: 100%;
        position: relative;
        /* 부모 요소가 3D 변환을 적용할 떄, 자식 요소들도 입체적으로 보이게해주는 설정 */
        transform-style: preserve-3d;
        transform: rotateX(-20deg) rotateY(-20deg);
        transition: transform 3s ease-in-out;
      }
      .scene:hover .cube {
        transform: rotateX(360deg) rotateY(360deg);
      }

      .face {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: rgba(0, 150, 255, 0.8);
        border: 2px solid white;
        box-shadow: 0 0 20px rgba(0 0 0 0.5);
        line-height: 200px;
        font-size: 25px;
        font-weight: bold;
        color: white;
      }

      .front {
        transform: rotate(0deg) translateZ(100px);
      }

      .back {
        transform: rotateY(180deg) translateZ(100px);
      }

      .right {
        transform: rotateY(90deg) translateZ(100px);
      }

      .left {
        transform: rotateY(-90deg) translateZ(100px);
      }
      .top {
        transform: rotateX(90deg) translateZ(100px);
      }
      .bottom {
        transform: rotateX(-90deg) translateZ(100px);
      }
    </style>
  </head>
  <body>
    <h2>느리게 회전하는 3D 큐브</h2>
    <p>마우스를 올려보세요!</p>
    <div class="scene">
      <div class="cube">
        <div class="face front">앞</div>
        <div class="face back">뒤</div>
        <div class="face right">오른쪽</div>
        <div class="face lieft">왼쪽</div>
        <div class="face top">위</div>
        <div class="face bottom">아래</div>
      </div>
    </div>
  </body>
</html>



2. transition
- CSS 속성의 값이 바뀔 때 변화가 즉시 일어나지 않고, 부드럽게 애니메이션되도록 만둘어준다.
- 예를 들어, 버튼에 마우스를 올렸을 때 천천히 바뀌는 효과를 줄 수 있다.
    transform : 속성명 지속시간 [타이밍 함수] [지연시간] ;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transition</title>
    <style>
      .btn {
        background-color: steelblue;
        color: white;
        padding: 10px 20px;
        transition: background-color 0.4s, transform 0.3s ease;
      }
      .btn:hover {
        background-color: tomato;
        transform: scale(1.1);
      }
    </style>
  </head>
  <body>
    <button class="btn">마우스를 올려보세요</button>
  </body>
</html>

 

3. transform 활용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>transition 활용</title>
    <style>
      #ex {
        position: relative;
        width: 800px;
        height: 400px;
        margin: 0 auto;
        border: 5px solid black;
        padding: 30px;
      }
      p {
        text-align: center;
        padding-top: 50px;
        font-weight: bold;
      }

      .box {
        font-size: 20px;
        position: relative;
        width: 140px;
        height: 140px;
        margin-bottom: 50px;
        background-color: gold;
      }

      #ex:hover > .box {
        transform: rotate(720deg);
        margin-left: 650px;
      }

      #no-delay {
        transition-duration: 3s;
      }
      #delay {
        transition-duration: 2s;
        transition-delay: 1s;
      }
    </style>
  </head>
  <body>
    <div id="ex">
      <div id="no-delay" class="box">
        <p>(●'◡'●)</p>
      </div>
      <div id="delay" class="box">
        <p>༼ つ ◕_◕ ༽つ</p>
      </div>
    </div>
  </body>
</html>

'Web > HTML + CSS' 카테고리의 다른 글

졸업논문_화학공학과  (0) 2025.04.08
day05_animation  (0) 2025.04.08
day05_미디어 쿼리  (1) 2025.04.08
day04_position_(4)absolute  (0) 2025.04.04
day04_positon_(2) fixed  (0) 2025.04.04

1. 미디어 쿼리
- 미디어 쿼리는 웹 페이지가 다양한 장치등의 화면 크기나 해상도에 맞게 스타일을 다르게 적용할 수 있도록 도와주는 CSS 기능이다.
- 반응형 웹 디자인 구현 가능!!
- 주로 max-width, min-width를 주로 사용! 사용하는 기기가 PC인지 테블릿인지 휴대폰인지 너비로 구분할 수 있게함.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>미디어 쿼리</title>
    <style>
      body {
        background-color: deepskyblue;
        color: white;
        text-align: center;
        padding: 50px;
        font-size: 1.5rem;
      }

      /* 화면 너비가 1024px 이상일 때 (데스크톱) */
      @media (min-width: 1024px) {
        body {
          background-color: gold;
        }
      }
      /* 화면 너비가 768px 이상 1023px 이하일 때(테블릿) */
      @media (min-width:768px) and (max-width:1023px) {
        body {
            background-color: aquamarine;
        }
      }

      /* 화면 너비가 767px 이하일 때(모바일) */
      @media (max-width:767px) {
        body {
            background-color: deeppink;
        }
      }
    </style>
  </head>
  <body>
    <h1>화면 크기에 따라 배경색이 달라집니다.</h1>
    <p>브라우저 크기를 조절해보세요.</p>
  </body>
</html>


2. 미디어 쿼리 활용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>미디어쿼리 활용</title>
    <link rel="stylesheet" href="./media.css" />
  </head>
  <body>
    <div id="container">
      <header>
        <h1>여행가자</h1>
      </header>
      <section id="menus">
        <div id="menu1">
          <h2>풍선</h2>
        </div>
        <div id="menu2">
          <h2>등산</h2>
        </div>
        <div id="menu3">
          <h2>비행기</h2>
        </div>
        <div id="menu4">
          <h2>배낭</h2>
        </div>
        <div id="menu5">
          <h2>기차</h2>
        </div>
      </section>
      <footer><p>&copy; Hyeonji all rights reserved.</p></footer>
    </div>
  </body>
</html>

'Web > HTML + CSS' 카테고리의 다른 글

day05_animation  (0) 2025.04.08
day05_transform  (0) 2025.04.08
day04_position_(4)absolute  (0) 2025.04.04
day04_positon_(2) fixed  (0) 2025.04.04
day04_position_(1) relative  (0) 2025.04.04

1.4 absolute
- 요소를 문서의 일반적인 흐름에서 제거하고, 가장 가까운 position이 지정된 조상 요소를 기준으로 절대적인 위치에 배치할 수 있게 해줌
- 만약, 조상요소에 positon의 종류가 하나도 설정되어있지 않다면,    
    브라우저 창(body)이 기준이 된다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Absolute</title>
    <style>
      .container {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: #f0f0f0;
        border: 2px solid #333;
        margin: 50px auto;
      }
      .absolute-box {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background-color: #4caf50;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 0.9rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      부모 박스
      <div class="absolute-box">절대 위치 박스</div>
    </div>
  </body>
</html>

'Web > HTML + CSS' 카테고리의 다른 글

day05_transform  (0) 2025.04.08
day05_미디어 쿼리  (1) 2025.04.08
day04_positon_(2) fixed  (0) 2025.04.04
day04_position_(1) relative  (0) 2025.04.04
day04_box  (0) 2025.04.04

1.2 fixed
- 브라우저 화면(뷰포트)을 기준으로 요소를 고정
    단, 고정된 위치는 부모 요소가 아닌 브라우저 창 자체를 기준으로 하므로 반응형 디자인 시 주의가 필요함.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fixed</title>
    <style>
      body {
        margin: 0;
        padding: 20px;
        line-height: 2;
      }
      .content {
        height: 2000px;
      }
      .fixed-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #4caf50;
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: bold;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }
      .fixed-button:hover {
        background-color: #388e3c;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>스크롤을 내려보세요</h1>
      <p>이 페이지는 fixed 속성을 테스트하기 위한 예제입니다.</p>
    </div>
    <a href="#" class="fixed-button">위로가기</a>
  </body>
</html>

'Web > HTML + CSS' 카테고리의 다른 글

day05_미디어 쿼리  (1) 2025.04.08
day04_position_(4)absolute  (0) 2025.04.04
day04_position_(1) relative  (0) 2025.04.04
day04_box  (0) 2025.04.04
day04_form  (0) 2025.04.04

+ Recent posts

티스토리툴바