먼저 자바웹프로그래밍이란. 우리가 흔히 보는 웹사이트를 만드는 일이다. 쇼핑몰,게임사이트 등등 모든 것 말이다. 배우고있는 내용을 여기에 정리할 예정이다.
일단 첫 번째로 해야할 일은 Visual Studio Code(클릭)를 다운해야한다. 다운을 완료했다면 실행 후 로그인을 한다면
좌측에 이런칸이 보일 것이다. 여기서
이 빨간박스인 마켓플레이스를 클릭하면 된다. 여기선 자바언어 외에도 파이썬 등등 각종 언어를 다운해 실행시킬 수 있다. 우리가 다운할걸 검색하면 된다.
우리는
- 소스 코드 정렬,태그 자동 닫기, 이미지
Prettier, image Preview
- 브라우저 실행
Live server
- 언어팩
Korean language pack
이것들을 다운해주면 된다.
그럼
이렇게 설치된 모습을 볼 수 있다.
그럼 다시 탐색기로 돌아와서
다음과 같은 행동을 해준다. 그리고 Web_main 폴더를 하나 만들어주고 선택해준다.그러면
이렇게 하나 생긴걸 볼 수 있다.
위에 새파일을 눌러주고
index.html 이름을 붙여 만들어준다. 여기서 html은 HiperText Markup Language 의 약자로 웹사이트에 프론트엔드를 구축하는데 사용하는 코딩 언어이다.
다음과 같이 코드를 작성해준다.
위쪽에 이런 흰색 동그라미가 보인다면 저장이 안되어있단 소리이다.
작성을 완료하고 저장까지 했다면 Alt 꾹 + L + O 를 누르면 위와같은 창이뜬다.
여기서 잠깐 태그에 관해 설명을 하고 넘어가겠다.
태그란 위의 코드에서 있는 <head>, <body> , <html> 등등 을 말한다. 맨 위의 <!DOCTYPE html> 은 html5 문서임을 알리는 지시어이다.
html은 정말 우리가 흔히 사용하는 웹사이트들이다. 지금 F12를 눌러보면
이런 명령어들이 보인다. 우리가 방금 사용해서 만든 명령어들도 있다.
이렇게 오늘은 사이트를 만들어보았다. 언어들을 배우면서 느끼는거지만 흥미롭기도하고 막막하기도 한 것 같다. 하지만, 누군가는 이렇게 코드를 짜고 만들었다는 것이기에 나또한 가능할거라고 믿고 앞으로 더욱 더 나서야겠다는 느낌도 받았다.
'자바웹프로그래밍' 카테고리의 다른 글
| [자바웹프로그래밍] 팝업창 기능추가와 이미지 호버 기능 만들기 (0) | 2025.04.12 |
|---|---|
| [자바웹프로그래밍] JS, 검색 기능 만들기,간단한 팝업창 구현하기 (0) | 2025.04.08 |
| [자바웹프로그래밍] 네비게이션 바 (부트스트랩) 가져오기 (0) | 2025.04.07 |
| [자바웹프로그래밍] 테이블(Table)표 만들기 (0) | 2025.04.06 |
| [자바웹프로그래밍] 프론트(화면) 만들어보기 (0) | 2025.03.25 |