본문 바로가기

분류 전체보기97

[HTML/CSS/JS 실전 프로젝트] 포트폴리오 미니 웹사이트 만들기 안녕하세요! 😊지난 시간까지 우리는 HTML/CSS의 기초부터 레이아웃, 반응형, 애니메이션, 성능 최적화까지 배워봤어요. [웹사이트 성능 최적화] CSS 애니메이션 속도 향상 & 렉 없는 부드러운 효과 만들기!안녕하세요! 😊 지난 시간에는 JavaScript와 CSS 애니메이션을 결합해 인터랙티브한 효과를 구현해봤어요.이번엔 한 단계 더 나아가서, 애니메이션이 느려지거나 버벅이는 현상을 줄이는 방법을it-afternoon.tistory.com이제 이 모든 걸 종합해서, ✨작고 완성도 높은 실전 웹사이트를 하나 만들어볼 거예요!이번 프로젝트는 개인 포트폴리오 웹사이트를 주제로 진행하며,💡 “디자인 + 반응형 + 인터랙션”이 모두 담긴 구조로 실습합니다.✅ 프로젝트 목표📌 HTML/CSS/JavaS.. 2025. 4. 1.
[서버 기초] 서버 호스팅 vs 클라우드 서버, 어떤 차이가 있을까? 💡  “웹사이트를 만들려면 서버가 필요하다고?”누군가 이렇게 질문할 수도 있어요."내가 웹사이트를 만들었는데, 이제 어디에 올려야 하지?" 정답은 ‘서버’에 올려야 합니다.그런데, 서버를 직접 사서 운영해야 할까요? 아니면 빌려서 쓰면 될까요?이게 바로 호스팅(Hosting)과 클라우드(Cloud)의 차이입니다! 🌍 오늘은 이 둘의 차이를 쉽게 설명해볼게요.🏢 1. 서버 호스팅이란?“서버 한 대를 빌려서 웹사이트를 운영하는 방식” 서버 호스팅은 웹사이트 운영을 위해 서버를 임대하는 것이에요.기본적으로 실제 물리적인 서버(컴퓨터)를 빌려서 사용한다고 보면 돼요. 📌 서버 호스팅의 종류 1️⃣ 공유 호스팅 (Shared Hosting) 🏠여러 사용자가 하나의 서버를 공유해서 사용저렴하지만 속도나 성.. 2025. 3. 31.
[웹사이트 성능 최적화] CSS 애니메이션 속도 향상 & 렉 없는 부드러운 효과 만들기! 안녕하세요! 😊 지난 시간에는 JavaScript와 CSS 애니메이션을 결합해 인터랙티브한 효과를 구현해봤어요. [JavaScript + CSS 애니메이션] 더 강력한 인터랙티브 효과 만들기!안녕하세요! 😊 지난번에는 CSS 애니메이션과 JavaScript를 활용한 인터랙티브 웹사이트를 만들었어요. [CSS 애니메이션 실전 프로젝트] 인터랙티브 웹사이트 만들기안녕하세요! 😊 지난번에는 CSSit-afternoon.tistory.com 이번엔 한 단계 더 나아가서, 애니메이션이 느려지거나 버벅이는 현상을 줄이는 방법을 알려드릴게요.📌 주제:✔ CSS 애니메이션 성능 저하 원인 분석✔ 부드럽고 빠른 애니메이션을 만드는 실전 팁✔ 렉 없이 동작하는 웹사이트 만들기 전략그럼 바로 시작해볼까요? 🚀✨1️.. 2025. 3. 31.
[서버 기초] 도메인과 서버는 어떻게 연결될까? DNS의 모든 것 💡 “도메인은 주소인데, 서버는 컴퓨터잖아?”우리는 인터넷을 쓸 때 이렇게 입력하죠🔎 www.naver.com, www.google.com 하지만 실제 서버는 숫자로 된 IP 주소를 가지고 있어요.그럼 질문! ❓“도메인 주소를 입력하면, 어떻게 그 숫자 서버로 연결되는 걸까요?” 바로 여기서 등장하는 게 DNS(Domain Name System)입니다!오늘은 그 과정을 쉽게 풀어볼게요. 😄🏡 도메인이란?도메인(Domain)은🌐 인터넷상의 웹사이트 주소입니다. 📌 예:www.coupang.comlearnkoreanhub.tistory.com💬 쉽게 말해:"인터넷 세상의 집 주소"라고 생각하면 돼요!💻 서버는 IP 주소를 사용해요서버끼리는 숫자(IP 주소)로 서로 통신해요. 📦 예시:142... 2025. 3. 28.
[JavaScript + CSS 애니메이션] 더 강력한 인터랙티브 효과 만들기! 안녕하세요! 😊 지난번에는 CSS 애니메이션과 JavaScript를 활용한 인터랙티브 웹사이트를 만들었어요. [CSS 애니메이션 실전 프로젝트] 인터랙티브 웹사이트 만들기안녕하세요! 😊 지난번에는 CSS 애니메이션(@keyframes)을 활용하는 방법을 배웠어요.이제 실전에서 애니메이션을 활용해 생동감 있는 웹사이트를 만들어볼 거예요! 📌 오늘 만들 프로젝트✔ @keyfit-afternoon.tistory.com 그런데 더 다이나믹한 효과를 추가하려면?👉 JavaScript와 CSS 애니메이션을 결합하면 더욱 강력한 인터랙티브 효과를 구현할 수 있어요! 오늘은 스크롤, 클릭, 마우스 이동 등의 이벤트와 CSS 애니메이션을 결합하는 방법을 배워볼 거예요!자, 그럼 시작해볼까요? 🚀✨1️⃣ Java.. 2025. 3. 28.
[서버 기초] HTTPS란? HTTP랑 뭐가 다르고, 왜 중요할까? 💡 “요즘 사이트 주소에 자물쇠 아이콘 보셨나요?”브라우저 주소창 왼쪽에 🔒 자물쇠 아이콘이 보인다면,그 웹사이트는 HTTPS를 사용하고 있다는 뜻이에요.그런데 궁금하지 않으세요?“HTTP랑 HTTPS는 뭐가 다르고, 왜 HTTPS를 써야 할까?” 이번 대본에서 아주 쉽게 풀어드릴게요!🌐 HTTP vs HTTPS, 차이점 한 줄 요약!HTTP: 정보가 그냥 오고 감 (📦 택배 상자 뚜껑 열려 있음)HTTPS: 정보가 암호화되어 오고 감 (🔐 자물쇠로 잠긴 택배 상자)🔐 HTTPS란?HTTPS = HTTP + S(Secure)즉, HTTP에 보안 기능이 추가된 통신 방식이에요! 💡 정보를 주고받을 때 암호화(Encryption)를 통해누군가 중간에서 몰래 훔쳐봐도 내용을 알 수 없게 해주는 기.. 2025. 3. 27.
반응형

티스토리툴바