[입문] HTML/CSS 사용 (프론트엔드 2편) - 첫 웹페이지 만들기 - 비전공자 개발자 제로의 성장 블로그

Table of Contents

오늘의 목표

이번 포스팅에서는 HTML과 CSS를 활용해서 웹페이지처럼 실제로 손에 잡히는 결과물로 만들어보는 것을 목표로 합니다. 천천히 따라해 보시면서 웹페이지가 어떤 구조로 만들어지는지 이해하시면 나중에 AI를 활용하는 부분에서도 충분히 도움이 될 것이라 생각합니다.

VS Code에서 main.html과 main.css 파일 생성
HTML과 CSS의 기본 구조 이해
간단한 스타일 적용 후 결과 확인
실습 후 미니 과제로 스스로 실험

입문자도 단 5분이면 “웹페이지가 어떻게 만들어지는지” 눈으로 확인할 수 있도록 구성했습니다.
작은 성취감을 느끼면서 배우는 것이 중요합니다.

AI와 개발자가 웹페이지를 개발하기 위해 함께 협업하는 모습을 AI로 시각화 했습니다. — AI와 개발자가 함께 협업하여 웹 페이지를 개발하는 모습을 시각화한 AI 자체 제작 이미지입니다.

폴더와 파일 생성

VS Code에서 새로운 프로젝트 폴더를 생성해 줍니다.
- 예: Practice_HTML_CSS
폴더를 만들었으면 폴더 안에 두 개의 파일을 생성합니다.
- main.html → HTML 구조 담당
- main.css → CSS 스타일 담당

원래 하나의 파일(main.html) 에서도 css 구문을 넣어서 꾸밀 수 있습니다. 하지만 이렇게 구분 짓는 이유는 추후에 유지보수성을 높이고 가독성을 올리기 위함입니다.

폴더와 파일을 생성한 스크린샷으로 본인의 개발환경에서 독자의 이해를 돕기 위해 직접 제공한 이미지 입니다. 본 이미지의 저작권은 블로그 주인 [제로] 에게 있습니다. — 폴더 와 파일을 생성한 모습입니다.

왜 이렇게 2개의 다른 파일을 만드는지 이해가 잘 안되시죠?

예시를 들어보겠습니다. 여러분이 하나의 파일에 1000줄의 소스코드를 썼는데. 그 중 구조를 담당하는 html은 약 300줄, 이를 꾸미는 효과인 css가 약 700줄이라면 어디가 어떻게 문제가 있는지, 매번 파일을 열어서 수정하려고 하고 실시간으로 돌려보면 엄청난 시간과 시스템의 과부하가 있을 겁니다. 이런 걸 미연에 방지하기 위해 서로 따로 코드를 관리하고 둘을 연동시켜 주는 겁니다.

입문자를 위한 알기 쉬운 코멘트 : 폴더는 마치 책장의 서랍처럼 생각하면 됩니다.

HTML 파일은 글과 그림이 들어 있는 “책 페이지”
CSS 파일은 그 페이지를 꾸미는 “디자이너의 색연필과 스티커”
서로 연결(link)해야만 책에 색칠이 되는 것처럼, HTML과 CSS가 연결돼야 화면이 예쁘게 나옵니다.

HTML 기본 구조

&lt;!DOCTYPE html>
&lt;html lang="ko">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;title>나의 첫 웹페이지&lt;/title>
    &lt;link rel="stylesheet" href="main.css">
&lt;/head>
&lt;body>
    &lt;h1>안녕하세요!&lt;/h1>
    &lt;p>HTML과 CSS 실습 페이지입니다.&lt;/p>
&lt;/body>
&lt;/html>

<!DOCTYPE html> : 문서 형식 선언(Document Type Declaration). 여기서는 문서형식을 html로 하겠다 라는 의미입니다.
<html lang = "ko"> : 이것은 주언어의 속성으로 PC 혹은 모바일에서 웹에 접근하게 될 경우 접근성을 향상시키기 위함입니다. 마지막은 </html> 으로 닫아서 html의 영역을 표시해 줍니다.
<head> : 웹페이지 설정 영역으로 마지막은 </head>로 head 영역을 닫아줍니다. 영역을 열고 닫아서 영역을 표시해주는 겁니다.
<meta charset = "UTF-8"> : 유니코드 방식으로 웹페이지에서 다국어를 표현하기 위해 주로 사용됩니다.
<title> : 브라우저 탭 제목
<link rel="stylesheet" href = "main.css"> : CSS 연결하는 구문으로 link(연결)로 rel(관계)로 어떤 관계인지. 그리고 href로 하이퍼링크를 걸어줍니다. 그 경로는 “main.css” 라는 외부 리소스 위치를 지정해줍니다.(CSS와 연동)
<body> : 화면에 표시되는 실제 콘텐츠로 마지막은 </body>로 body 영역을 닫아줍니다.

작성 시 꿀팁입니다. html 후 목록 중 html:5를 클릭하시면 기본 구조가 잡힌 코드가 나옵니다. 필요한 부분만 수정하시면 됩니다.

여기까지 HTML 코드를 작성하셨으면 ctrl + s 를 눌려 저장합니다.
이후 우측 아래에 있는 live server를 클릭해줍니다. 그럼 자동으로 port:5500 으로 잡히게 될겁니다.

이제 웹사이트를 열어 localhost:5500/main.html 을 입력합니다.

HTML 로 로컬 웹페이지를 띄우는 실습화면입니다. 본인의 개발환경에서 독자의 이해를 돕기 위해 제공한 스크린샷입니다. 본 이미지의 저작권은 블로그 주인 [제로]에게 있습니다. — 짜잔! 조금 전 HTML 코드 내용이 이렇게 웹페이지에 나타나게 됩니다.

