IT 및 기술

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

content1052 2025. 5. 15. 18:46

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

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

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

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

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

✔ 필요한 도구

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

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

🔤 HTML 기본 구조와 필수 태그

html
 
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹사이트</title>
</head> <body> <h1>안녕하세요!</h1>
<p>이것은 HTML로 만든 문단입니다.</p>
<a href="https://www.example.com">링크</a>
<img src="image.jpg" alt="이미지 설명">
</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로 나만의 홈페이지 만들기

✔ 기본 구조 만들기

  1. index.html 파일 생성
  2. style.css 파일 생성
  3. 아래처럼 연결하기:
html
 
<head>
<link rel="stylesheet" href="style.css">
</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)로 다양한 해상도 확인

✔ 무료 배포 플랫폼

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

 

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

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