심리 테스트 허브

블로그 홈
기초 2026.02.06 📖 20분 분량

HTML/CSS 기초로 첫 웹페이지 만들기

웹 개발의 첫 걸음, HTML과 CSS 완전 정복

HTML과 CSS, 도대체 뭔가요?

웹페이지를 만드는 것을 집을 짓는 것에 비유해보겠습니다:

  • HTML: 집의 뼈대와 구조 (기둥, 벽, 문, 창문)
  • CSS: 집의 인테리어와 디자인 (색상, 크기, 배치)
  • JavaScript: 집의 전기와 설비 (조명 켜기, 문 열기) ← 다음 글에서 배울 예정

즉, HTML로 "무엇"을 표시할지 정하고, CSS로 "어떻게" 보일지 꾸며줍니다.

HTML 기초

첫 번째 HTML 파일 만들기

VS Code를 열고 새 파일을 만듭니다. index.html이라고 저장하세요. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫 웹페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 제가 만든 첫 웹페이지입니다.</p>
</body>
</html>

각 부분의 의미:

  • <!DOCTYPE html>: "이 문서는 HTML5 문서입니다"라고 선언
  • <html>: HTML 문서의 시작과 끝
  • <head>: 페이지 정보 (사용자에게 보이지 않음)
  • <body>: 실제 보이는 내용

HTML 태그의 구조

<태그명>내용</태그명>

<h1>제목</h1>      ← 시작 태그와 끝 태그로 내용을 감쌈
<p>문단</p>

<img src="image.jpg">  ← 일부 태그는 끝 태그 없음

자주 사용하는 HTML 태그

제목 태그

<h1>가장 큰 제목</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

텍스트 태그

<p>일반 문단</p>
<strong>굵은 글씨</strong>
<em>기울임</em>
<br> ← 줄바꿈
<hr> ← 구분선

링크와 이미지

<!-- 링크 -->
<a href="https://google.com">구글로 이동</a>

<!-- 이미지 -->
<img src="photo.jpg" alt="사진 설명">

<!-- alt는 이미지가 안 보일 때 표시되는 설명 -->

리스트

<!-- 순서 없는 리스트 -->
<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>오렌지</li>
</ul>

<!-- 순서 있는 리스트 -->
<ol>
    <li>첫 번째</li>
    <li>두 번째</li>
    <li>세 번째</li>
</ol>

컨테이너 태그

<!-- div: 블록 요소 (한 줄 전체 차지) -->
<div>
    <h2>제목</h2>
    <p>내용</p>
</div>

<!-- span: 인라인 요소 (내용만큼만 차지) -->
<p>이것은 <span>중요한</span> 내용입니다.</p>

시맨틱 태그 (의미 있는 태그)

<header>페이지 상단</header>
<nav>네비게이션 메뉴</nav>
<main>주요 내용</main>
<article>독립적인 콘텐츠</article>
<section>섹션</section>
<footer>페이지 하단</footer>

<div> 대신 이런 태그를 사용하면 코드를 읽는 사람이 각 부분의 역할을 쉽게 이해할 수 있습니다.

CSS 기초

CSS를 HTML에 적용하는 3가지 방법

1) 인라인 스타일 (비추천)

<h1 style="color: red; font-size: 30px;">제목</h1>

태그에 직접 스타일을 넣는 방식. 간단하지만 유지보수가 어려워서 실무에서는 사용하지 않습니다.

2) 내부 스타일시트

<head>
    <style>
        h1 {
            color: red;
            font-size: 30px;
        }
    </style>
</head>

HTML 파일 안에 CSS를 작성. 간단한 프로젝트에서 사용합니다.

3) 외부 스타일시트 (추천)

<!-- HTML 파일 -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

/* style.css 파일 */
h1 {
    color: red;
    font-size: 30px;
}

별도의 CSS 파일을 만들어 연결. 가장 깔끔하고 관리하기 좋은 방법입니다.

CSS 선택자

태그 선택자

/* 모든 p 태그에 적용 */
p {
    color: blue;
}

클래스 선택자

<!-- HTML -->
<p class="important">중요한 내용</p>

/* CSS */
.important {
    color: red;
    font-weight: bold;
}

ID 선택자

<!-- HTML -->
<div id="header">헤더</div>

/* CSS */
#header {
    background-color: navy;
    color: white;
}

클래스 vs ID 차이:

  • 클래스: 여러 요소에 사용 가능 (재사용)
  • ID: 페이지에 하나만 존재 (고유)

자주 사용하는 CSS 속성

텍스트 스타일

.text-style {
    color: #333333;           /* 글자 색 */
    font-size: 16px;          /* 글자 크기 */
    font-weight: bold;        /* 굵기 */
    text-align: center;       /* 정렬 */
    line-height: 1.5;         /* 줄 간격 */
    text-decoration: none;    /* 밑줄 제거 */
}

배경

.background-style {
    background-color: #f0f0f0;
    background-image: url('bg.jpg');
    background-size: cover;
}

박스 모델