입문자를 위한 알기 쉬운 코멘트 : HTML은 웹페이지의 “뼈대”와 같습니다.

<h1>~<h6>는 제목의 크기와 중요도를 나타내는 뼈대의 높낮이
<p>는 문단, 즉 글의 단락을 나타내는 구조
브라우저는 이 뼈대를 읽고 화면에 표시합니다

처음엔 단순한 텍스트라도, 뼈대를 이해하면 어떤 요소가 어디에 들어가는지 알 수 있어 실습 후 바로 응용이 가능합니다.

CSS 기본 구조

main.css 파일

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    text-align: center;
}

h1 {
    color: #2c3e50;
    margin-top: 50px;
}

p {
    color: #34495e;
    font-size: 18px;
}

body{}, h1{}, p{} → 어떤 영역에 적용할 것인지 영역을 지정해주는 곳입니다. 위 html 코드와 비교해보세요.
font-family → 글꼴
background-color → 배경색으로 코드인 #f9f9f9 이런 식으로 표현해도 되지만 red / blue 이런 식으로 색상을 입력해도 괜찮습니다.
text-align → 텍스트 정렬입니다. 위 코드는 center 로 지정하였기에 가운데 정렬로 생각하시면 됩니다.
margin-top → 상단 여백입니다. 우리가 마진을 남기다라는 말이 있듯 여백을 얼마정도 지정할 것인지 설정해 주는 부분이며 50px는 50픽셀 만큼의 여백을 주겠다 라는 뜻입니다.
font-size → 글의 크기 입니다. 여기서는 18픽셀로 지정했습니다.

저장 한 후 조금 전과 같이 localhost:5500/main.html 을 웹에서 입력한 후 들어가 봅니다.

css 적용한 웹페이지 화면입니다. 독자의 이해를 돕기 위해 본인의 개발환경에서 캡쳐한 스크린 샷으로 본 이미지의 저작권은 블로그 주인 [제로]에게 있습니다. — 짜잔! 조금 전 HTML만 적용한 화면과 다르게 페이지에 꾸밈이 들어갔습니다.

입문자를 위한 알기 쉬운 코멘트 : CSS는 웹페이지의 “옷과 장식”입니다.

같은 HTML 뼈대라도 CSS를 입히면 전혀 다른 느낌이 됩니다.
글자 색, 배경, 여백, 정렬을 바꾸는 것만으로도 웹페이지 분위기가 바뀝니다.

AI를 활용하여 페이지를 만드는 분을 위한 AI 활용 팁

부업으로 상세페이지를 만들 때, 모든 소스코드를 붙여넣기를 하는 방법이 있습니다.
하지만 HTML/CSS 기본을 이해하면, 한 줄만 바꾸거나 색상 하나만 수정해도 충분히 원하는 결과를 낼 수 있습니다.
기본을 알고 있으면 AI 활용 효율이 극대화됩니다.

HTML + CSS 결과 비교

HTML만 적용	CSS 적용 후
단순 텍스트	글꼴, 색상, 정렬 적용으로 보기 좋음

실습 과제

저 또한 초급 개발자이지만 완전한 입문 단계에 계신 여러분들과 함께 호흡하며 블로그를 성장시키고 싶습니다. 따라서 실습을 다루는 포스팅에서는 실습 과제를 내어 드릴 생각입니다. 다음 편 포스팅에서 제가 작성한 코드와 여러분이 작성한 코드가 일치하는지 확인 해 보시면 될 것 같습니다.

혹은 더 나은 방법을 찾은 것 같다는 분이 계시면 언제든 댓글을 달아 주세요. 함께 소통할 수 있었으면 좋겠습니다.

<h2>와 <h3> 태그를 추가해 제목 계층 구조 만들기
<p> 문단에 다른 색상과 글꼴 적용해 보기
<body> 배경색을 바꾸고, 글자 색과 조화되는지 확인
main.css에서 margin, padding, text-align을 바꿔 레이아웃 실험

추가 팁:

작은 변화를 주고 브라우저 새로고침 → 변화 관찰 → 반복 학습
이미지나 색상 변경을 실험하면 바로 결과가 보여서 학습이 재미있어집니다. 정말입니다.

마무리

이번 실습으로 HTML/CSS의 뼈대와 옷을 이해했습니다.
입문자도 즉시 눈으로 확인 가능한 결과를 얻었기 때문에 학습 효율과 성취감이 높습니다.
AI 활용 시에도 “기본 구조를 이해하면 한두 줄만 바꿔도 원하는 페이지가 완성”되는 효율을 경험할 수 있습니다.

HTML에 대한 설명이 더 궁금하다면? 👉 HTML참고자료
CSS에 대한 설명이 더 궁금하다면? 👉 CSS참고자료

다음 편 예고

다음편 👉 [입문] HTML/CSS로 홈페이지를 만들어보자 (프론트엔드 3편)

헤더, 메뉴, 푸터 구성
이미지, 색상 적용
live server로 확인 및 점검

1편을 못보셨다면? 👉 [입문] HTML/CSS란? (프론트엔드 1편) – AI 시대, 기본을 아는 사람의 경쟁력
VS Code가 뭔지 아직 잘 모르시겠다면? 👉 [개발환경 입문] VS Code란? 입문자가 알아야 할 핵심 기능과 장점

[입문] HTML/CSS 사용 (프론트엔드 2편) – 첫 웹페이지 만들기

오늘의 목표

폴더와 파일 생성

HTML 기본 구조

CSS 기본 구조

HTML + CSS 결과 비교

실습 과제

마무리

다음 편 예고

댓글 달기 댓글 취소