본문 바로가기

분류 전체보기97

[CSS 애니메이션 실전 프로젝트] 인터랙티브 웹사이트 만들기 안녕하세요! 😊 지난번에는 CSS 애니메이션(@keyframes)을 활용하는 방법을 배웠어요. [CSS 애니메이션 완벽 정리] @keyframes로 부드러운 효과 추가하기!안녕하세요! 😊 지난번에는 CSS Grid를 활용해 반응형 웹사이트를 만드는 방법을 배웠어요.이제 레이아웃을 잘 만들 수 있지만, 웹사이트를 더 생동감 있게 만들려면?바로 애니메이션(Animation) 효it-afternoon.tistory.com 이제 실전에서 애니메이션을 활용해 생동감 있는 웹사이트를 만들어볼 거예요! 📌 오늘 만들 프로젝트✔ @keyframes을 사용해 버튼, 이미지, 텍스트에 애니메이션 적용✔ hover, scroll 시 애니메이션 추가로 인터랙티브 효과 구현✔ 반응형 웹에 적용할 수 있는 애니메이션 실전 .. 2025. 3. 27.
[서버 기초] HTTP란? 웹에서 요청과 응답이 오가는 원리 💡 “서버는 어떻게 내 말을 알아듣는 걸까?”우리가 브라우저에 주소를 치고 엔터를 치면서버가 척! 하고 정보를 보내줘요.하지만 질문! 👀“서버는 도대체 내가 뭘 원하는지 어떻게 아는 걸까요?” 정답은 바로,HTTP라는 약속된 통신 규칙 덕분이에요! 💬오늘은 이걸 아주 쉽게 설명드릴게요.🌐 HTTP란?HTTP는 HyperText Transfer Protocol의 약자로,웹에서 정보를 주고받기 위한 약속된 규칙(프로토콜)이에요. 📬 쉽게 말해,“클라이언트와 서버가 서로 대화할 때 쓰는 언어”“브라우저가 서버에게 요청하고, 서버가 응답하는 형식”🔁 요청과 응답, 어떻게 이루어질까?웹에서는 아래처럼 통신이 이루어져요:🙋‍♀️ 클라이언트(브라우저): “이 페이지 좀 보여줘요!”🖥️ 서버: “알겠어요.. 2025. 3. 26.
[CSS 애니메이션 완벽 정리] @keyframes로 부드러운 효과 추가하기! 안녕하세요! 😊 지난번에는 CSS Grid를 활용해 반응형 웹사이트를 만드는 방법을 배웠어요. [CSS Grid 실전 프로젝트] grid를 활용해 반응형 웹사이트 만들기!안녕하세요! 😊 지난번에는 CSS Grid의 기본 개념과 활용법을 배웠어요.오늘은 배운 내용을 바탕으로 실전 프로젝트를 진행해볼 거예요! 📌 목표✔ grid를 활용해서 반응형 웹사이트 레이아웃을it-afternoon.tistory.com 이제 레이아웃을 잘 만들 수 있지만, 웹사이트를 더 생동감 있게 만들려면?바로 애니메이션(Animation) 효과를 추가하면 돼요! 오늘은 CSS 애니메이션의 핵심 개념과 @keyframes를 활용한 부드러운 효과 적용법을 배워볼 거예요.자, 그럼 시작해볼까요? 🎨✨1️⃣ CSS 애니메이션이란?C.. 2025. 3. 26.
[서버 기초] 정적 웹사이트 vs 동적 웹사이트, 뭐가 다를까? 💡 “모든 웹사이트가 똑같이 작동하진 않아요”혹시 이런 적 있으신가요?🧍‍♂️ “어떤 웹사이트는 그냥 띄우면 끝인데…”🧍‍♀️ “어떤 웹사이트는 누를 때마다 새롭게 정보가 바뀌네?”사실 이건 웹사이트가 ‘정적’인지 ‘동적’인지에 따라 달라요.오늘은 이 두 가지 개념을 쉽게, 예제로 비교해볼게요!🧱 정적 웹사이트(Static Website)란?정적 웹사이트는 미리 만들어진 HTML 파일을 그대로 보여주는 웹사이트예요.📦 예를 들어:index.html 파일을 요청하면서버가 그 파일을 수정 없이 그대로 전달즉, “준비된 파일을 보여주는 구조”입니다. 📌 특징:빠름 ⚡서버 자원이 적게 듦데이터가 자주 바뀌지 않는 사이트에 적합 (예: 회사 소개, 블로그)📌 예시:GitHub PagesNetlify로.. 2025. 3. 25.
[CSS Grid 실전 프로젝트] grid를 활용해 반응형 웹사이트 만들기! 안녕하세요! 😊 지난번에는 CSS Grid의 기본 개념과 활용법을 배웠어요. [CSS Grid 완벽 정리] 강력한 레이아웃 시스템 grid 배우기!안녕하세요! 😊 지난번에는 반응형 웹 디자인과 media query 활용법을 배웠어요.이제 우리는 다양한 기기에서 깨지지 않는 웹사이트를 만들 수 있어요!그런데 웹사이트를 디자인할 때 복잡한 레이it-afternoon.tistory.com 오늘은 배운 내용을 바탕으로 실전 프로젝트를 진행해볼 거예요! 📌 목표✔ grid를 활용해서 반응형 웹사이트 레이아웃을 구성✔ media query를 적용해 모바일 & 데스크톱 대응✔ grid-template-areas를 활용해 직관적인 배치 설정자, 그럼 시작해볼까요? 🎨🚀1️⃣ 프로젝트 개요: 반응형 웹사이트 만.. 2025. 3. 25.
[서버 기초] 웹서버 vs 애플리케이션 서버, 뭐가 다를까? 💡 프롤로그: “서버에도 종류가 있어요?”“그냥 서버라고 하면 다 같은 거 아닌가요?”처음에는 이렇게 생각하기 쉽죠. 😅하지만 웹 개발을 조금만 더 깊게 들여다보면,우리가 흔히 말하는 ‘서버’는 사실 두 가지로 나뉩니다.바로 웹서버(Web Server) 와 애플리케이션 서버(Application Server)!이 둘은 역할이 다르고,심지어는 같이 쓰이기도 해요. 🤝오늘은 그 차이를 아주 쉽게 설명드릴게요!🧩 웹서버(Web Server)란?웹서버는 정적인 콘텐츠(HTML, CSS, 이미지 등)를 클라이언트에게 전달하는 역할을 해요.🖼️ 예를 들어:사용자가 index.html 요청웹서버가 해당 파일을 찾아 그대로 전달즉, “파일 배달부” 같은 역할을 하는 거예요! 📌 대표적인 웹서버 소프트웨어:A.. 2025. 3. 24.
반응형

티스토리툴바