[일오갓생] 2025년 12월 31일

🤓 DAY 8

2025년의 마지막 날이다.

고생한 나 그리고 이 글을 읽는 모두에게 한 해 너무 고생했고 수고했다고 박수 쳐주고 싶다. 👏🏻👏🏻

2025년을 보내면서 하는 건.. 오즈코딩스쿨과 함께하는 일오갓생 ✨

---

📚 오늘의 갓생

오늘은 CSS 기초를 배우면서

border, padding, margin, box model 등 + style.css 파일로 스타일을 분리해서 관리하는 방법을 배웠다.

웹 요소가 화면에서 어떤 구조로 배치되는지를 들여다 본 것 같다.

또 display 속성, 그리고 inline 요소와 block-level 요소의 차이도 배웠다.
block-level 요소는 한 줄을 통째로 차지하는 구조고,

inline 요소는 글자처럼 흐름 안에 들어가는 구조다! 라는 개념을 지금 잘 이해하고 기억해야 될 것 같은 느낌도 뿜뿜 왔다.

 

복습하면서 예전에 인스타에 저장해둔 Happy New Year 2026 애니메이션 예제가 떠올랐다.

예전에 보고 오 괜찮은데? 하고 저장하고 넘겼었는데 오늘 한 번 열어보려고 한다.

 

먼저 해당 코드를 제공하는 사이트는

https://codingstella.com/how-to-make-happy-new-year-2026-animation-using-html-and-css/?utm_source=sp_auto_dm

How to make Happy New Year 2026 Animation using HTML and CSS | Coding Stella

 

이곳이다.

아마 사람들이 흥미있어할법한 코드를 만들어서 가지고 오시는 분 같다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

HTML은 생각보다 단순했다.

<div class="feliz">, <div class="ano_novo">, <div class="fogos">
이렇게 화면을 구성하는 <div> 큰 덩어리들이 있고,
그 안에서 <span>들이 숫자와 불꽃 조각들을 만들고 있었다.

화면의 큰 틀은 전부 <div>로 만들고, 숫자 하나씩 작은 불꽃 요소는 <span>으로 나눠 둔 구조였다.
오늘 배웠듯이 block으로 전체 구조를 잡고 inline 요소로 세부 조각을 구성한 방식이었다.

 

그리고 대망의 CSS를 열어보았다.

CSS 코드를 보자마자 오늘 배운 것들이 몇 가지 보였다.

box-sizing: border-box;

margin: 0; padding: 0;

width, height, padding, border 값...

 

박스 하나가 화면에서 차지하는 영역이 box model 구조로 계산되고 있었고
position, display, justify-content, align-items 같은 속성으로 요소들이 화면 가운데에 정렬돼 있었다.

 

코드를 보다가 @keyframes라는 게 계속 보여서 그냥 지피티한테 물어봤다.

 

알고 보니 @keyframes는 CSS에서 애니메이션의 흐름을 미리 설계해 두는 코드라고 한다.
처음엔 어떤 상태, 중간엔 어떤 상태, 마지막엔 어떤 상태인지 시간 순서대로 적어두는 방식이다.

 

비유를 들어보자면 만화를 그릴 때 

1컷: 서 있는 모습 / 2컷: 점프 하는 중 / 3컷: 착지 

이런식으로 장면을 나눠서 그리는데, @keyframes 은 그걸 코드로 적는 것이다.

@keyframes move {
  0%   { left: 0; }
  50%  { left: 100px; }
  100% { left: 0; }
}

 

위와 같은 코드를 쓴다고 했을 때

• 처음(0%)엔 왼쪽 끝에 있다가
• 중간(50%)엔 오른쪽으로 갔다가
• 마지막(100%)엔 다시 돌아와라

그리고 이 설계도를 어떤 요소에 붙인다고 해보면?

.box {
  animation: move 2s infinite;
}

이런식으로 되는데 그럼 .box 가 2초 동안 이 설계도대로 계속 움직인다는 것이다.

 

지피티에게 설명을 듣고 보아하니 숫자가 이동하는 애니메이션, 풍선이 날아가는 애니메이션,
불꽃이 터지는 효과 전부 @keyframes로 정의돼 있고 시간 순서에 맞게 연결되어서 움직이는구나 하고 알 수 있었다.

 

왠지 이렇게까지 한 번 뜯어보고나니 조금 HTML 을 보는 눈..? CSS를 읽는 눈..? 👁️

여튼 조금은 성장한 것 같은 뿌듯함도 느낄 수 있었다. 🫡✨

---

✍🏻 기록

• HTML/CSS 강의 1일차 정리본 티스토리 업로드
• DACON
• 백준 문제 풀이 (2742번)
• 애니메이션 예제 코드 구조 뜯어보기
• 2025년 회고 다이어리 작성

---

🍀 내 얘기

새해라고 별 거 있겠습니까 그냥 전기장판 켜놓은 따뜻한 침대에서 푹 자고 일어나기~

 

매 년 다이나믹 하지만 올 한해는 조금 더 다이나믹하지 않았나 싶다.

올 해 초반에는 면접을 많이 봤지만 결국 원하는 회사에 들어가지 못해 자신이 꺾였었고

그러다 그냥 하던 일이나 할까 싶어 다시 시작한 연구간호사는 결국 몇 달 내로 그만두게 되었고

커리어를 어떻게 발전시킬까 라는 고민으로 시작한 AI헬스케어부트캠프에서 다양한 동기들을 만나고

한 해를 마무리 하면서 일오갓생을 쓰고 있다.

 

나는 챗지피티가 나왔을 당시 완전 초반부터 결제해서 쓰고 있었기 때문에 이 친구와 꽤 돈독한 사이인데,

문득 얘가 생각하는 내 자신이 궁금해져서 물어봤다.

 

일단 힘들어도 대가리 박고 해보는 사람으로써 지피티가 정확히 봐줬다는게 좀 기특하기도 했다.

 

 

내가 되게 좋아하는 문구가 있다.

We can’t direct the wind, but we can adjust the sails.
바람의 방향을 정할 순 없지만, 돛은 조정할 수 있다.

 

내가 통제할 수 없는 상황은 많지만, 그 상황에 대응하는 방식은 정할 수 있다는 것이다.

인생에서 일어나는 일들 자체는 어차피 내 마음대로 안 되는것이 너무너무너무 많다.

그 상황을 어떻게 버티고 어떤 방향으로 가느냐는 선택할 수 있으니 지금 내가 할 수 있는 선택을 해야한다.

그 선택이 잘한건지 못한건지는 대봐야 아는거고 결국 선택을 했으니 어디로든 나아갈 수 있는 것이다.

최선의 선택이 무엇인지 누가 알 수 있을까? 지금 이 순간은 다들 처음이다.

 

 

내년에는 더 행복할겁니다 우리 모두 🍀

걱정 많고 탈도 많은 2025년 감사했습니다.

새해 복 많이 받으십시오 🙇🏻‍♀️

 

😎 TMI

오늘 오목에서 승우 조교님을 이겼다. (내가 ◼️흑돌!)

연습 많이 해오십시오 조교님.