Here Comes the Sun

HANCOM AI ACAMEMY/수업 및 플젝

HTML/CSS : 2월 6일

c'est sunny 2025. 2. 6.
 

Animista - On-Demand CSS Animations Library

Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.

animista.net

 

개발자모드에서 취소선은 우선순위에서 밀려나 적용이 안 된 것임

 

 

c_antmation_01.html

        /* 🎯 7. 크기가 점점 커졌다 작아지는 애니메이션 */
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        .box.pulse {
            animation: pulse 1s infinite;
        }

%와 scale의 의미

더보기

@keyframes에서 사용되는 0%, 50%, 100% 같은 값들은 애니메이션 진행도를 나타내는 퍼센트(%)야.

  • 0% → 애니메이션이 시작하는 시점
  • 50% → 애니메이션이 절반 진행된 시점
  • 100% → 애니메이션이 끝나는 시점

너의 코드에서 pulse 애니메이션은 다음과 같이 동작해:

  1. 0% (시작점): 요소의 크기가 원래 크기 (scale(1))
  2. 50% (중간점): 요소가 1.2배 커짐 (scale(1.2))
  3. 100% (끝점): 다시 원래 크기로 돌아옴 (scale(1))

이게 1s infinite로 설정되어 있어서, 1초마다 반복해서 커졌다가 원래 크기로 돌아오는 애니메이션이 실행되는 거야. 🔄

 

 

 

c_flex_04.html

* 쉽게 가운데로 아이템 위치시키고 싶을 때 현업에선 div, justify-content, align-items를 활용하여 이렇게 함

<style>    
    .flex-column {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
</style>

    <h3>2. 세로 정렬 (`flex-direction: column;`)</h3>
    <div class="container flex-column">
        <div class="box itema">Item A</div>
    </div>

 

결과화면

 

 

 

c_flex_07.html

1) 아이템이 1줄인 경우

- justify-content

- align-items

2) 아이템이 2줄인 경우 

- align-content 

 

 

 

c_flex_09.html

        .layout {
            display: flex;
            width: 80%;
            max-width: 900px;
            margin: auto;
            border: 2px solid navy;
        }
    <h2>Sidebar Layout</h2>

    <div class="layout">
        <div class="sidebar">Sidebar</div>
        <div class="content">Main Content</div>
    </div>

 

display: flex의 역할

CSS의 Flexbox 레이아웃을 활성화하는 속성입니다. 이를 적용하면 해당 요소가 플렉스 컨테이너(flex container) 가 되어 내부 요소들(플렉스 아이템)이 특정 규칙에 따라 배치됩니다.

기본적으로 플렉스 아이템은 가로(row) 방향으로 배치됨 (flex-direction: row).

 

 

 

c_grid_02.html

.grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr; /* 3개의 컬럼: 첫 번째와 세 번째는 같고, 두 번째는 두 배 */
            grid-template-rows: 100px 150px 100px; /* 3개의 행: 두 번째 행이 더 큼 */
            gap: 10px;
            background-color: #eee;
            padding: 10px;
        }
 

일단 컨테이너의 컬럼, 행 개수만큼 div를 만들고(3*3=9) 병합하면 남은 셀들 뒤로 밀리는 건 지움

 

 

 

c_position_02.html

 
    <style>
        .wrapper {
            width: 600px;
            height: 600px;
            border: 2px solid black;
            padding: 10px;
        }

        .parent {
            position: relative;
            /* 부모를 기준으로 Absolute가 배치됨 */
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            border: 2px solid blue;
            margin: 20px;
            font-weight: bold;
        }

        .parent2 {
            position: relative;
            /* 부모를 기준으로 Absolute가 배치됨 */
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            border: 2px solid blue;
            margin: 20px;
            font-weight: bold;
        }

        .absolute-box {
            position: absolute;
            top: 30px;
            left: 10px;
            width: 100px;
            height: 50px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
        }


    </style>

<body>
 
    <h2>✅ `absolute`는 가장 가까운 `relative` 부모를 기준으로 배치됨</h2>

    <div class="wrapper">
        <div class="parent">
            부모 (Relative)
            <div class="absolute-box">Absolute</div>
            <div class="absolute-box2">Absolute</div>
        </div>
        <div class="parent2">
            부모2 (Relative)

        </div>
    </div>

</body>

 

parent 태그에서 relative를 지우면 absolute 박스가 위로 이동하는데 

첫번째로 부모요소 wrapper에 접근해도 relative position이 아니라서 최종적으로 body가 기준이 되기 때문임

 

 


c_position_03.html

.box {
            position: absolute;
            width: 80px;
            height: 80px;
            background-color: tomato;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            border-radius: 6px;
        }
.center {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);    /* 얘 없으면 정중앙에 상자 모서리(왼쪽위)가 오게 됨 */
        }

 

1) .box 안에 position: absolute; 필요한 이유

position: absolute;의 가장 큰 역할은 부모 요소를 기준으로 특정 위치에 배치할 수 있게 해주는 것

✅ .box는 .container 안에서 왼쪽 위 (10px, 10px) 위치에 배치됨.
✅ absolute이 없으면 그냥 문서 흐름대로 배치돼서 원하는 위치를 못 맞춤.

 

2) transform: translate(-50%, -50%)의 역할

우리는 박스의 정확한 중앙을 중앙에 맞추고 싶어.
그래서 translate(-50%, -50%)을 추가해서 자기 크기의 절반만큼 다시 이동하는 거야.

✅ left: 50%, top: 50% → 왼쪽 위 모서리가 중앙에 가도록 함
✅ translate(-50%, -50%) → 자기 크기의 절반만큼 왼쪽/위로 이동 → 정확한 중앙 정렬 🎯

- transform: translate(-50%, -50%)이 필요한 이유

 

3) absolute + translate 조합의 장점

- absolute으로 특정 위치(예: top: 50%; left: 50%)에 배치

- translate(-50%, -50%)로 모서리가 아니라 요소의 정중앙이 맞도록 조정

- 부모 요소 크기가 달라져도 항상 중앙 정렬 유지 가능!

 

🚀  용어 :  CSS에서는 .box를 "선택자", position을 "속성", absolute를 "값"이라고 불러

저작자표시 비영리 변경금지 (새창열림)

'HANCOM AI ACAMEMY > 수업 및 플젝' 카테고리의 다른 글

Javascript : 2월 10일  (0) 2025.02.10
HTML/CSS, Javascript : 2월 7일  (0) 2025.02.07
HTML/CSS : 2월 5일  (0) 2025.02.05
HTML/CSS : 2월 4일  (0) 2025.02.04
HTML/CSS : 2월 3일  (2) 2025.02.03

댓글

티스토리툴바