Html_01 Html/Jsp/Javascript 2011. 10. 10. 22:37

기본적인 Tag만 알고 있는 상태였지만 금일 기점 시작한 학원 강의에서 다시한번 되뇌이는
부분과 새롭게 알게된 Html의 수업내용을 정리해 본다.

Html의 기원: 미국방성의 텍스트위주의 정보교환을 위해 만들어졌다. (Hyper Text Markup Language) 

css: 스타일시트, 페이지별 공통속성이라던가 외부에서 작성되어져 삽입되거나 Body tag / Style tag등에 사용된다.

JavaScript: 첫수업은 html로, javascript에 대해선 깊게 들어가지 않았으나 여타 다른 언어들에 비해 코드 작성의 문제로 인한 Error발생시 알려주지 않는 경우가 많아 매우 까다롭다.

 

* Web Language 설명: 아래와 같은 언어로 코딩하여 Web Browser로 클라이언트가 접속하여 페이지를 볼 수 있게 된다.

 1. JSP(Java)

  - 실행을 위해 Tomcat이라는 Server가 필요하며 서버 언어로 구분된다.

  - Windows / Linux(Dos스타일이라 함) 운영체제에서 실행 가능

 2. PHP

  - 실행을 위해 Apache라는 Server가 필요하며 서버 언어로 구분된다.

  - Windows / Linux 운영체제에서 실행 가능

 3. ASP

  - 실행을 위해 IIS라는 Server가 필요하며 서버 언어로 구분된다.

  - Windows 운영체제에서만 실행 가능

 4. Html

  - 실행을 위해 Server가 없이도 테스트가 가능하여 클라이언트 언어로 구분된다.

 

* Java계열은 Tool, Compiler 모두 Open / Free.. 쉽게 한국말로 공짜란다.

* Cafe(goguma777)에 Dos 및 Linux 등에 익숙해질만한 자료가 있으니 참고 바란다고 함.

* 게시판(Jsp, Php, Asp 등으로 만들어진)에 입력된 자료가 DB에 저장된다.

* DB→Oracle / MySQL

 

Html 코딩 Tool로 주로 EditPlus를 사용한다.

프로그램 다운로드 하여 사용시 30일 쉐어웨어 버젼이다. 크랙을 사용하거나 정품 라이센스를 사거나 하는 건 판단에 맡김

외에 윈도우 기본프로그램인 메모장 / 워드패드를 사용하여도 무방하나 불편할 것이다.

타 언어 코딩시 Eclipse, iflatform 등의 프로그램도 사용한다 한다.

 

* Tip: Edit plus 브라우저보기:Ctrl+B / 편집화면보기:Ctrl+E

 

* Hyper Text

  - 링크로 이루어진 언어

  - Tag로 이루어져 있다.(명령어)

  - 대체적으로 시작태그 <code> 와 끝태그 </code>로 이루어져 있다.

  - 시작태그로만 이루어져 있는 경우도 있다. ex) <br>

  - 끝태그를 생략 가능한 경우도 있다. ex) <p></p>

  - 링크를 클릭시 현재창(기본값)외 새창(_blank)으로도 열 수 있다. ex) <a href="링크주소" target="_blank">text</a>

 

# 보통문서에 입력하여 html저장 시 body tag에 입력됨을 확인

 1. 보통문서에 Text 입력 후 index.html 로 저장

 2. HTML페이지에서 <body>와 </body>사이에 Text 입력후 index2.html 로 저장

 

 ▲ 결과가 같음을 확인 한다.

 

# 페이지의 제목 입력하기

<html>
 <head>
 <title>페이지의 제목</title>
 </head>

 <body>
 
 </body>
</html>


▲ 위와 같이 head tag사이에 <title>페이지의 제목</title>으로 입력한다.

 

* Tip: EditPlus에서 .bak 확장자의 백업파일이 불필요할시- 도구-기본설정-항목(파일) 체크 해제

 

* Font 속성Tag

 - Color

  · 색상의 종류는 256*256*256 (16,777,216)가지라 한다. RGB코드표 참고

  · <font color = "#색상코드">text</font>

  · 속성 태그는 속성을 지정하지 않을 땐 아무런 기능이 없다.

    ex) <font color = "">text</font>

    그러므로 필요 없다면 생략

 - Size

  · html에서만 글자크기에 제한이 있다. (작고)1~7(크다)

  · 기본값은 3이며 스타일시트에서는 더 크게 가능하다

  · <font size="1~7숫자">text</font>

 - Face

  · 쉽게 말해 글꼴

  · <font face="돋움">text</font>

  · Tip: 돋움은 글자폭이 가변 / 돋움'체'는 글자폭이 고정이다.

 

* Tip: RGB코드표- 16진수로 이루어져 있으며 F가 15로 흰색에 가깝고 0은 검은색에 가깝다. 궂이 외울 필요는 없다.

색상코드 앞에 #을 붙이지 않아도 실행되나 코딩시 다른 명령어와의 식별의 용이함을 위해서나 오류 방지를 위해

#을 붙이는 것이 일반적이다. 따옴표(")도 같은 의미에서 권장.

 

* Tip: EditPlus, 보기-도구모음-html도구모음 을 활성화시 HTML 색상코드를 기본 제공한다.

