끄적이는 웹개발 블로그

📘 제로부터 시작하는 웹개발 입문 #5 📐 HTML/CSS 실전 레이아웃 구성법 안녕하세요! 이제는 간단한 웹페이지도 만들고, 스타일도 입혀봤죠? 이번에는 한 단계 더 나아가서 웹페이지의 **레이아웃(배치)** 을 실전처럼 구성해볼 거예요. --- ✅ 오늘 목표 - HTML로 기본 레이아웃 영역 나누기 - CSS로 박스 구조 만들기 - `Flexbox`를 사용해서 가로 정렬/세로 정렬 배우기 --- 🏗 웹페이지의 기본 레이아웃 구조 대부분의 웹사이트는 아래처럼 크게 5개 영역으로 나뉘어요: 📌 전체 구성 예시[Header][Navigation][Main Content + Sidebar][Footer] --- 📁 예제 코드: 기본 구조 만들기 ```html 헤더 영역 ..

📘 제로부터 시작하는 웹개발 입문 #4 🚀 실전! 나만의 미니 웹페이지 만들기 안녕하세요! 지금까지 HTML과 CSS 기초를 배웠다면, 이제는 **직접 웹페이지를 하나 만들어볼 차례**입니다. 이번 시간에는 간단한 **"자기소개 웹페이지"** 를 만들어보며 그동안 배운 내용을 정리해볼 거예요. --- 🎯 목표 - HTML로 구조 만들기 - CSS로 디자인 꾸미기 - 브라우저에서 직접 열어보기 --- 🗂 준비물 - 코드 편집기: [VS Code](https://code.visualstudio.com/) (무료) - 웹브라우저: Chrome, Edge, Safari 등 아무거나 OK! --- 📄 파일 구조 만들기 우선 아래처럼 폴더와 파일을 만들어주세요: mini-web..

📘 제로부터 시작하는 웹개발 입문 #3 🎨 “CSS로 웹페이지 꾸미기” 안녕하세요! 지난 시간엔 HTML로 기본적인 웹페이지를 만들었죠. 이번에는 그 웹페이지에 색상, 폰트, 여백 등을 입혀서 디자인적으로 보기 좋게 만드는 방법을 배워볼 거예요. --- ✅ CSS가 뭐였더라? CSS는 웹사이트의 스타일을 담당하는 언어입니다. 디자인 요소인 색상, 폰트, 간격, 정렬 등을 지정해 웹페이지를 보기 좋게 꾸밀 수 있어요. --- 🧱 HTML 기본 구조 (복습) html 나의 첫 웹페이지에 오신 걸 환영합니다! HTML과 CSS로 멋진 웹사이트를 만들 수 있어요. 🎨 CSS 추가 방법 3가지방법설명인라인 스타일태그 안에 style 속성으로 적용내부 스타일 시트 나의..

📘 제로부터 시작하는 웹개발 입문 #2💡 “HTML 기초 문법과 첫 웹페이지 만들기” 안녕하세요!지난 시간에는 웹사이트를 구성하는 3요소 — HTML, CSS, JavaScript에 대해 간단히 알아봤죠.오늘은 본격적으로 HTML로 첫 번째 웹페이지를 직접 만들어보는 시간입니다! ✅ HTML 기본 구조 이해하기 HTML 파일은 기본적으로 아래와 같은 구조를 가집니다: 안녕하세요! 이것은 나의 첫 번째 웹페이지입니다. 각 부분을 간단히 설명하면: 태그역할이 문서는 HTML5 문서라고 선언HTML 문서의 시작과 끝 나의 첫 웹페이지에 오신 걸 환영합니다! HTML은 정말 재미있어요 😄 3단계. 파일로 저장하기파일 이름: index.html저장할 때 UTF-8 인코딩으로 저장하..

📘 제로부터 시작하는 웹개발 입문 #1 💡 “웹사이트는 어떻게 만들어질까?” 안녕하세요! 이 시리즈는 웹개발을 처음 접하는 분들을 위해 준비한 입문 튜토리얼입니다. 오늘은 웹사이트가 어떻게 만들어지는지, 그리고 개발자가 어떤 언어를 사용해 웹을 만드는지 아주 쉽게 알려드릴게요. 🔽🔽🔽✅ 웹사이트 = 3요소의 조합 우리가 흔히 보는 웹사이트는 아래 세 가지 기술이 함께 동작해서 만들어집니다.| 요소 | 역할 | 예시 | |------|------|------| | HTML | 웹페이지의 뼈대 | 제목, 문단, 이미지, 버튼 | | CSS | 웹페이지의 스타일 | 색상, 폰트, 배치, 애니메이션 | | JavaScript | 웹페이지의 동작 | 버튼 클릭, 팝업, 탭 전환 | --- 🧱..