🌱[구디아카데미 IT국비지원]

김희진·2023년 4월 9일

IT국비지원 html 구디아카데미 설치/셋팅

GDJ 66기 - 클라우드 활용 자바 개발자 양성과정

목록 보기

2/25

[구디아카데미 IT국비지원] 3시간 가량의 오티 후 수업이 시작됐다. 먼저 프로그램 설치와 셋팅을 하는 방법을 배운뒤 간단한 html 문서를 작성해보았다.

💻크롬 브라우저

먼저 크롬 브라우저를 설치한다. 어떤 브라우저를 사용해도 상관은 없지만, 크롬 브라우저가 가장 오류가 적기 때문에 주로 크롬을 사용한다고 한다.

💻자바(JDK)

JDK는 17버전으로 설치했다. 설치시 너무 최신 버전은 아직 불안정하기 때문에 어느정도 안전성이 보장된 버전으로 설치하는 것이 좋다고 하셨다.
설치는 오라클에서 가능하며, JDK17 윈도우 버전의 다운링크는 여기다.

📍설치 확인 하기

작업표시줄의 검색 창에 cmd를 입력하거나 명령 프롬프트를 입력하면 다음과 같은 검은창이 뜬다.

여기에 java -version을 입력하면 (중간에 띄어쓰기 꼭 해주어야함!) 설치된 자바의 버전을 확인할 수 있다.

💻이클립스

프로그래밍을 하려면 코드를 작성하고, 저장하고 컴파일 및 디버깅을 도와주는 통합 개발 환경(Integrated Development Enviornment, IDE)이 필요하다. 현재 다양한 IDE가 존재하지만 자바 개발자에게 가장 사랑받는 IDE로 ‘이클립스’를 빼놓을 수 없다.
-[네이버 지식백과]

이클립스 홈페이지에 방문하여 다운로드가 가능하다. 이클립스 또한 너무 최신 버전은 불안정하므로 적당한 버전을 골라 설치하는 것이 좋다.

이 버전이 아닌 웹 기능이 포함된 버전을 다운받아야하므로 Download Packages 를 클릭한다.

홈페이지 오른쪽 MORE DOWNLOADS 탭에서 버전을 고를 수 있다.

설치 위치는 D드라이브에 하는 것이 좋다. 혹시나 포맷 등으로 프로그램이 날라갈 수 있기 때문이다.

💻웹 애플리케이션 서버(톰캣)

톰캣은 apache에서 다운할 수 있다.

톰캣 또한 너무 최신 버전인 11(alpha)가 아닌 10으로 다운받아준다.

설치 경로는 이클립스와 같은 D드라이브에 해준다.

💻이클립스 셋팅

eclipse.exe로 이클립스를 실행하면 작업 폴더를 설정하는 창이 뜬다.

프로젝트 창에서 마우스 우클릭 후 New-Other를 클릭

Server를 클릭한 후 Next

Apache에서 버전에 맞는 톰캣 서버를 선택한 후 Next

Browse에서 톰캣 설치 경로를 찾아 선택해준다.

그러면 이렇게 Servers 폴더가 생성된 것을 확인할 수 있다.

하단에 Severs 탭을 눌러 톰캣 서버를 더블클릭 한 뒤, HTTP 포트를 80으로 변경한다.

Window-Preferences를 클릭

encoding를 검색하여 모두 UTF-8로 바꿔준다.

💡HTML 시작하기

Html 작성 시에는 HTML Tutorial 페이지를 참고하면 좋다.

먼저 프로젝트를 생성한다. Dynamic Wed Project로 선택한다.

프로젝트 폴더 안에 webapp폴더 안에 있는 파일만이 페이지에 출력이 가능하다. html 파일 또한 이 폴더에 생성해야 한다.

✔️ html 기본 구성

기본적으로 html은 아래와 같이 구성된다.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

head 태그 안에 들어가는 내용은 메타정보라고 해서 페이지에 출력되지 않는 정보다.
반면 body 태그 안에 들어가는 내용은 페이지에 출력되어 사용자가 볼 수 있는 정보다.

<!doctype html>
<html>
		<head>
			<title>test</title>
			<meta charset="utf-8">
		</head>
		<body>
			<div style="color:#000000;background-color:#00FF00;">
				안녕하세요
			</div>
			<!-- html 연습입니다  -->
			<span style="color:#000000;background-color:#00FF00;">
				안녕하세요
			</span>
			
			<div><img src="./one.jfif"></div>
			<div><img src="http://localhost/web01/one.jfif"></div>
			<div><img src="./images/zoro.jfif"></div>
			<div><img src="http://localhost/web01/images/zoro.jfif"></div>
		</body>
</html>

라는 내용을 입력하면 다음과 같이 페이지에 출력된다.

div 태그는 블록을 형성한다.
p 태그는 문단을 형성한다.
span 태그는 한 줄을 형성한다.

이런 태그들에 style을 입력하여 글자의 색이나 배경색을 넣을 수 있다.

<!-- 주석 -->

이렇게 주석을 쓸 수도 있다. 이 내용은 출력되지 않는다.

이미지를 출력하려면 img src 태그를 이용한다.
이때 이미지의 주소는 상대주소와 절대주소가 있다.
상대주소 사용시 ./ 은 현재 내 위치를 나타내고, 이미지 파일이 `webapp`폴더에 업로드 되어있어야 한다.

✔️ 페이지 이동 (a 태그)

	<a href="./jungkook.html">정국</a>
	<a href="./jimin.html">지민</a>
	<a href="./jin.html">진</a>
	<a href="./v.html">뷔</a>
	<a href="./rm.html">RM</a>
	<a href="./suga.html">슈가</a>
	<a href="./jhope.html">제이홉</a>