🛠 HTML과 CSS로 나만의 웹사이트 만들기 – 웹 개발 첫걸음

IT 및 기술

🛠 HTML과 CSS로 나만의 웹사이트 만들기 – 웹 개발 첫걸음

2025. 5. 15.

by. content1052

인터넷에서 우리가 보는 대부분의 웹페이지는 HTML과 CSS로 만들어졌습니다.

HTML (HyperText Markup Language): 웹페이지의 뼈대를 만드는 언어
CSS (Cascading Style Sheets): 그 뼈대에 색깔, 글꼴, 레이아웃 등 ‘디자인’을 입히는 스타일 시트 언어

두 언어는 함께 사용되며, 웹사이트를 만드는 데 있어 가장 기초적이면서도 꼭 필요한 도구입니다.

🛠 웹사이트 제작을 위한 준비물

✔ 필요한 도구

코드 편집기: VS Code 추천 https://code.visualstudio.com
웹 브라우저: 크롬, 엣지, 파이어폭스 등
폴더 구조: index.html, style.css 파일로 시작

→ TIP: 따로 설치할 서버나 프로그램 없이, 웹브라우저로 바로 결과를 확인할 수 있습니다.

🔤 HTML 기본 구조와 필수 태그

html

<!DOCTYPE html>

<html>

<head>

</head> <body> <h1>안녕하세요!</h1>

<p>이것은 HTML로 만든 문단입니다.</p>

</body>

</html>

✔ 자주 쓰는 태그

<h1>~<h6>: 제목
<p>: 문단
<a>: 하이퍼링크
<img>: 이미지 삽입
<ul>, <li>: 목록

🎨 CSS의 역할과 기본 문법

HTML이 ‘구조’라면, CSS는 ‘꾸미기’입니다.

css

body {

background-color: #f2f2f2;

font-family: Arial, sans-serif;

}

h1 {

color: #333; text-align: center;

}

✔ CSS 작성 방식

내부 스타일: <style> 태그 안에 작성
외부 스타일시트: 별도 파일(style.css)로 작성 후 <link>로 연결

→ TIP: 실전에서는 외부 스타일시트 방식이 가장 일반적이며, 유지보수에 좋습니다.

✨ HTML + CSS로 나만의 홈페이지 만들기

✔ 기본 구조 만들기

index.html 파일 생성
style.css 파일 생성
아래처럼 연결하기:

html

<head>

</head>

✔ 실습 예제: 자기소개 페이지

index.html

html

복사편집

<h1>홍길동입니다</h1>

<p>프론트엔드 개발자가 되고 싶어요!</p>

style.css

css

body {

background-color: #fff;

color: #111;

font-family: 'Noto Sans KR', sans-serif;

}

h1 {

color: #0099cc;

}

🗂 웹 폴더 구조와 파일 연결 방법

정리된 폴더 구조는 유지보수에 꼭 필요합니다.

perl

my-website/
│
├── index.html
├── style.css
├── images/
│ └── profile.jpg

이미지 경로 : <img src="images/profile.jpg">
CSS 연결: <link rel="stylesheet" href="style.css">

📱 반응형 웹사이트 기초 개념

모바일에서도 웹사이트가 잘 보이게 하려면?

css

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

@media는 화면 크기에 따라 스타일을 다르게 적용하는 반응형 디자인을 위한 기능입니다.
모바일, 태블릿, 데스크탑 모두 지원되는 사이트를 만들 수 있어요.

🚀 웹사이트 완성 후 테스트 및 배포 방법

✔ 테스트 방법

파일 더블 클릭 → 브라우저에서 열기
크롬 개발자 도구(F12)로 다양한 해상도 확인

✔ 무료 배포 플랫폼

GitHub Pages: https://pages.github.com
Netlify: https://www.netlify.com
Vercel: https://vercel.com

→ TIP: GitHub Pages는 정적 웹사이트 초보자에게 특히 추천하는 무료 호스팅입니다.

HTML과 CSS는 복잡한 프로그래밍 없이도 누구나 웹사이트를 직접 만들 수 있게 해주는 가장 쉬운 기술입니다.
처음에는 간단한 자기소개 페이지부터 시작해보세요.
몇 시간만 투자해도 나만의 홈페이지를 완성할 수 있고, 포트폴리오나 이력서에도 활용할 수 있습니다.

지금 시작해보세요. 웹은 생각보다 쉽고, 즐겁습니다.

'IT 및 기술' 카테고리의 다른 글

🔄 머신 러닝 vs 딥 러닝 – 개념과 차이 쉽게 설명하기 (1)	2025.05.19
☁️ 클라우드 컴퓨팅이란? AWS, Azure, GCP 비교 완벽 가이드 (0)	2025.05.16
🎯 IoT(사물인터넷)의 현재와 미래 산업 전망 본문입니다. (1)	2025.05.15
📱 모바일 앱 개발 입문 – 안드로이드 vs iOS, 무엇부터 시작할까? (0)	2025.05.14
🧠 ChatGPT와 생성 형 AI, 어떻게 활용할까? 실생활 & 업무 활용 법 총 정리 (2)	2025.05.14

content1052 님의 블로그