www.eclipse.org 접속.
Eclipse Standard 4.3.2, 200 MB 다운.
eclipse 실행. HTML 코딩을 하기위한 준비과정.
Help - Install New Software 선택.
Work with : 를 Kepler ~~ 로 맞춰줌. 목록이 뜨면 Web, XML, Java EE ~~~ 를 확장시켜서
Eclipse Web Developer Tools 선택하고 next. finish 로 설치.
설치가 끝나면 Window-Open Perspective - Other 눌러서 Web 을 선택.
Window - Preferences 선택. 왼쪽에 Web에사 HTML Files와 CSS Files 를 선택해서 encoding 을 UTF-8로 선택.
새로운 웹프로젝트를 만들어서 sample.html을 아래와 같이 만들어 테스트해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {background-color:yellow}
p{font-size:30pt;color:red;font-weight:900}
</style>
</head>
<body>
<p>Hello, HTML5</p>
</body>
</html>
만들어서 실행을 시킬때는 위의 지구모양 클릭. 그래서 http://localhost/0514/WebContent/sample.html 해주면 확인가능.
툴을 사용할 것이기 때문에 WebContent 폴더 아래에 써주어야 한다.
Window-Web browser 에서 어떻게 출력할 것인지 변경 가능.
http://www.aptana.com/ 접속해서. Downloads 탭에가서 Standalone Version 다운로드.
실행 중인 Apache2.2 를 stop 해줌.
다운받은 aptana studio 설치. next -> I agree -> C:\Program Files (x86)\Aptana Studio 3\ 경로에 설치(폴더 만듬) next.
next. XML Documents 까지 체크하고 (모두 다체크) -> 계속 next 해서 설치함.
설치 후 Aptana Studio 실행. 경로 설정하기 전 WebHome 폴더에 가서 .metadata 폴더를 지움(깨끗하게 실행하기 위해)
경로 WebHome으로 지정해서 실행.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
CentOS 에 들어가서 자바설치해보자.
http://www.oracle.com 접속. Downloads - Java for Developers 가서 JDK(8u5) 눌러서
Linux x64 133.87 MB jdk-8u5-linux-x64.rpm 다운.
Linux x64 52.72 MB jdk-8u5-linux-x64-demos.rpm 다운.
터미널 켜서 다운받은 폴더이동.
java -version 으로 자바가 깔려있는지 확인.(jre만 깔려있음 javac -version 하면 없음)
su
rpm -Uvh jdk-8u5-linux-x64.rpm 로 설치 (-Uvh 에서 U는 있으면 업그레이드 없으면 설치. -ivh 하면 그냥 설치)
ls /usr/java 에 rpm이 깔린다.
cd /usr/java
cd jdk1.8.0_05
java -version 보면 아직도 옛날꺼다
alternatives --config java 하면 깐 버전이 없고 1번 2번이 있다. 그래서 최신버전을 등록해줘야함
alternatives --install \
> /usr/bin/java java /usr/java/jdk1.8.0_05/bin/java 3 //3번에 지정하겠다.
alternatives --config java 해서 지금 정해준 번호 3번을 선택한다.
java -version 으로 확인 하면 최신버전으로 나옴.
javac -version 로 보면 아까 설치된 것이 없었기 떄문에 최신버전으로 나옴. 만약 기존게 있었다면 java 처럼 등록해서 하면됨.
이제 환경설정 해주자.
gedit /etc/profile 들어가서 제일 마지막에 아래와 같이 작성.
#-----------------------------------------------------
# JAVA 1.8.0_05 Settings
#-----------------------------------------------------
JAVA_HOME=/usr/java/jdk1.8.0_05
CLASSPATH=.:$JAVA_HOME/jre/lib/rt.jar
PATH=$JAVA_HOME/bin:$PATH
export JAVA_HOME
export CLASSPATH
export PATH
저장 후에
source /etc/profile 로 마무리.
www.eclipse.org 접속해서
Eclipse Standard 4.3.2 리눅스 버전다운.
이클립스는 관리자권한으로 해서 설치할 필요가 없기 때문에 내 계정으로 가서 설치해주자
exit 해서 다운받은 폴더로이동.
tar xvfz eclipse*.tar.gz 로 압축 풀어주고.
mv eclipse ../Eclipse 이클립스 위치 이동.
su
chmod 777 /WebHome -R //이클립스 워크스페이스를 WebHome 폴더로 하기 위해 권한을 줬음.
http://www.aptana.com/ 접속.
Eclipse Plug-in Version 다운 누르면
http://download.aptana.com/studio3/plugin/install 를 복사하라고한다. 복사해서
이클립스의 Help - Install New Software 선택해서 Work with : 에 복사 한것을 붙여 넣고 Add를 누름.
이름 Aptana Studio 3 하고 경로에 다시 위의 복사한 것을 붙여 넣어주고 ok. 하고 next 눌르고 눌러 설치를 한다.
실행해서 Run Configuration 에서 Web Browser 우측 버튼 new 선택해서 크롬을 하나 만들어줌.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="javaexpert">
<meta name="date" content="2014-05-14 12:10">
<meta name="objective" content="연습용">
<meta name="environment" content="Windows 8.1, Aptana Studio 3">
<meta http-equiv="Refresh" content="10;url=http://www.google.com"> <!--10초뒤 웹페이지 구글로 이동, 이 외 나머지 meta data는 body에 영향을 미치지않음.-->
<title>Meta 연습 페이지</title>
<style>
body{color:black}
p{color:red}
</style>
</head>
<body>
<p>Hello</p>, World!!! <!-- Hello 만 빨간색, 나머지는 검은색-->
</body>
</html>
출력:
Hello
, World!!!
p태그는 자동으로 줄이 바뀐다. 줄이 안바뀌게하려면 p태그를 모두 span 으로 바꿔주면 줄이 안바뀌고 출력 된다.
----------------------------
https://opentutorials.org/ 생활코딩 홈페이지.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
띄어쓰기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
p {font-size:40pt}
</style>
</head>
<body>
<p>안 녕 하 세 요 </p>
</body>
</html>
좋지 않은 방법으로는
<p>안<span style="color:white">ㅁㄴㅇㄻㄴㅇㄹㄴㅁㅇㄹㄴㅁㅇㄹㅇㄻㄴㅇㄹ</span>녕하세요</p> 이런 방법도 있다.
pre 태그를 사용하면 내가 입력한 그대로(엔터 스페이스 모두) 그대로 인식.
<body>
<pre>
서 시
윤동주
하늘을 우러러 한 점 부끄럼이 없기를
잎새에 이는 바람에도
이하 생략...
</pre>
</body>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<body>
<hr size="5" color="red">
<hr size="10" color="green" width="50%">
<hr size="15" color="pink" width="70%" align="right">
<hr size="20" color="blue" noshade width="200" align="left">
</body>
수평선 그려줌. 아무 조건없으면 중앙정렬
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<blockquote>
오 나의 님은 피어날 장미<br>
오 나의 님 감미로워<p>
이처럼 예뻐 사랑스러 나는 사랑해<br>
언제까지나 사랑하리<br>
온바다가 마를까지
</blockquote>
사용해서 br로 다음 줄에 쓸 것인지 p로 다다음 줄에 쓸 것인지
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
리스트 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
h1{text-align: center;color: green}
body{font-size:20pt}
</style>
</head>
<body>
<h1>Android 기반 Java Development Expert Class Curriculum</h1>
<hr width="50%" size="5" color="red">
<ol start="1" type="i">
<li>
<ol type="A">OS
<li>Windows 8.1</li>
<li>Ubuntu14.04</li>
<li>CentOS</li>
</ol>
</li>
<li type="A">OS</li>
<li>C-language</li>
<li>Java</li>
<li>Oracle</li>
<li>
<ol type="1">Web Scripts>
<li>HTML</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>XML</li>
<li>Web Scripts</li>
<li>Servlet/JSP</li>
</ol>
</body>
</html>
타입은 i는 로마자, A는 대문자 순서, 1은 숫자로 증가해나간다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
리스트 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Unordered List tag</h1>
<ul>Drinks
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<ul>Color
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
<ul type="square">Languages
<li>Java</li>
<li>C#</li>
<li>Python</li>
</ul>
</body>
</html>
· 이것을 사용해서 리스트를 정렬.
아래와 같이 각각에 타입을 줄 수도 있음.
<li type="disk">Coffee</li>
<li type="circle">Milk</li>
<li type="square">Tea</li>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
이미지 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<title>Figure & figcaption Tag</title>
<meta charset="utf-8">
</head>
<body>
<h1>Figure & figcaption Tag</h1>
<figure>
<img src="images/GoogleChrome.png" width="100" height="100">
<img src="images/firefox.png" width="100" height="100">
<img src="images/Opera.png" width="100" height="100">
<img src="images/safari.png" width="100" height="100">
<img src="images/IE10.png" width="130" height="100">
<figcaption>Kinds of Web Browsers</figcaption>
</figure>
</body>
</html>
'Java & Oracle' 카테고리의 다른 글
| Applet (0) | 2014.05.19 |
|---|---|
| HTML5 tag, table (0) | 2014.05.15 |
| HTML5 (0) | 2014.05.13 |
| 아파치 HTTP, ISS 설치 (0) | 2014.05.12 |
| PL/SQL 커서, Exception (0) | 2014.05.08 |