이 글에서는 VSCode를 이용해 HTML 기초를 배우고,처음으로 웹페이지를 만드는 방법을 정리합니다.- HTML이란 무엇인가- VSCode에서 HTML 파일 만들기- 기본 HTML 구조 이해하기- h1, p 같은 기본 태그 배우기- 브라우저에서 실행하기웹개발을 처음 시작하는 입문자라면 꼭 익혀야 하는 내용입니다.
1. VSCode 실행 방법
웹 개발은 VSCode 실행부터 시작한다.
✔ 방법 1
VSCode 프로그램 직접 실행
✔ 방법 2
탐색기에서 작업 폴더로 이동 → 빈 화면 우클릭 → “Code로 열기”
✔ 방법 3 (가장 많이 사용)
터미널 실행 → 작업 폴더 이동 → 아래 명령어 입력
code .
현재 폴더를 바로 VSCode로 여는 방법이라 가장 많이 사용된다.
2. 웹명함 프로젝트 파일 만들기
웹명함은 기본적으로 HTML 파일 1개로 시작한다.
✔ 진행 순서
- VSCode 왼쪽 탐색기 확인
- 작업 폴더 선택
- New File 클릭
- 파일 생성 -> index.html
웹 페이지 기본 파일 이름은 index.html이 일반적이다.
HTML은 웹페이지의 구조를 만드는 언어입니다.
웹사이트의 제목, 글자, 이미지, 버튼 같은 요소를 배치하는 역할을 합니다.
3. 웹명함 구조 핵심 개념
웹명함은 크게 3가지로 구성된다.
✔ HTML (구조)
이름, 소개, 연락처 등 내용 구성
✔ CSS (디자인)
색상, 폰트, 배치 등 디자인 담당
✔ JavaScript (동작)
버튼 클릭, 애니메이션, 인터랙션 담당
하나의 파일로 만들 경우
HTML + CSS + JS를 모두 index.html 안에 작성한다.
4. 개발 작업 흐름
웹명함 제작 순서는 다음과 같다.
1단계
HTML 기본 구조 작성
2단계
개인 정보 입력 (이름, 소개, 직업 등)
3단계
CSS로 디자인 적용 (정렬, 색상, 카드 UI)
4단계
JavaScript로 기능 추가 (버튼, 애니메이션 등)
5. HTML 기본 구조 이해
HTML은 웹의 뼈대 역할을 한다.
✔ 주요 구조
html : 전체 문서
head : 설정 정보
body : 화면에 보이는 내용
✔ 자주 사용하는 태그
section : 영역 구분
article : 콘텐츠 블록
div : 일반 박스
a : 링크 연결
6. 링크 기능 활용
웹명함에서는 링크 기능도 중요하다.
✔ 활용 예시
외부 사이트 이동
이메일 연결
SNS 연결
a 태그를 이용해 다양한 링크 연결 가능
7. VSCode 편집 꿀팁
✔ 코드 접기 기능
왼쪽 줄 번호 옆 화살표 클릭 → 코드 접기 가능
✔ 주석 단축키
Ctrl + /
긴 CSS나 JS를 숨기거나 관리할 때 매우 유용하다.
8. 웹명함 핵심 포인트
웹명함의 완성도는 3가지로 결정된다.
✔ HTML → 정보 구조
✔ CSS → 디자인 퀄리티
✔ JS → 동작과 인터랙션
9. 퀄리티 올리는 방법
단순한 웹명함이 아니라 “포트폴리오 느낌”을 내려면 아래 기능을 추가한다.
- 버튼 UI 구성
- 리스트 + 바로가기 버튼
- hover 애니메이션
- 카드형 프로필 디자인
- 반응형 레이아웃
마무리
오늘 핵심 정리
✔ HTML 하나로도 웹명함 제작 가능
✔ CSS로 디자인 완성도 상승
✔ JS로 기능 추가하면 퀄리티 업
✔ VSCode 사용법이 작업 속도를 결정한다
feat.주저리) 💬
아주 어렸을때 (민짜..) 학교에서 과제로 했던게 아닌 스스로 공부해서 코드로 무언가 결과물을 낸 것은 이게 처음이네요.
비록 혼자 명령어를 다 외우고 이해하고 짜임세 있게 넣어서 만든 건 아니지만...
동영상 강의를 보며 챗ai와 상의해가며 오류나오면 몇시간이고 동영상은 멈춰둔채 상의하고 프로그램 자체도 삭제했다 설치했다 또 삭제했따 설치했따 ㅋ 그러더만 스크립트도 수정하고 수정하다 다시 작성해보기도 하고, 너무 꼬인거같아 ai한테 스크립트가 너무 더러워.. 정리해줘 ㅠㅠ.. 라고 ㅋㅋ 정리도 한번씩 하고..
다음 게시물은 웹 명함 코드와 제가 만든 결과물을 같이 올려보도록 하겠습니다.
→ HTML/CSS/JavaScript 차이 쉽게 이해하기
→ 다음 단계: CSS 기초 배우기
댓글 없음:
댓글 쓰기