코딩이 처음이라도, 나만의 웹페이지를 한 번쯤 만들어보고 싶었던 적 있으신가요?
복잡한 프로그래밍 없이, 기본적인 HTML과 CSS만으로도 누구나 자신의 프로필 페이지나 소개 페이지를 만들 수 있습니다.
이 글에서는 비전공자도 따라할 수 있도록 HTML과 CSS를 활용한 아주 간단한 웹페이지 제작 방법을 단계별로 알려드리겠습니다.
1. 웹페이지를 만든다는 건 어떤 의미일까?
웹페이지는 기본적으로 두 가지 기술로 구성됩니다:
- HTML: 콘텐츠의 구조를 정의 (제목, 문단, 이미지, 버튼 등)
- CSS: 콘텐츠에 스타일을 적용 (색상, 정렬, 여백, 배경 등)
이 두 가지만 알아도 개인 소개 페이지, 블로그 템플릿, 간단한 랜딩페이지까지 만들 수 있습니다.
2. 필요한 준비물은?
아래 두 가지만 있으면 됩니다:
- ✅ 메모장 또는 VS Code 같은 코드 편집기
- ✅ 크롬 또는 엣지 같은 웹 브라우저
별도 설치가 필요 없는 환경에서도 메모장 하나로 충분히 실습할 수 있습니다.
3. HTML + CSS로 나만의 첫 웹페이지 만들기
다음은 기본 HTML 구조와 CSS 스타일이 포함된 전체 코드 예시입니다.
4. 코드 설명
- <h1>: 큰 제목
- <p>: 본문 내용
- <img>: 프로필 사진 (예시 이미지 사용)
- <a>: 버튼 역할의 링크
- <style>: CSS를 HTML 내부에 직접 작성하여 배경색, 글자 크기 등 설정
🔎 위 코드를 메모장에 붙여넣고 my-page.html 로 저장한 뒤, 브라우저에서 열어보면 나만의 첫 웹페이지가 만들어집니다.
5. 웹페이지 실습 후 확장 아이디어
한 번 만들어봤다면 아래처럼 확장해볼 수 있습니다:
- 🔹 소개 문단 추가 (취미, 전공, 좋아하는 책 등)
- 🔹 내 SNS 링크 연결
- 🔹 다른 HTML 파일로 이동하는 버튼
- 🔹 CSS를 외부 파일로 분리하여 관리
6. 비전공자도 할 수 있는 이유
HTML과 CSS는 문법이 간단하고 결과가 바로 보이기 때문에, 결과 중심 학습이 가능합니다.
특히 비전공자 입장에서는 프로그래밍 로직 없이도 보이는 웹사이트를 직접 구현할 수 있다는 점에서 큰 성취감을 느낄 수 있습니다.
7. 마무리: 지금 당장 시작해보세요
웹페이지 만들기는 더 이상 개발자들만의 영역이 아닙니다.
비전공자도 충분히 시도해볼 수 있고, 실제로 많은 마케터, 디자이너, 콘텐츠 제작자들이 웹 기초 지식을 갖추며 경쟁력을 높이고 있습니다.
오늘 만든 첫 웹페이지가, 내일의 포트폴리오가 될 수도 있습니다.
지금 바로 HTML과 CSS로 나만의 첫걸음을 시작해보세요!