컴퓨터강의 (20) 썸네일형 리스트형 홈페이지 만들기 10단원: 배포하기 – 나만의 웹사이트, 세상에 공개하자! 지금까지 열심히 만든 홈페이지, 혼자 보기 아깝죠? 이번 단원에서는 코드를 실제로 세상에 공개(배포)해서 누구나 접속할 수 있게 만드는 방법을 알려드릴게요.1. 배포란 무엇인가?‘배포’는 우리가 만든 홈페이지 파일들을 서버에 업로드해서 브라우저 주소창에 www.내홈페이지.com처럼 접속 가능하게 만드는 작업입니다.2. 무료 배포 사이트 추천GitHub Pages – 정적 HTML 사이트 배포용으로 최고!Netlify – 폼 처리나 서버 기능까지 지원!Vercel – Next.js, 정적 사이트 배포에 강함3. GitHub Pages 배포 방법Github 회원가입 후 새 저장소(repo) 생성index.html, style.css 등 홈페이지 파일 업로드[Settings] → [Pages] → branch.. 홈페이지 만들기 9단원: 서버 연동 기초 이해하기 – 글은 어디로 저장될까? HTML 폼에 입력한 글은 눈에 보이긴 하지만, 페이지를 새로고침하면 사라지죠? 이걸 실제로 저장하려면 서버와 데이터베이스(DB)가 필요합니다. 이번 단원에서는 이 구조를 쉽게 이해해보는 게 목표예요!1. 클라이언트와 서버는 뭐가 다를까?클라이언트: 우리가 보는 화면 (브라우저, HTML/CSS/JS)서버: 글을 저장하고 불러오는 쪽 (백엔드)→ 사용자는 ‘클라이언트’에서 글을 쓰고, 서버는 그걸 데이터베이스에 저장해요.2. 폼 데이터는 어떻게 이동할까? 저장→ 이 코드는 save.php라는 서버 파일로 데이터를 전송해요.3. 서버 언어에는 뭐가 있을까?PHP: 웹에서 많이 사용되는 전통적인 서버 언어Node.js: 자바스크립트 기반 서버Python (Flask, Django): 개발자들이 많이.. 홈페이지 만들기 8단원: 게시판 스타일 적용 – 글 목록도 예쁘게! 홈페이지의 핵심 기능 중 하나인 게시판. 작성된 글이 리스트로 정리돼 보이고, 보기 좋게 스타일링되면 홈페이지의 완성도도 확 올라갑니다!1. 게시판 기본 구조 [공지] 탁구 모임 일정 안내 작성자: 차차 | 날짜: 2025-04-23 [후기] 어제 친선 경기 재밌었어요! 작성자: 정현 | 날짜: 2025-04-22 2. CSS로 깔끔하게 정리하기.board { max-width: 700px; margin: auto; padding: 20px;}.post { border-bottom: 1px solid #ddd; padding: 15px 0;}.post h3 { margin: 0; color: #2c3e50;}.post p { font-size: 14px; .. [광고]홈페이지 만들기 7단원: 글쓰기 기능 만들기 – 사용자 입력 폼 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 홈페이지에서 가장 많이 쓰이는 기능 중 하나가 바로 글쓰기 폼입니다. 회원가입, 게시글 작성, 문의하기… 전부 태그로 만들 수 있어요.1. 기본 글쓰기 폼 만들기 이름: 제목: 내용: 작성하기2. 주요 입력 요소 정리: 한 줄 텍스트 입력: 여러 줄 입력 (게시글 본문 등): 폼 전송 버튼required: 필수 입력 처리3. 예쁘게 CSS 스타일링 해보기form { max-width: 500px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 10px; background-color: #fafafa;}inp.. [광고]홈페이지 만들기 6단원: 이미지와 아이콘 제대로 다루기 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 홈페이지를 꾸밀 때 이미지와 아이콘은 빠질 수 없는 요소입니다. 이번 단원에서는 HTML에서 이미지를 어떻게 삽입하고, 무료 아이콘을 어떻게 활용하는지를 실습과 함께 배워볼 거예요.1. 이미지 삽입 기본src: 이미지 경로alt: 이미지가 안 보일 때 대체 텍스트 (웹 접근성에 중요!)2. 외부 이미지 링크도 가능!→ 테스트용 이미지로 Placeholder.com 추천!3. CSS로 이미지 스타일링img { width: 100%; max-width: 500px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}→ 이미지에 둥근 모서리 + 그림자 .. [광고]홈페이지 만들기 5단원: 예쁜 홈페이지 디자인 – 헤더, 버튼, 레이아웃 꾸미기 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 홈페이지의 첫인상은 디자인에서 결정됩니다. 이번 단원에서는 헤더, 버튼, 전체 레이아웃을 예쁘게 꾸미는 방법을 배워볼 거예요. HTML과 CSS로 충분히 감각적인 UI를 만들 수 있어요!1. 헤더(Header) 디자인 기본 차차의 탁구 동호회 홈 게시판 갤러리 /* CSS */header { background-color: #2c3e50; color: white; padding: 20px; text-align: center;}header nav a { color: white; margin: 0 10px; text-decoration: none; font-weight: bold.. [광고]홈페이지 만들기 4단원: 모바일에서도 예쁘게! 반응형 레이아웃의 핵심 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 요즘 사람들은 스마트폰으로 웹사이트를 더 많이 봅니다. 그래서 홈페이지는 꼭 모바일에서도 잘 보이게 만들어야 해요. 이걸 가능하게 해주는 게 바로 반응형 웹(Responsive Web)이에요.1. 반응형 웹이란?사용자의 기기(PC, 태블릿, 스마트폰)에 따라 화면이 자동으로 최적화되는 웹사이트를 말해요. 기기의 화면 크기, 해상도에 따라 레이아웃이 유연하게 바뀌죠.2. 반응형을 위한 필수 태그→ 이 코드는 웹사이트를 모바일 브라우저에서도 맞춤 크기로 보여주게 합니다.3. 반응형을 위한 CSS 단위% : 전체 기준 비율vw / vh : 화면의 너비/높이 비율em / rem : 폰트 기준 상대 크기media qu.. 홈페이지 만들기 3단원: CSS 기초 – 디자인은 이렇게 시작해요 이전 시간에 HTML로 홈페이지의 뼈대를 만들었다면, 이제는 여기에 스타일을 입혀줄 차례입니다. 바로 CSS (Cascading Style Sheets)를 사용해서 말이죠! CSS는 색상, 크기, 폰트, 여백 등 웹사이트의 ‘겉모습’을 담당합니다.1. CSS 기본 문법선택자 { 속성: 값;}예시:h1 { color: blue; font-size: 30px;}이 코드는 모든 제목의 글자를 파란색, 크기 30픽셀로 바꿔줘요.2. CSS 연결 방법 3가지인라인 방식 : HTML 태그 안에 직접 작성빨간 글씨내부 스타일 : HTML 파일 내부에 외부 스타일 (추천!) : 별도 CSS 파일 연결3. 자주 쓰는 CSS 속성color: 글자 색background-color: 배경 색font-size: 글자 크.. 이전 1 2 3 다음
