본문 바로가기

비전공자 개발 지망생(前디자이너)의 데굴데굴 굴러가는 개발 일지 블로그

전체 글
39

📝 [250314/오답노트] 자바스크립트 querySelector(), appendChild(), for문, 그리고 if-else 자바스크립트에서 HTML 요소를 선택하고(body 가져오기), 새로운 요소를 생성해서 추가하는 방법을 정리했다.처음에는 "왜 querySelector()를 써야 하지?", "왜 appendChild()가 필요 하지?","그냥 div를 직접 만들면 안 돼?", "왜 for문을 써야 하고 if-else를 같이 써야 해?" 같은 생각이 들었다. 하지만 직접 코드를 분석하면서 이 코드를 이렇게 작성해야 하는 이유가 있었다..!그래서 생각도 정리할겸 오답노트 형식으로 정리해 보았다! 🚀📌 1. querySelector()와 appendChild()는 왜 필요할까?자바스크립트로 HTML 문서를 조작하고 싶다라고 가정해보자.그러면 안에 새로운 요소 ()를 만들어 추가해야한다.이때 사용하는 것이 바로 queryS.. 2025. 3. 14.
📌 왜 웹 개발은 JavaScript로 해야 할까? 🤔 안녕하세요! 😊 오늘은 왜 웹 개발에서는 JavaScript(자바스크립트)를 필수로 사용해야 하는지 알아봅시다! 💻💡 웹 개발이란?웹 개발(Web Development)은 웹사이트를 만드는 과정입니다.우리가 매일 사용하는 네이버, 유튜브, 인스타그램 같은 사이트들도 모두 웹 개발로 만들어져 있어요! 🌐 웹 개발은 보통 3가지 기술로 이루어집니다.1️⃣ HTML → 웹사이트의 뼈대(구조) 🏗️2️⃣ CSS → 디자인(색상, 글꼴, 크기 등) 🎨 3️⃣ JavaScript → 기능(버튼 클릭, 데이터 변경, 애니메이션 등) ⚡💡 즉, HTML과 CSS는 정적인 웹사이트를 만들지만, JavaScript는 웹사이트를 '살아 움직이게' 해줘요!🔹 웹 개발에서 JavaScript가 꼭 필요한 이유1️.. 2025. 3. 12.
📌 display: flex; 쉽고 빠르게 배우는 법 🚀 안녕하세요! 😊 오늘은 CSS에서 레이아웃을 쉽게 정리할 수 있는 display: flex; 속성을 준비했습니다!위치 잡기 어려우신 분들은 꼭 보시고 완.전.정.복 해봐요!🏗️💡 display: flex;란?**display: flex;**는 요소들을 가로 또는 세로로 정렬할 때 사용하는 CSS 속성이에요.✔️ flex를 사용하면? ✅ 요소를 가운데 정렬하기 쉬워요.✅ 가로, 세로 정렬을 자유롭게 조절 가능해요.✅ float, position 없이도 레이아웃을 깔끔하게 정리할 수 있어요! 📌 기본 문법.container { display: flex; /* flexbox 적용 */}이제 flex를 잘 활용하는 방법을 하나씩 알아볼까요? 😊1️⃣ justify-content (가로 정렬)ju.. 2025. 3. 10.
📌 브라우저가 웹 페이지를 렌더링하는 과정 (네이버 접속 과정) 🚀 안녕하세요! 😊 오늘은 브라우저가 웹 페이지를 불러오고 렌더링하는 과정을 알아봅시다!예를 들면, 우리가 주소창에 "naver.com"을 입력하면 어떤 일이 일어날까요? 🤔💡 웹 페이지가 렌더링되는 전체 과정네이버에 접속하는 과정은 크게 5단계로 나뉩니다.1️⃣ 사용자가 URL을 입력하면? (요청 보내기)우리가 "https://www.naver.com"  을 주소창에 입력하고 엔터를 누르면, 브라우저가 서버에 요청(Request)을 보냅니다.브라우저는 입력한 URL의 IP 주소를 찾기 위해 DNS(Domain Name System) 서버를 조회합니다.예를 들어, naver.com의 실제 IP 주소가 223.130.195.200이라고 가정하면, 브라우저는 해당 서버로 요청을 보냅니다.✅ 이 단계에서는?.. 2025. 3. 7.

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바