기본적인 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 → &
- Nonbrakespace, 공백, 띄워쓰기 →
- Quotation mark("), 따옴표 → "
- Copyright (ⓒ), ㅁ한자에도 있다 → ©
- ~보다 작다, Less Than (<) → <
- ~보다 크다. Greater Than (>) → >
'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 |