[20121106] 1일차 (HTML 기본 태그, div, span, style, CSS, h1, id, class)

Java/JavaScript 2012. 11. 8. 17:39

share this post

웹 어플리케이션

1. 웹 어플리케이션은 웹 브라우저(웹 클라이언트)의 요청에 대하여 서버에서 처리해서 결과를 보여주는 프로그램

웹 클라이언트 - 웹 서버

브라우저 톰캣

웹주소 요청 웹서버 응답

http://www.naver.com 네이버 컴퓨터 응답

사용자 개발자

HTML, CSS, Javascript

브라우저에서 실행가능 원본은 웹서버에 저장된 상태

JSP&Servlet

결과 페이지만 확인 웹서버에서 실행 가능

웹 어플리케이션 실행 순서

1단계. 웹 클라이언트(웹 브라우저)에서 주소 요청 - 사용자

2단계. 웹서버(톰캣) 응답 준비 - 서버

3단계. 응답은 요청에 따라서 다르다. -서버

HTML, CSS, Javascript 요청한 경우 원본을 그대로 클라이언트에게 전달.

JSP&Servlet 요청한 경우 JVM을 이용해서 실행 및 결과(HTML Document)를 내고, HTML Document를 클라이언트에게 전달.

4단계. 전달받은 HTML Document 를 브라우저에서 실행 및 결과(웹 페이지) 출력. - 사용자

웹 어플리케이션 개발 언어

1. 웹 클라이언트 언어 - HTML, CSS, Javascript, XML, Ajax, jQuery

