이클립스를 활용한 정적 웹 서버 개발하기(feat. href 사용)

Recent Posts

Recent Comments

Archives

250x250

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Today

Yesterday

Total

04-29 18:53

관리 메뉴

Hey Tech

이클립스를 활용한 정적 웹 서버 개발하기(feat. href 사용) 본문

SW 개발/HTML & CSS

이클립스를 활용한 정적 웹 서버 개발하기(feat. href 사용)

Tony Park 2022. 9. 17. 17:25

728x90

👨‍💻 들어가며

본 포스팅에서는 이클립스를 활용하여 간단한 정적(static) 웹 페이지를 만드는 과정을 소개합니다. 구체적으로, 메인 페이지와 2개의 페이지로 총 3개의 페이지를 만들고, 메인 페이지에서 다른 2개의 페이지로 하이퍼링크를 통해 넘어가는 방법을 소개합니다.

1. 개발

Step 1. 이클립스 실행

먼저, 이클립스를 실행합니다.

Step 2. Web 개발 모드 변경

이클립스 내 우측 상단에 보면 돋보기 아이콘이 있습니다.

아래의 스크린샷처럼, 돋보기 아이콘 우측에 위치해 있는 Open Perspective 아이콘을 클릭합니다.

아래에서 두 번째에 있는 Web을 선택하고 하단에 Open 버튼을 클릭합니다.

Step 3. Static Web Project 생성

상단 메뉴바에서 File > New > Static Web Project을 차례로 클릭하여 정적인 웹 프로젝트를 생성합니다.

프로젝트 이름을 작성하고 하단에 Next를 클릭합니다.

폴더명을 수정합니다. 저는 WebContent로 설정하였습니다.

Step 4. index.html 파일 생성

메인 페이지 역할을 할 index 페이지를 생성합니다. 앞서 생성한 폴더를 우클릭한 후, New > HTML file을 클릭합니다.

파일명으로 index.html을 입력합니다.

Step 5. 예제 페이지 생성

위의 방법과 마찬가지로, HTML 기반의 예제 파일 2개를 생성합니다. 저는 cat과 dog라는 이름으로 페이지를 생성하였습니다.

dog.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h1>강아지 페이지</h1>
</body>
</html>

cat.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h1>고양이 페이지</h1>
</body>
</html>

Step 6. index 페이지 편집

index 페이지에서 하이퍼링크를 통해 dog와 cat 페이지로 각각 이동할 수 있도록 설정해 줍니다.

href 속성에 각 파일 이름을 입력합니다. a 태그 안에 텍스트는 페이지에서 표시될 내용입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h1>홈페이지</h1>
	<a href="dog.html">강아지</a><p/>
	<a href="cat.html">고양이</a><p/>
</body>
</html>

Step 7. 서버 구동

웹 서버를 구동합니다. 프로젝트 폴더를 마우스 우클릭 > Run As > Run on Server를 차례로 클릭합니다.

Step 8. HTTP Preview 클릭

아래의 스크린샷처럼, Basic에 있는 HTTP Preview를 클릭합니다. HTTP Preview는 이클립스의 기본적인 내장 서버입니다. Finish 버튼을 클릭합니다.

2. 결과

1) 이클립스 내 결과확인

서버를 구동시키면, 기본적으로 이클립스에서 아래의 스크린샷처럼 index.html 페이지가 출력된 것을 확인하실 수 있습니다.

2) chrome 내 결과확인

일반적인 웹 페이지처럼, 크롬 브라우저에서 결과를 출력해 볼 수 있습니다. 상단 메뉴바에서 Window > Web Browser > Chrome을 클릭해 줍니다.

아래와 같이 크롬 브라우저에서 결과가 출력되는 것을 확인할 수 있습니다. "강아지" 또는 "고양이" 텍스트를 클릭하면 각각 해당 html 파일로 이동합니다.

3) 서버 종료

서버를 종료하고 싶으시면 이클립스 내 하단에 Servers 탭 마우스 우측 클릭 > Stop 버튼을 클릭해 줍니다.

오늘은 이클립스를 활용하여 간단한 정적 웹 서버를 개발해 봤습니다.

포스팅 내용에 오류가 있다면 아래에 댓글 남겨주시길 바랍니다.

그럼 오늘도 즐거운 하루 보내시길 바랍니다 :)

고맙습니다😊

728x90

저작자표시 변경금지

'SW 개발 > HTML & CSS' 카테고리의 다른 글

[HTML] 글자/텍스트에 밑줄/취소선/윗줄 추가하는 방법 (0)	2023.04.13
[HTML] 글자/텍스트 정렬: 가운데 정렬, 왼쪽 정렬, 오른쪽 정렬 (0)	2023.04.12

'SW 개발/HTML & CSS' Related Articles

Comments

Hey Tech

이클립스를 활용한 정적 웹 서버 개발하기(feat. href 사용) 본문

이클립스를 활용한 정적 웹 서버 개발하기(feat. href 사용)

👨‍💻 들어가며

1. 개발

Step 1. 이클립스 실행

Step 2. Web 개발 모드 변경

Step 3. Static Web Project 생성

Step 4. index.html 파일 생성

Step 5. 예제 페이지 생성

Step 6. index 페이지 편집

Step 7. 서버 구동

Step 8. HTTP Preview 클릭

2. 결과

1) 이클립스 내 결과확인

2) chrome 내 결과확인

3) 서버 종료

'SW 개발 > HTML & CSS' 카테고리의 다른 글

티스토리툴바