모든 HTML 요소는 박스입니다. 박스의 크기와 간격을 조절합니다. 

.box {
    width: 300px;             /* 너비 */
    height: 200px;            /* 높이 */
    padding: 20px;            /* 안쪽 여백 */
    margin: 10px;             /* 바깥쪽 여백 */
    border: 1px solid black;  /* 테두리 */
}

박스 모델 이해하기:

+----------------------------+
|         margin             |  바깥 여백
|  +----------------------+  |
|  |      border          |  |  테두리
|  |  +----------------+  |  |
|  |  |    padding     |  |  |  안쪽 여백
|  |  |  +----------+  |  |  |
|  |  |  | content  |  |  |  |  실제 내용
|  |  |  +----------+  |  |  |
|  |  +----------------+  |  |
|  +----------------------+  |
+----------------------------+

모서리 둥글게

.rounded {
    border-radius: 10px;  /* 모든 모서리 */
    border-radius: 10px 0 0 10px;  /* 각각 지정 */
}

그림자

.shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 가로 세로 블러 색상 */
}

실전 예제: 카드 만들기

지금까지 배운 내용으로 간단한 카드 UI를 만들어봅시다.

HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프로필 카드</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="card-header">
            <h2>홍길동</h2>
            <p class="subtitle">웹 개발자</p>
        </div>
        <div class="card-body">
            <p>안녕하세요! 웹 개발을 배우고 있는 홍길동입니다.</p>
            <p>HTML과 CSS로 멋진 웹사이트를 만들고 싶습니다.</p>
        </div>
        <div class="card-footer">
            <button class="btn">연락하기</button>
        </div>
    </div>
</body>
</html>

CSS 스타일

/* 전체 페이지 스타일 */
body {
    margin: 0;
    padding: 40px;
    background-color: #f5f5f5;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* 카드 컨테이너 */
.card {
    max-width: 400px;
    margin: 0 auto;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* 카드 헤더 */
.card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    text-align: center;
}

.card-header h2 {
    margin: 0;
    font-size: 28px;
}

.subtitle {
    margin: 10px 0 0 0;
    opacity: 0.9;
}

/* 카드 본문 */
.card-body {
    padding: 30px;
    line-height: 1.6;
    color: #333;
}

.card-body p {
    margin: 0 0 15px 0;
}

/* 카드 푸터 */
.card-footer {
    padding: 20px 30px;
    background-color: #f9f9f9;
    text-align: center;
}

/* 버튼 */
.btn {
    padding: 12px 30px;
    background-color: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #5568d3;
}

이 코드를 복사해서 실행해보세요! 그 다음 색상, 크기, 여백 등을 변경하며 실험해보세요.

레이아웃: Flexbox 기초

요소를 가로나 세로로 배치하는 가장 쉬운 방법입니다. 

<!-- HTML -->
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

/* CSS */
.container {
    display: flex;              /* Flexbox 활성화 */
    justify-content: center;    /* 가로 정렬 */
    align-items: center;        /* 세로 정렬 */
    gap: 20px;                  /* 간격 */
}

.item {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

주요 속성:

  • flex-direction: row (가로) / column (세로)
  • justify-content: flex-start / center / flex-end / space-between
  • align-items: flex-start / center / flex-end / stretch

반응형 디자인 기초

화면 크기에 따라 다른 스타일을 적용합니다. 

/* 기본 스타일 (모바일) */
.container {
    width: 100%;
    padding: 10px;
}

/* 태블릿 이상 (768px 이상) */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
        padding: 20px;
    }
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

실전 팁

1. Chrome 개발자 도구 활용

  • 요소를 선택하고 스타일을 실시간으로 수정
  • 마음에 드는 스타일을 찾으면 코드에 반영
  • 모바일 뷰 테스트 (Ctrl+Shift+M)

2. 색상 선택

  • Hex 코드: #FF5733
  • RGB: rgb(255, 87, 51)
  • RGBA: rgba(255, 87, 51, 0.5) ← 투명도 포함
  • 색상 도구: colorhunt.co, coolors.co

3. 단위

  • px: 고정 크기 (픽셀)
  • %: 부모 요소 기준 비율
  • rem: 루트 폰트 크기 기준 (권장)
  • vh/vw: 화면 높이/너비 기준

연습 과제

🎯 직접 만들어보기

다음 요소들을 포함한 자기소개 페이지를 만들어보세요:

  • □ 헤더 (이름과 직업)
  • □ 자기소개 섹션
  • □ 기술 스택 리스트
  • □ 연락처 푸터
  • □ 카드 스타일로 디자인
  • □ 호버 효과 추가
"완벽한 코드를 작성하려고 하지 마세요. 일단 만들어보고, 수정하고, 개선하는 과정에서 실력이 늡니다."

HTML과 CSS의 기초를 마스터했습니다! 다음 글에서는 JavaScript로 웹페이지에 인터랙션을 추가하는 방법을 배워보겠습니다.

이전 글: 개발 환경 설정 다음 글: JavaScript 기초