2. 웹 서버 언어 - JSP&Servlet(Java), ASP, PHP, ASP.NET(C#)

웹 서버 구축

1. http://www.apache.org에서 아파치톰캣 프로그램 다운로드.

- apache-tomcat-6.0.36.zip

2. 압축 해제

3. 이클립스에서 프로젝트 생성시 Dynamic Web Project 선택.

4. 최초 웹 프로젝트 생성시에서는 런타임 지정 필요. -> 아파치 톰캣 지정

5. Servers 탭에서 아파치 톰캣 등록

6. 웹프로젝트를 톰캣 서버에 등록.

7. 테스트 페이지 작성 및 실행.

-> 이클립스에서 실행시 외부 브라우저 선택 필요.

-> 방화벽 차단 해제 필요

-> 이클립에서 톰캣 실행시 서버 포트(8080 -> 8090) 변경 필요. (오라클서비스와 충돌 방지)

-> 브라우저가 익스플로어인 경우 인트라넷 설정 필요.

실행시 브라우저에 주소를 아래와 같이 입력할 것.

http://localhost:8090/HTML20121106/Sample01.html

-> localhost:8090 -> ip주소:포트번호/이하주소 입력시 다른 컴퓨터에 접속가능.

HTML(HyperText Markup Language)

<태그>

<태그 />

<시작태그>콘텐츠</끝태그>

기본 HTML 페이지 형식

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

</body>

</html>

3. XHTML 1.0, HTML 4.01 버전이 존재. HTML5(웹표준)는 가장 최근 버전.

4. 태그의 종류

- 인라인 요소: 콘텐츠가 라인단위로 표현됨. <span>, <a>, <img>, ....

- 블럭 요소: 콘텐츠가 블럭단위로 표현됨. <div>, <p>, <table>, ....

5. 규칙

- <body> 태그에서 제일 먼저 만나는 태그는 블럭 요소여야 함.

- 태그는 중첩해서 사용할 수 있으나, 중첩 표시가 정확해야 한다.

올바른 중첩형태

<부모태그>

<자식태그> 컨텐츠 </자식태그>

</부모태그>

틀린 중첩형태

<부모태그>

<자식태그> 컨텐츠 </부모태그>

</자식태그>

- 블럭요소 안에는 블럭요소가 올수 있지만, 인라인 요소 안에는 블럭요소가 올수 없다.

올바른 형태

틀린 형태

-일부 태그는 자식 태그를 한정적으로 허용함. 예를 들어 <ol>태그는 자식태그로 <li>만 허용.

<ol>

</ol>

웹표준 검사 (ACID)

1. 브라우저가 웹 콘텐츠를 얼마나 정확하게 표현할 수 있는지 검사해주는 페이지.

-> 검사 항목은 HTML, CSS, Javascript에 대한 종합 검사

-> 페이지가 정상적으로 보이고, 점수가 높을수록 좋은 상태.

-> 검사 대상 브라우저에서 아래 사이트 연결

http://acid2.acidtests.org

http://acid3.acidtests.org

2. 크롬 브라우저 권장.

텍스트 표현 태그

1. 내용 지정

<h> : 제목 지정. h1 ~ h6. 블럭요소

<p> : 문단 지정. 블럭요소

2. 모양 지정 - CSS (Cascade Style Sheet)을 이용

- 태그별로 style 속성을 추가한 후 CSS 속성 지정하는 방법과 <style> 태그를 이용해서 통합 지정하는 방법이 있다.

- body가 아닌 head 영역에 작성

<style>

식별자 {속성이름:값;.....}

</style>

3. 엔티티 - 특수문자 표기

< : <

> : >

공백 :  

이미지 표현 태그

1. <img> 태그 이용. 인라인 요소.

그림주소가 로컬인 경우 그림이름만 쓰면 되지만, 원격인 경우는 웹주소형태로 표기

텍스트 이미지 표현 샘플.

//Sample05.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

h1 /* HTML Document에서 모든 h1 태그에 대해서 CSS 속성 적용 */

{

font-size:18pt; /* 글자 크기 지정 속성 */

}

{

font-size:10pt;

color: grey; /* 글자색 지정 속성 */

font-weight: normal; /* 글자 굵기 지정 속성 */

}

{

font-size:12pt;

font-weight: normal; /* 글자 굵기 지정 속성 */

}

p /* HTML Document에서 모든 p 태그에 대해서 CSS 속성 적용 */

{

line-height: 180%; /* 줄간격 지정 속성 */

}

</style>

</head>

<body>

<div>

<h1>애플, 특허전쟁서 구글에 한 방 먹었다</h1>

<p>[김익현기자] 3G 표준특허권을 둘러싼 구글과의 대리전에서 애플이 패배했다.</p>

<p>미국 위스콘신주 매디슨 지역법원은 5일(현지 시간) 표준 특허권을 둘러싼 애플과 모토로라 모빌리티간의 소송에서 애플의 요구를 기각했다고 주요 외신들이 보도했다.</p>

<p>이번 소송은 5일 오후 1시(미국 중부 시간 기준) 열릴 예정이었다. 하지만 담당 판사가 소송 시작 직전에 기각하면서 사실상 애플이 패소한 셈이 됐다.</p>

<p>이번 소송은 모토로라가 구글에 인수되기 전인 지난 해 5월 제기한 것. 모토로라는 소송 제기 3개월 뒤인 지난 해 8월 구글에 인수됐다.</p>

<p>지리한 법정 공방을 해 오던 모토로라와 애플은 지난 주부터 막판 힘겨루기를 벌였다. 모토로라가 아이폰 가격의 2.25% 가량의 로열티를 요구한 반면 애플은 1달러 이상은 줄 수 없다고 맞선 것.</p>

<p>처음엔 애플 쪽에 다소 유리한 방향으로 진행됐다. 매디슨 지역법원이 프랜드 로열티 기준을 정한 뒤 양측이 협상하도록 하는 방안을 고려한 것.</p>

<p>이에 대해 모토로라가 지난 달 30일 법정에서 프랜드 로열티 기준을 정하는 것은 합당하지 않다고 맞섰다.</p>

<p>이런 상황에서 애플이 "아이폰 한 대당 1달러 이상은 줄 수 없다"고 나오면서 분위기가 확 달라지기 시작했다. 이번 사건을 담당하고 있는 브바라 크랩 판사가 애플의 주장에 대해 상당히 부정적으로 받아들인 때문이다.</p>

<p>특허 전문가인 플로리언 뮐러에 따르면 크랩 판사는 그 때부터 프랜드 관련 재판을 하는 게 무의미하다는 쪽으로 입장 선회하기 시작했다.</p>

<p>구글 측은 "모토로라는 그 동안 표준 특허에 대해 합당한 조건으로 라이선싱해 왔다"면서 "(애플의) 이번 소송을 편견으로 가득차 있다면서 기각한 데 대해 매우 기쁘게 생각한다"고 밝혔다.</p>

<p>물론 이번 결정으로 모토로라와 애플 간의 표준 특허 공방이 완전히 마무리된 것은 아니다. 애플은 매디슨 지역법원 결정에 대해 항소할 수도 있다. 그럴 경우 항소법원에서 또 다시 공방을 벌일 가능성이 많다.</p>

<p>미국 연방무역위원회(FTC)도 이번 공방의 또 다른 변수다. FTC 측이 구글의 표준 특허 관행에 대해 조사를 진행하고 있기 때문이다. 지난 주 FTC 한 위원은 표준 특허 남용을 이유로 구글을 제재하는 방안을 검토하고 있다고 밝히기도 했다.</p>

<p>그럼에도 불구하고 애플 입장에선 매디슨 법원에서 기각당한 것이 적잖은 타격이 될 전망이다. 표준 특허권의 가치를 지나치게 무시함으로써 담당 판사로부터 "편견으로 가득 차 있다"는 평가를 받았기 때문이다.</p>

<p>특허 전문가인 플로리언 뮐러 역시 "애플이 이번 재판을 통해 필수표준 특허 라이선싱을 했어야 한다"면서 "애플이 기회를 놓쳤다"고 평가했다.</p>

<h4>/김익현기자 sini@inews24.com</h4>

</div>

</body>

</html>

목록 표현 샘플

http://www.google.co.kr/intl/ko/policies/privacy/principles/

->구글의 개인 정보 보호 원칙 페이지 작성

<ol> - 순서 있는 목록 표현시 사용.

<ul> - 순서 없는 목록 표현시 사용.

<li> - <ol>, <ul>의 자식 태그로써 항목 표현시 사용.

//Sample06.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

body

{

color: #444444; /* RGB 컬러 #000000 ~ #FFFFFF */

font-size:10pt;

line-height: 150%

}

.title01 /* title01 클래스명이 적용된 모든 태그에 css속성 적용 */

{

font-weight: bold;

}

{

margin-top: 40px; /* 블럭 요소에서 바깥쪽 여백 지정 속성 */

padding: 2px; /* 블럭 요소에서 안쪽 여백 지정 속성 */

}

</style>

</head>

<body>

<div>

<p>Google은 종종 기존 기술의 한계를 뛰어넘는 아이디어와 제품을 추구합니다. Google은 책임감 있게 행동하는

기업으로서 혁신과 Google 사용자에 대한 적절한 수준의 개인정보 보호 및 보안이 균형을 이룰 수 있도록 노력합니다.

Google의 개인정보 보호원칙은 회사의 각 단계에서 결정을 내릴 때 올바른 기준을 제시하므로, 전 세계의 정보를 체계화하는

임무를 이행하는 동시에 Google 사용자를 보호하고 경쟁력 강화에 도움을 줄 수 있습니다.</p>

<ol>

<li>

<p class = "title01">정보를 활용하여 사용자에게 유용한 제품과 서비스를 제공합니다.</p>

<p>‘최상의 사용자 경험 제공’은 <a href="http://www.google.co.kr/intl/ko/about/company/tenthings.html">Google 경영철학</a>의 첫 번째 신조입니다. 사용자가 Google과 정보를

공유하면 Google은 이 정보를 활용하여 사용자에게 유용한 서비스와 제품을 구축할 수 있습니다. Google은

사용자에게 초점을 맞추면 혁신을 이끌고 온라인 사용자의 충성도를 확보하는 제품 및 개인정보 보호 강화 기능이 모두 발전할

것으로 믿고 있습니다.</p>

<p>Google은 사용자가 검색을 수행할 때 범하는 오타나 맞춤법 오류를 통해 정보를 습득하여 사용자에게 보다

빠르고 정확한 검색결과를 제공하는데 활용합니다. 따라서 사용자가 [우채국]이라고 입력하는 경우 [우체국]을 입력하려고 한

것으로 추측할 수 있습니다.</p>

</li>

<li>

<p class = "title01">강력한 개인정보 보호 기준과 관행을 반영하는 제품을 개발합니다.</p>

<p>기술의 최첨단을 추구하는 Google은 사용자 경험의 질을 떨어뜨리지 않으면서 사용자가 간편하게 개인정보를

관리하도록 해주는 도구를 개발하기 위해 노력하고 있습니다. Google은 개인정보 보호법을 준수하며 또한 내부적으로

그리고 규제당국 및 업계 파트너와 협력하여 강력한 개인정보 보호 기준을 개발하고 구현합니다.</p>

<p>Google에서는 서로 다른 사용자와 서로 다른 정보를 쉽게 공유할 수 있도록 서클을 염두에 두고

Google+를 설계했습니다. 따라서 사용자는 현실 세계에서와 마찬가지로 친구들을 위한 서클, 가족을 위한 서클, 그리고

직장 상사만 따로 분리시켜 놓은 서클을 만들 수 있습니다.</p>

</li>

<li>

<p class = "title01">개인정보 수집을 투명하게 관리합니다.</p>

<p>Google은 Google 서비스를 맞춤설정하는 데 사용되는 정보를 사용자에게 보여드리기 위해 노력합니다.

필요한 경우 Google이 보유하고 있는 개별 사용자 정보, 서비스 제공을 위해 정보를 활용하는 방식을 투명하게 공개하는

것을 목표로 삼고 있습니다.</p>

<p>Google 대시보드를 사용하면 ‘Google이 나에 대해 무엇을 알고 있나요?’라는 질문에 대한 대답을 찾을

수 있습니다. Google 대시보드에서는 최근 Blogger 게시물 또는 업로드한 사진 등 Google 계정에 저장된 내

정보를 볼 수 있으며 여러 제품에 대한 개인정보 보호 설정을 한 곳에서 변경할 수 있습니다.</p>

</li>

<li>

<p>사용자는 각각 개인정보 보호와 관련된 관심사와 요구가 다릅니다. 모든 Google 사용자에게 최상의 서비스를

제공하기 위해 Google은 개인정보 사용에 대해 사용자의 의사를 표시할 수 있도록 의미 있고 세분화된 선택권을

제공하고자 합니다. Google은 개인정보를 독점해서는 안 된다고 생각합니다. 사용자가 다른 서비스로 개인정보를 이전할

수 있는 제품을 만듭니다. Google은 사용자의 개인정보를 판매하지 않습니다.</p>

<p>사용자는 Google의 개인정보 보호 도구를 사용하여 자신의 컴퓨터와 Google 사이의 검색 트래픽을

암호화하고, 비공개로 인터넷을 탐색하고, 검색 기록을 삭제하고, Google의 데이터 백업 도구를 사용해 자신의 데이터를

Google 제품 밖으로 쉽게 옮길 수 있으며 이 외에도 다양한 작업을 수행할 수 있습니다.</p>

</li>

<li>

<p class = "title01">보유한 정보를 책임감 있게 관리합니다.</p>

<p>Google은 사용자가 Google에 위임한 데이터 보호에 대한 책임을 잘 알고 있습니다. Google은 보안

문제를 철저하게 관리하며 더욱 안전한 인터넷을 만들 수 있도록 광범위한 사용자와 개발자 및 외부 보안 전문가 커뮤니티와

협력합니다.</p>

<p>Google은 처음부터 보안 및 복원력을 염두에 두고 Google 제품을 설계합니다. Google의 자동화된

스캐너가 매일 수백만 명의 사용자를 악성코드, 피싱, 사기 및 스팸으로부터 보호하기 위해 데이터를 사용합니다.</p>

</li>

</ol>

</div>

</body>

</html>

하이퍼링크 태그

1. 텍스트나 이미를 마우스 클릭시 다른 웹페이지로 이동시켜주는 기능. 인라인 요소

2. <a href = "다른 웹페이지 주소">컨텐츠</a>

//Sample07.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

{

text-decoration: none; /* 글자 장식 속성 */

}

a:hover /* 특정 객체 위에 마우스커서가 올려진 상태인 경우 */

{

text-decoration: underline; /* 글자 장식 속성 */

}

#title01 /* 아이디 속성이 지정된 객체*/

{

font-size:24pt;

color:grey;

margin: 10px;

margin-left: 20px;

}

#title02

{

padding: 14px;

margin-top: 10px;

margin-bottom: 10px;

background-color: #416bb5;

color:white;

font-weight: bold;

}

#title02 a /* 부모 식별자 안에 있는 하위 식별자만 영향받는 경우 */

{

color:white;

font-weight:normal;

}

</style>

</head>

<body>

<div>

</div>

개인정보보호

</div>

<div>

<a href="http://www.google.co.kr/intl/ko/policies/privacy/">개인정보취급방침</a>

원칙

</div>

</body>

</html>

'Java > JavaScript' 카테고리의 다른 글

Javascript event Keycode (0)	2013.01.10
[20121112 ~ 1113] 5일차 (text박스, 속성, select, window객체, DOM, 사용자 정의 객체) (0)	2012.11.15
[20121109] 4일차 (달력구현, 난수, radio 버튼, checkbox) (0)	2012.11.15
[20121108] 3일차 (JavaScript, 반복문(do~while, for, 이중for), split(), 배열, 배열의배열) (0)	2012.11.08
[20121107] 2일차 (Table, form, JavaScript, 이벤트 핸들러, 사용자데이터입력, 출력, document) (0)	2012.11.08

WRITTEN BY

: 빨강꼬마

[20121106] 1일차 (HTML 기본 태그, div, span, style, CSS, h1, id, class)

'Java > JavaScript' 카테고리의 다른 글

티스토리툴바