workspace 위치를 변경해야한다. 이번에 새로 다운 받은 EE 버전의 Eclipse로 다운을 받아야한다.
-workspace 위치 변경
- 서버 위치 지정
서버를 무료 서버인 tomcat 9.0으로 지정한다.
*UI(User Interface)
- 사용자가 특정 콘텐츠를 이용할 때 만나는 접점,즉,사용자 환경을 말함.
- 예를 들어 컴퓨터 바탕화면의 아이콘과 툴바 또는 모바일 화면의 앱 아이콘 등이 모두 UI임.
- 사람들이 특정 콘텐츠를 이용할 때 만나게 되는 도구와 사용환경을 UI라고 함.
- 웹 페이지의 UI는 웹 페이지 상단의 로고와 메뉴, 그리고 배너와 이미지 섬네일 등이 해당됨/
*UE(User Experience)
- 사람들이 특정 콘텐츠를 사용할 때 UI에서 느낄 수 있는 사용자 경험을 말함.
- 예를 든다면 게시판에 접근할 때 A라는 웹페이지는 메뉴를 3번 클릭해야 하는데,
B하는 웹페이지에서는 1회만 클릭하여도 된다면 B라는 웹페이지의 사용성이 더 좋다고 말함.
이처럼 특정 UI를 이용하여 콘텐츠를 사용할 때 느끼는 모든 사용자의 경험을 UX라고 말한다.
*인터렉티브 UI/UX
- 사용자와 상호 작용하는 여러 모션과 동적인 콘텐츠를 사용하는 환경을 말함.
- 예를 든다면 모바일 환경에서 화면을 좌우로 밀면 콘텐츠 화면이 슬라이드 되면서 바뀌거나,
웹 페이지에서 특정 버튼을 클릭하면 모션이 나타나 방문자의 시선을 끄는 환경을 말함.
*HTML: 웹페이지의 골조(뼈대) 부분을 담당.
*CSS: 뼈대만 있어 밋밋한 페이지를 보기 좋게 디자인.
*자바스크립트 : 웹페이지를 방문한 사용자가 편하게 이용할 수 있도록 웹에 다양한 기능을 부여.
*웹 에디터
- 웹 브라우저에 결과물을 보여주려면 HTML과 CSS 코드를 작성할 수 있는 편집기가 필요함.
- 집을 지으려면 건축 자재와 연장이 필요하듯이 웹에서도 어떤 공간을 만들려면 HTML, CSS가 있어야 함.
- HTML,CSS와 같이 코드를 편하게 작성할 수 있는 프로그램이 바로 웹 에디터임.
- 그리고 이러한 코드를 효율적으로 입력할 수 있게 해 주는 도구를 웹 에디터라고 함.
- 웹 에디터에는 노트패드, 에디트플러스, 서브라임 텍스트,브라켓, 비주얼 스튜디오 코드,
이클립스(EE) 등이 있음.
01_HTML4 Ex01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
안녕하세요? HTML에 오신 여러분을 환영합니다.!!!
</body>
</html>
01_HTML4 Ex02
<!-- HTML에서의 주석문 - 주석문 단축키 : ctrl +shift+/(슬래시 키) -->
<!-- HTML 문서의 형식 :HTML 버전 1, 2, 3, 4, 5 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 웹 문서(HTML)의 시작 -->
<html>
<!-- 머릿말(meta, title)
: 문서의 정보. 웹 문서에 필요한 외부 파일과 옵션을 설정하는 공간. -->
<head>
<!-- meta태그 : 기타 정보 - 문서의 타입, 문자 인코딩 지정(설정) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- title 태그 : 웹 브라우저의 제목 표시줄에 나타나는 내용. -->
<title>처음 웹 페이지</title>
</head>
<!-- 문서의 본문 시작 태그 : 웹 브라우저에 보여질 내용 -->
<body>
<!-- HTML(HyperText Markup Language)
- HTML은 웹 페이지를 만드는데 사용이 되는 언어이며,
매우 쉽게 배울 수 있는 장점이 있음.
- 모든 태그는 미리 정의가 되어 있어서 각각의 태그와 속성을 사용하면 됨.
-->
<!--
요소 : HTML 페이지를 구성하는 각 부품(제목, 본문, 이미지 등등)
태그 : 브라우저가 웹 문서를 잘 이해할 수 있도록 콘텐츠를 목적에 맞게
분류한 규칙. 요소를 만들 때 사용하는 작성 방법.
태그는 여는 태그와 닫는 태그의 쌍으로 구성이 되어 있음.
예) <여는(시작) 태그> 텍스트(내용)</닫는(종료) 태그>
-->
<!-- 제목 태그 : 제목을 나타내는 태그 ==> <hn> </hn> => n : 숫자(1~6)
제목 태그의 특징 : - 글자가 굵게(bold) 나타난다.
- 상단과 하단에 여백(줄)이 발생한다.
- 숫자가 커질수록 크기가 작아지고, 제목의 중요도가 떨어짐.
- 제목 태그는 숫자를 건너 뛰는 방법은 피해줄 것.
-->
<h1>제목 태그1</h1>
<h2>제목 태그2</h2>
<h3>제목 태그3</h3>
<h4>제목 태그4</h4>
<h5>제목 태그5</h5>
<h6>제목 태그6</h6>
HTML의 제목 태그입니다.
<!-- 문서 본문의 끝 태그 -->
</body>
<!-- 웹 문서(HTML)의 끝 -->
</html>
01_HTML4 Ex03
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- p(paragraph) 태그 : 하나의 문단(문장, 단락)을 사용하는 태그.
글을 쓸 때 문단을 만들어서 보기 좋게 써야 할 때 사용
-->
<!-- br 태그 : 줄바꿈을 해 주는 태그. 끝태그가 없음
==> 끝 태그가 없는 태그를 단독 태그라고 부름. -->
<!-- hn(제목태그)와 p태그는 자체적으로 줄바꿈 기능을 제공해 줌.
- 상단 한 줄, 하단 한 줄 공백을 지원해 줌.
- 한 줄 전체 영역이 설정.(블록레벨 요소)
-->
<p>
1절 : 동해물과 백두산이 마르고 닳도록<br/>
하느님이 보우하사 우리 나라 만세.<br/>
무궁화 삼천리 화려 강산<br/>
대한사람 대한으로 길이 보전하세.
</p>
<p>
2절 : 남산 위에 저 소나무 철갑을 두른 듯<br/>
바람서리 불변함은 우리 기상일세.<br/>
무궁화 삼천리 화려 강산<br/>
대한사람 대한으로 길이 보전하세.
</p>
<!-- span 태그는 단어나 문장의 글자만 선택을 하는 태그. (인라인레벨 요소) -->
<span>span 태그입니다.</span>
<span>span 태그입니다.</span>
<span>span 태그입니다.</span>
</body>
</html>
01_HTML4 Ex04
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- pre(preformatted text) 태그
==> 사용자가 입력한 그대로 출력시키는 태그 -->
<pre>
1절 : 동해 물과 백두산이 마르고 닳도록<br/>
하느님이 보우하사 우리 나라 만세.<br/>
무궁화 삼천리 화려 강산<br/>
대한 사람 대한으로 길이 보전하세.
</pre>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>선 그리기 태그</title>
</head>
<body>
<p>
1절 : 동해물과 백두산이 마르고 닳도록<br/>
하느님이 보우하사 우리 나라 만세.<br/>
무궁화 삼천리 화려 강산<br/>
대한사람 대한으로 길이 보전하세.
</p>
<!--
hr 태그 : 선 그리기(수평선) 태그 ==> 단독태그
==> 문단의 분리를 위해서 사용되는 태그.
기본적으로 위치가 가운데 정열(align="center")
-->
<hr />
<hr width="800" />
<hr width="80%" />
<hr width="80%" align="left"/>
<p>
2절 : 남산 위에 저 소나무 철갑을 두른 듯<br/>
바람서리 불변함은 우리 기상일세.<br/>
무궁화 삼천리 화려 강산<br/>
대한사람 대한으로 길이 보전하세.
</p>
</body>
</html>
01_HTML4 Ex09
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>a 링크 태그</title>
</head>
<body>
<!--
a 링크 태그
==> 다른 페이지, 파일, 이메일 주소, 전화번호 등
다른 URL로 연결(이동)할 수 있는 하이퍼링크 태그.
a 링크 태그의 속성 : target 속성
- self : 현재 창에서 특정 페이지로 이동하는 속성(default 값)
- blank : 새로운 창에서 특정 페이지로 이동하는 속성.
-->
<a href="http://www.naver.com">네이버</a> <br />
<a href="http://www.google.com">구글</a> <br/>
<a href="http://www.daum.net">다음</a> <br/>
<a href="http//www.google.com" target="blank">구글</a>
<hr/>
<!-- 파일로 넘어가는 예제 -->
<a href="Ex05.html">특수 문자 페이지 </a><br/>
<!-- email 계정으로 넘어가는 예제 :outlook 사용자만 사용이 가능. -->
<a href="mailto:jhehun@empas.com">내 메일</a> <br/>
<!-- 문서나 파일을 여는 예제 -->
<a href="images/apple.jpg">사과</a> <br/>
</body>
</html>
01_HTML4 Ex10
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>텍스트와 관련된 태그</title>
</head>
<body>
<!--
텍스트와 관련된 태그.
- b 태그 : 텍스트 글자를 굵은 글자로 만들어 주는 태그.
- i 태그 : 텍스트 글자를 이텔릭체(기울어진 글자)로 만들어 주는 태그.
- small 태그 : 텍스트 글자를 작은 글자로 만들어 주는 태그.
- sub 태그 : 텍스트 글자를 아랫첨자로 만들어 주는 태그.
- sup 태그 : 텍스트 글자를 윗첨자로 만들어 주는 태그.
- ins 태그 : 텍스트 글자의 밑줄을 만들어 주는 태그.
- del 태그 : 텍스트 글자를 취소선이 그어진 글자로 만들어 주는 태그.
-->
<p><b>이것은 볼드체입니다.</b></p>
<p><i><b>이것은 이탤릭체입니다.</b></i></p>
<h3>이것은 <small>small</small> 태그입니다.</h3>
<p>H<sub>2</sub>O/CO<sub>2</sub></p>
<p>X<sup>2</sup> + Y<sup>2</sup></p>
<p><ins>이것은 밑줄글자입니다.</ins></p>
<p><del>이것은 취소선 태그입니다.</del></p>
</body>
</html>
01_HTML4 Ex11
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>목록 태그</title>
</head>
<body>
<!--
목록 태그
-ul 태그(unordered list) 태그 : 순서가 없는 (정렬이 되지 않은) 목록 태그.
-ol 태그(ordered list) 태그 : 순서가 있는(정렬이 된) 목록 태그.
-li 태그 : 리스트 목록
-->
<h3>음료 메뉴</h3>
<ul><!-- 순서가 없는 목록 -->
<li>콜라</li>
<li>사이다</li>
<li>환타</li>
<li>생과일 쥬스</li>
</ul>
<hr/>
<h3>커피 종류</h3>
<ol><!-- 순서가 있는 목록 -->
<li>아메리카노</li>
<li>카페라떼</li>
<li>카라멜 마끼아또</li>
<li>아포카토</li>
</ol>
<hr/>
<h3>음료 메뉴</h3>
<ul type="square"><!-- type="disc"(기본값),"circle","square" -->
<li>콜라</li>
<li>사이다</li>
<li>환타</li>
<li>생과일 쥬스</li>
</ul>
<hr/>
<h3>커피 종류</h3>
<ol type="I"><!-- type="1"(기본값),"a","A","i","I" -->
<li>아메리카노</li>
<li>카페라떼</li>
<li>카라멜 마끼아또</li>
<li>아포카토</li>
</ol>
<hr/>
<h3>음료 메뉴</h3>
<ul type="circle">
<li>콜라</li>
<li>사이다</li>
<li>환타</li>
<li>커피
<ol>
<li>아메리카노</li>
<li>카페라떼</li>
<li>카라멜 마끼아또</li>
<li>아포카토</li>
</ol>
</li>
<li>생과일쥬스</li>
</ul>
</body>
</html>
01_HTML4 Ex12
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이미지 태그</title>
</head>
<body>
<!--
이미지 태그 : 웹 브라우저에 이미지를 보여주는 태그.
형식 ) <img src="이미지 경로명.파일명">
-->
<img src="images/banana.jpg" width="250" title="바나나"> <br />
<!-- 이미지 경로를 잘못 지정했을때 -->
<img src="images/mamgo.jpg" alt="그림 또는 파일명이 틀립니다.">
</body>
</html>
01_HTML4 Ex13
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>테이블 태그(아주 중요함)</title>
</head>
<body>
<!--
table(테이블) 태그 : 데이터 표를 만드는 태그.
- tr 태그 : 테이블의 행을 만드는 태그.
- th 태그 : 테이블의 열(타이틀-제목)을 만드는 태그.
- td 태그 : 테이블의 열을 만드는 태그.
-->
<table border="1" cellspacing="0" cellpadding="0">
<tr><!-- 1행 -->
<td>1행1열</td>
<td>1행2열</td>
<td>1행3열</td>
<td>1행4열</td>
</tr>
<tr><!-- 2행 -->
<td>2행1열</td>
<td>2행2열</td>
<td>2행3열</td>
<td>2행4열</td>
</tr>
<tr><!-- 3행 -->
<td>3행1열</td>
<td>3행2열</td>
<td>3행3열</td>
<td>3행4열</td>
</tr>
</table>
</body>
</html>
01_HTML4 Ex14
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
table 태그의 th 태그.
- 진하게(bold) 처리가 되어 화면에 나타난다.
- 제목(타이틀)이 가운데 정렬이 되어 화면에 나타난다.
-->
<table border="1" cellspacing="0">
<tr>
<th>아이디</th>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>hong</td>
<td>홍길동</td>
<td>27</td>
</tr>
<tr>
<td>leess</td>
<td>이순신</td>
<td>32</td>
</tr>
<tr>
<td>yooks</td>
<td>유관순</td>
<td>19</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>iframe 태그</title>
</head>
<body>
<!--
iframe 태그
==> 내부 프레임(inline frame)이라는 의미로
하나의 HTML 문서 내부에 다른 HTML 문서를 보여주고자 할 때
사용하는 태그.
iframe 태그의 속성
- src : iframe 태그에 삽입될 문서의 주소.
- width : iframe 태그의 너비 지정(px or %).
- height : iframe 태그의 높이 지정(px or %).
- scrolling : iframe 태그에 스크롤버 설정 유무를 지정.
==> yes(스크롤바 설치), no(스크롤바 업앰)
auto(자동)
- frameborder : iframe 태그의 테두리를 표시할지 여부 선택.
==> 1(테두리가 있음) / 0(테두리가 없음)
-->
<iframe src="Ex17.html" width="70%" height="250"
scrolling="auto" frameborder="1">
</iframe>
</body>
</html>
01_HTML4 Ex19
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>frameset 태그</title>
</head>
<frameset cols="30%,*">
<frame src= "Ex15.html"> <!-- 30%영역 -->
<frameset rows="30%,*">
<frame src="http://www.nate.com">
<frame src="Ex18.html">
</frameset>
</frameset>
<body>
<!--
frameset 태그
- 여러 개의 HTML 문서를 동시에 화한 화면에 나타날 수 있게 하는 태그.
- 주의) 반드시 body 태그 밖에서 설정을 해야함.
frameset 태그 속성.
- cols 속성 : 수직으로 나누고자하는 프레임의 크기를
픽셀이나 비율(%)을 이용하여 순서대로 지정함.
- rows 속성 : 수평으로 나누고자하는 프레임의 크기를
픽셀이나 비율(%)을 이용하여 순서대로 지정함.
- frameborder 속성 : 프레임을 나눈 경계썬의 두께를 지정하는데
"0"으로 설정을 하면 경게선이 안 보임.
-->
</body>
</html>
