웹개발을 처음 공부하면 가장 먼저 해보고 싶은 것 중 하나가 바로 ‘내 소개 페이지’ 만들기입니다.
저 역시 처음에는 복잡한 웹사이트보다 간단하게 내 정보를 보여줄 수 있는 웹명함 형태의 사이트를 만들어보고 싶었습니다.
특히 HTML, CSS, JavaScript를 처음 공부할 때는 이 세 개가 각각 어떤 역할을 하는지 감이 잘 안 잡히는데, 웹명함 프로젝트는 그 구조를 이해하기 정말 좋은 실습이었습니다.
이번 글에서는 실제로 제가 작업했던 흐름 그대로, VSCode로 HTML 파일을 만들고 웹명함을 제작하며 수정했던 과정들을 정리해보려고 합니다.
처음 웹페이지를 만들어보는 분들도 따라할 수 있도록 최대한 쉽게 설명해보겠습니다.
VSCode 여는 방법과 작업 준비
웹명함을 만들기 전에 먼저 VSCode를 열어야 합니다.
처음에는 VSCode 실행 방법도 헷갈렸는데 작업하다 보니 크게 3가지 방식이 가장 많이 사용됐습니다.
1. VSCode 프로그램 직접 실행
가장 기본적인 방법입니다.
시작 메뉴에서 VSCode 검색
Visual Studio Code 실행
이후 상단 메뉴에서 폴더를 열어 작업할 폴더를 선택하면 됩니다.
2. 작업 폴더에서 우클릭 → Code로 열기
이 방법이 가장 편했습니다.
탐색기로 작업할 폴더 이동
빈 공간 우클릭
“Code로 열기” 선택
그러면 해당 폴더가 바로 VSCode에서 열립니다.
실제로 프로젝트 작업할 때 가장 자주 사용하는 방식이었습니다.
3. 터미널에서 열기
터미널 사용 연습도 같이 할 수 있어서 좋았습니다.
cd 작업폴더경로
code .
code . 명령어를 입력하면 현재 폴더를 기준으로 VSCode가 열립니다.
처음에는 신기했는데 익숙해지면 정말 편합니다.
HTML 파일 생성하기
VSCode를 열었다면 이제 HTML 파일을 만들어야 합니다.
왼쪽 탐색기 영역에서 현재 작업 폴더를 확인한 뒤:
폴더명 옆 New File 클릭
index.html파일 생성
이제 이 파일 안에 HTML 코드를 작성하면 됩니다.
처음에는 HTML이라는 게 엄청 어려워 보였는데 실제로는 문서 구조를 만드는 역할이라고 이해하니 훨씬 쉬웠습니다.
HTML + CSS + JavaScript 역할 이해하기
웹명함 하나를 만들면서 가장 크게 느꼈던 건 웹은 역할이 분리되어 있다는 점이었습니다.
HTML
웹의 구조를 담당합니다.
예:
이름
소개글
버튼
링크
이미지
같은 내용을 배치합니다.
CSS
디자인을 담당합니다.
예:
색상
크기
여백
정렬
그림자
카드 디자인
등을 담당합니다.
쉽게 말하면 스타일을 입히는 역할입니다.
JavaScript
동작을 담당합니다.
예:
버튼 클릭
슬라이드 이동
애니메이션
자동 변경
같은 인터랙션 기능을 구현합니다.
처음에는 HTML만으로 웹명함을 만들었는데 기능성이 부족해서 JavaScript를 추가하니 훨씬 완성도가 올라갔습니다.
HTML 기본 구조 이해하기
웹페이지는 기본적으로 아래 구조를 가집니다.
<html>
<head>
</head>
<body>
</body>
</html>
head: 설정 영역body: 실제 화면 영역
웹명함 만들 때 사용했던 태그들
웹명함에는 생각보다 다양한 태그들이 사용됐습니다.
개인정보 태그 활용
이름
연락처
이메일
자기소개
등을 HTML 태그로 작성했습니다.
시맨틱 태그 사용
처음에는 div만 사용했는데 나중에는 의미 있는 태그들도 사용하게 됐습니다.
예:
<section>
<article>
<header>
이런 태그들은 구조를 더 명확하게 만들어주고 검색 최적화에도 도움이 된다고 합니다.
링크 삽입 태그
<a href="링크주소">이동하기</a>
이 방식으로:
GitHub
블로그
이메일
포트폴리오
등을 연결했습니다.
실제로 많이 했던 수정 작업들
처음에는 단순한 카드 형태였는데 점점 기능을 추가하게 됐습니다.
예:
통버튼 추가
리스트형 메뉴 구성
바로가기 버튼 추가
애니메이션 효과
hover 효과
그림자 효과
반응형 수정
이런 식으로 조금씩 수정하다 보니 점점 더 완성도가 올라갔습니다.
VSCode 코드 접기 기능 정말 유용했다
스크립트가 길어지기 시작하면 코드 찾는 게 꽤 힘들어집니다.
그럴 때 줄 번호 옆의 꺽쇠 버튼을 누르면 코드가 접힙니다.
예를 들어:
<style>
...
</style>
구간이 길 경우 접어서 필요한 부분만 보며 작업할 수 있었습니다.
특히 CSS가 길어질 때 정말 편했습니다.
주석 처리 기능 사용하기
코드 실험하다 보면 잠깐 기능을 끄고 싶을 때가 있습니다.
그럴 때:
Ctrl + /
단축키를 사용하면 선택한 코드가 주석 처리됩니다.
예:
<!-- 주석 처리 -->
이렇게 처리된 코드는 화면 결과물에 반영되지 않습니다.
다시 Ctrl + / 를 누르면 해제됩니다.
처음엔 무서워서 코드 삭제했는데 주석 기능을 알고 나서는 훨씬 편하게 수정할 수 있었습니다.
HTML 파일 하나로 웹페이지 만드는 핵심
제가 작업하면서 느낀 핵심은 아래였습니다.
HTML + 내부 CSS + 약간의 JavaScript만 있어도 충분히 웹페이지를 만들 수 있다.
특히 초보 단계에서는 파일 하나로 작업하는 게 구조 이해에 정말 도움이 많이 됐습니다.
중요한 건:
섹션 구조
링크 연결
반응형
카드 배치
이 네 가지였습니다.
HTML / CSS / JS 분리 작업도 해보기
처음에는 모든 코드를 하나의 HTML 파일 안에 넣었지만 나중에는 분리 작업도 해봤습니다.
예:
index.html
style.css
script.js
이렇게 3개 파일로 분리했습니다.
그리고 HTML에서 연결합니다.
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
처음에는 어렵게 느껴졌는데 막상 해보니 훨씬 관리가 편했습니다.
내 컴퓨터 이미지 사용하기
처음에는 인터넷 이미지 링크를 사용했는데 나중에는 내 컴퓨터 이미지를 사용하게 됐습니다.
방법은 간단했습니다.
이미지 파일을 프로젝트 폴더 안에 넣기
HTML에서 파일명 연결
예:
<img src="profile.jpg">
생각보다 간단했는데 처음엔 경로 개념 때문에 꽤 헷갈렸습니다.
웹명함 아래 이미지 슬라이드쇼 추가하기
여기서부터 재미가 붙기 시작했습니다.
단순 명함만 있는 게 아쉬워서 아래에 이미지 슬라이드를 추가해봤습니다.
원했던 기능:
3초마다 자동 전환
왼쪽 → 오른쪽 이동
카드 안에서 동작
이미지 여러 장 표시
구조는:
HTML : 슬라이드 영역 생성
CSS : 크기와 애니메이션
JS : 자동 변경 기능
으로 구성했습니다.
슬라이드 추가 시 이미지 크기 문제
처음엔 이미지가 엄청 크게 나왔습니다.
그래서 CSS로 크기를 줄였더니 이번에는 이미지 여러 장이 한 화면에 같이 보이는 문제가 생겼습니다.
또 수정하니:
한 장씩은 보이는데
위아래가 잘림
가운데만 길게 보임
이런 문제가 생겼습니다.
결국 해결한 방식은:
명함 카드와 동일한 가로폭 사용
overflow hidden 사용
object-fit 조절
이었습니다.
이 과정에서 CSS의 중요성을 정말 많이 느꼈습니다.
카드 구조를 하나 더 추가하는 방식도 가능
다른 방식으로는:
위에는 프로필 카드
아래에는 슬라이드 카드
형태로 박스를 2개 만드는 방법도 사용했습니다.
이 방식이 레이아웃 정리가 더 쉬웠습니다.
특히 모바일 반응형에서 훨씬 안정적으로 보였습니다.
슬라이드 기능 업그레이드하기
나중에는 기능도 추가했습니다.
예:
슬라이드 시간 5초 변경
좌우 이동 버튼 추가
수동 이동 기능 추가
이런 기능들을 JavaScript로 구현했습니다.
버튼 클릭 시:
다음 이미지
이전 이미지
로 이동되게 만들었습니다.
이 과정에서 JavaScript가 왜 필요한지 확실히 이해됐습니다.
코드가 꼬였을 때 해결 방법
수정하다 보면 코드가 점점 지저분해집니다.
저도:
어디 수정했는지 모르겠고
CSS 충돌나고
기능은 되는데 미묘하게 이상하고
애니메이션이 꼬이고
그런 상황이 꽤 많았습니다.
그럴 때 전체 코드를 다시 정리하면 의외로 문제가 한 번에 해결되는 경우가 많았습니다.
특히:
중복 코드 제거
잘못 닫힌 태그 수정
CSS 우선순위 정리
JS 이벤트 충돌 수정
같은 부분이 원인인 경우가 많았습니다.
이 과정을 반복하면서 오히려 공부가 많이 됐습니다.
웹명함 만들며 느낀 점
처음에는 HTML 자체도 어려웠는데 직접 웹명함을 만들어보니:
HTML 구조
CSS 스타일링
JavaScript 동작
이미지 경로
반응형
레이아웃 구성
이런 개념들이 자연스럽게 익숙해졌습니다.
특히 단순 강의만 보는 것보다 직접 만들면서 수정하는 방식이 훨씬 기억에 오래 남았습니다.
앞으로는:
다크모드
반응형 개선
프로젝트 섹션 추가
GitHub 연동
배포
등도 추가해볼 예정입니다.
같이 보면 좋은 글
HTML/CSS/JS 역할 이해하기
React와 일반 HTML 차이
참고 블로그:
https://appdev-beginner.blogspot.com/
웹명함 만들기는 단순한 프로필 페이지 제작이 아니라 HTML, CSS, JavaScript 구조를 이해하기 정말 좋은 연습이었습니다.
특히 처음 개발 공부를 시작하는 분들에게는:
직접 화면이 보이고
수정 결과가 바로 반영되고
성취감이 크기 때문에
공부 재미를 느끼기 좋은 프로젝트라고 생각합니다.
처음에는 완벽하게 만들려고 하기보다:
일단 만들기
수정하기
망가뜨려보기
다시 고치기
이 과정을 반복하는 게 정말 중요하다고 느꼈습니다.
저처럼 처음 웹개발을 공부하는 분들에게 조금이라도 도움이 되었으면 좋겠습니다.
자주 발생했던 문제 정리 (FAQ)
Q. 왜 HTML CSS JS를 분리하나요?
HTML 안에 CSS와 JavaScript를 모두 작성할 수도 있지만, 프로젝트가 커질수록 코드 관리가 어려워진다.
그래서 실제 웹 개발에서는:
- HTML = 구조
- CSS = 디자인
- JavaScript = 기능
이렇게 역할별로 파일을 분리해서 관리한다.
분리하면:
- 코드 수정이 편해지고
- 오류 찾기가 쉬워지며
- 재사용도 가능해진다.
Q. object-fit은 왜 사용하나요?
이미지 크기가 서로 다르면 화면이 찌그러지거나 잘리는 문제가 발생할 수 있다.
object-fit: cover;를 사용하면 이미지 비율을 유지하면서 영역을 자연스럽게 채울 수 있다.
특히 슬라이드 이미지나 프로필 사진 작업에서 자주 사용된다.
Q. 이미지가 자동으로 안 바뀌는 이유는?
가장 많이 발생하는 원인은 아래 3가지였다.
- 이미지 파일 이름 오타
- JavaScript 파일 연결 오류
- 이미지 경로 문제
예를 들어:
const images = ["image1.jpg", "image2.jpg"];라고 작성했는데 실제 파일 이름이:
Image1.jpg이면 작동하지 않는다.
파일 이름의 대소문자도 정확히 맞아야 한다.
Q. JS 파일 연결이 안될 때는?
HTML 파일 아래 부분에:
<script src="script.js"></script>코드가 제대로 작성되어 있는지 확인해야 한다.
또한:
- script.js 파일이 실제로 존재하는지
- 파일 이름이 정확한지
- 같은 폴더 안에 있는지
도 함께 확인해야 한다.
브라우저 개발자 도구(F12)를 열면 오류 내용을 확인할 수 있어서 문제 해결에 도움이 많이 됐다.
feat.주저리) 💬
기본 레이아웃에 해당하는 코드를 ai한테 물어서 기본세팅 해놓고
수정본에 가이드를 대략 정해놓고 수정하다 막힐때 마다 ai에게 수정잘못된거 체크받고
어떻게 해야하는지 조언얻고, 그러면서 완성한 결과물 입니다.
코드로 무언가 세팅하다 잘못된거같다 싶을때
그부분을 그대로 복사해서 ai에게 조언을 얻어보세요.
그냥 수정본만 띡. 주는게 아니라 머가 어떻게 잘못됬는데 머를 알아야하는지 이런것들을
알려주기때문에 생각보다 훨씬 더 공부하며 작업을 진행 시킬 수 있습니다.
댓글 없음:
댓글 쓰기