""따옴표 사이에 커서를 두고 선택하면 해당코드가 자동 립력되며 확장버튼으로 더 많은 색을 선택 가능하다.

Java 문서등에서도 필요시 html도구모음에 색상 참조 가능함(Java에선 기본이 비활성화 되어 있음)

 

* Body 속성tag 

  · bgcolor : 배경색 <body bgcolor="#색상코드">

  · background : 배경그림 <body background = "이미지경로">

    (경로지정시 현html파일의 위치를 기준으로 하위폴더는 "하위폴더명\파일명.확장자" 이고(상대경로)

     상위폴더는 "..\파일명.확장자"이다(이 또한 상대경로). 전체경로를 입력해도 된다(절대경로).

  · background > bgcolor : 포토샵으로 보자면 레이어 개념. bgcolor와 background 를 중복하여 입력시

    background의 투명인 부분이 있을 때 bgcolor가 보인다 보면 된다.

    <body bgcolor="black" background="img\img.jpg">

  · text : 기본 글자색 <body text="#색상코드">

  · link : 아직 방문이력이 없는 하이퍼링크가 적용된 텍스트/이미지(외곽선)등의 색깔

  · alink : active link, 하이퍼링크가 적용된 텍스트/이미지를 마우스 왼쪽 버튼을 클릭 후 놓지 않은 상태에의 색깔

  · vlink : visited link, 방문 이력이 있는 하이퍼링크가 적용된 텍스트/이미지등의 색깔

  · a href : 이미지나 텍스트에 하이퍼링크를 걸 수 있다. <a href="링크주소">이미지/텍스트</a>

  · 최상단에 있는 이미지의 좌측과 우측 여백 조절

    leftmargin, topmargin <body topmargin="숫자" leftmargin="숫자">

  · onLoad : Javascript 호출 ex) <body onload="alert('메시지');">

    단, onLoad는 body tag외에도 <style></style>이나 기타 다른 부분에도 삽입이 가능하다.

 

  ▲ 위와 같은 body 속성 tag는 페이지별로 다 적용해야 한다는 단점이 있다. 그래서 나온 것이 스타일시트다.

     타 페이지에 작성하여 외부요소로 불러오기가 가능하다. 라지만 아직 수업에서는 배우지 않았다.

 

 - Img 속성tag

  · 이미지 삽입 : <img src="이미지경로">

  · 이미지에 링크 : <a href="링크경로"><img src="이미지경로"></a>

  · 링크된 이미지의 외곽선 사이즈 변경 : border → <a href="링크경로"><img src="이미지경로" border="0"></a>

    border에 값으로 입력된 숫자는 pixel이며 page내 모든 이미지의 속성을 변경하는 tag로 적용하는 실사례가 많다.

    ex) 쇼핑몰의 상품 사진

  · 이미지 툴팁 : 이미지에 마우스롤오버시 tag에 입력된 글이 사용자에게 보이게 된다- alt

    <img src="경로" alt="text">

  · 이미지 크기조절: width(가로), height(세로)이며 <img src="경로" width="숫자" height="숫자"> 물론 숫자는 픽셀단위

  · 이미지 정렬: align → top, bottom, right, left가 있다. 대개 테이블 작성 후 그 안에서 적용한다.

    <img src="경로" align="top">

  · 공간 띄우기 : vspace(세로 공간 띄우기), hspace(가로 공간 띄우기) <img src="경로" vspace="숫자"> 물론 픽셀단위

 

* 단락태그 (속성이 없다)

- <br> : 줄바꿈, 여러번 사용시 N개수의 N-1만큼 빈줄생성.

- <nobr></nobr> : 브라우저의 폭을 무시하며 줄을 바꾸지 않음 (기본값: 브라우저 크기에 맞춰 자동줄바꿈)

- <wbr> : nobr 안에서의 줄바꿈

- <p></p> : 줄바꾸고 한줄 띄우기, 문단구분, align속성(left, right, center), </p>를 생략가능하지만 문단범위 설정시 유용함

- <center></center> : 가운데 정렬

- <pre></pre> : 입력한 그대로 나타남, 엔터, 스페이스 적용

- <xmp></xmp> : 위와 같은 맥락이나 태그외 특문까지 그대로 나타남

- <blockquote></blockquote> : 문단구분 및 들여쓰기, p태그와 같으나 들여쓰기 됨

- <div></div> : 스타일시트와 자바가 합쳐져 같은자리에 여러 문단 서식 적용가능, align속성

   ex) 같은 영역에 마우스 롤오버나 기타 액션으로 다른 내용표시 (포털사이트)

 

* 특수문자

- &, Ampersand → &amp;

- Nonbrakespace, 공백, 띄워쓰기 → &nbsp;

- Quotation mark("), 따옴표 → &quot;

- Copyright (ⓒ), ㅁ한자에도 있다 → &copy;

- ~보다 작다, Less Than (<) → &lt;

- ~보다 크다. Greater Than (>) → &gt;

'Html/Jsp/Javascript' 카테고리의 다른 글

[Test] 회원가입 폼 만들기  (1) 2011.10.16
Html,Jsp,Css_05  (0) 2011.10.14
Html,Jsp,Css_04  (0) 2011.10.13
Html,Jsp,Css_03  (0) 2011.10.12
Html_02  (0) 2011.10.11
Html_01  (0) 2011.10.10