1일차_웹어플리케이션개요, HTML개요, CSS개요.txt

HTML/CSS

1일차_웹어플리케이션개요, HTML개요, CSS개요.txt

알 수 없는 사용자 2015. 6. 21. 07:53

------------------------------------------
웹 어플리케이션

1. 웹 어플리케이션의 특징

웹클라이언트                 웹서버
---------------------------------------
브라우저(IE, FF, CR)         Apache Tomcat(Java기반)
1.요청(웹주소-영문도메인, IP주소)
                             2.응답 및 결과 반환
                             HTML,CSS,Javascript,JSP,Servlet
3.반환된 결과 출력
HTML,CSS,Javascript -> 웹페이지
---------------------------------------

영문도메인<->IP주소 (DNS서버)

http://www.naver.com
http://news.naver.com/main/read.nhn?mode=LSD&mid=shm&sid1=105&oid=001&aid=0006915455
http://211.63.89.XX:8095

2. 웹서버 다운로드 및 설치
http://tomcat.apache.org 사이트에서 다운로드 및 압축 풀기
32-bit Windows zip (pgp, md5)

3. 이클립스와 톰캣 서버 연결
- Dynamic Web Project 생성
- Project name: 항목 입력
- Target runtime: 항목 선택(톰캣 서버 연결) -> New Runtime 버튼 선택
- Finish 버튼
- Servers 탭
- create new servers... -> Tomcat 서버 선택 -> Finish 버튼
- server.xml -> 포트 번호 변경(8080->8090)
- Servers 탭에서 서버 실행 (방화벽 허용)

4. 샘플 페이지 작성 및 실행
- Dynamic Web Project에서 WebContent 폴더 하위에 html 확장자를 가진 페이지 작성.
- Sample01.html 페이지 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

Hello, Web World!

</body>
</html>
- Sample01.html 페이지 선택한 후, Run As> Run on Server 메뉴 선택
(브라우저에 http://localhost:8090/WebBasic/Sample01.html 주소 요청해도 된다.)
- 브라우저가 실행되고, 자동으로 요청 주소를 요청하게 된다.
- 웹페이지 결과 출력되면 성공.
- 톰캣 서버에 프로젝트를 등록해야 한다.

- 원격 연결 주소
http://IP주소:8090/프로젝트이름/파일이름.html

5. 한글 인코딩 설정
- EUC-KR에서 UTF-8 로 설정 변경

---------------------------------------------
HTML(Hyper Text Markup Language)

1. 웹페이지 작성용 언어. Markup Language의 한 종류.
태그(<태그명>) 형태의 명령으로 구성된 언어.
마크업 언어는 특정 데이터를 표식하는 언어.
예를 들어,

홍길동 -> 데이터 자체
<이름>홍길동</이름> -> 태그로 표시된 데이터 형식.

1234 -> 데이터 자체
<지역코드>1234</지역코드>

2. HTML 기본 구성
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<body>
   콘텐츠 작성 영역
</body>
</html>

3. 마크업 언어의 기본 규칙
- <태그명>데이터</태그명> : 시작 태그와 끝 태그의 쌍으로 구성.
- 태그명은 식별자 작성 규칙에 맞춰서 작성. 일반적으로 소문자 사용.
- 부모 태그와 자식 태그로 구성될 수 있다. 최상위 부모를 루트라고 한다.
예를 들어,
<루트>
<부모태그>
<자식태그></자식태그>
</부모태그>
</루트>
- 태그 안에는 부가적인 정보를 위해서 속성을 추가할 수 있다.
예를 들어,
<태그명 속성="값" 속성="값" ...>데이터</태그명>

---------------------------------------------------
웹페이지 작성 규칙

- 구조 설계 : HTML. 데이터 간의 부모 자식 관계를 설정.
예를 들어,
제 1 장 큰 제목-> 제 1 절 작은 제목 -> 항 -> 목
- 표현 추가 : CSS. 데이터를 출력 형태를 지정.
- 동적 액션 추가 : Javascript. 데이터에 대한 추가적인 액션. 사용자의 대한 요청 처리. 예를 들어, 버튼 클릭 액션에 대한 반응으로 데이터 출력.

주의)
1. 웹페이지 작성시 모양(표현) 보다는 구조(레이아웃)를 먼저 생각한다. 제목, 내용 단위로 지정.
2. 모양(표현) 지정이 필요한 경우는 모두 CSS로 작성.
3. 웹페이지 특성상 Enter키, 공백은 표현되지 않는다. 대체 수단은 존재한다.
4. Line Break 특성인 <br> 태그 사용은 최소화.
5. 웹페이지 전체에 대한 구조 설계는 <div> 태그 이용.
6. 웹페이지 전체는 페이지 레이아웃 요건(상단, 중단, 하단 레이아웃)에 맞춰서 작성.

---------------------------------------
HTML 버전

HTML5
<!DOCTYPE html>

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

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

----------------------------------------
태그의 종류

1. Block 요소 : 태그 사용의 범위가 블럭 형태를 가지는 태그
예를 들어, <div> 태그를 사용하면 자기 자신의 범위가 블럭이므로 다른 태그와 같은 라인에 존재할 수 없다. 상하로만 존재 가능한 상태.

2. Inline 요소 : 태그 사용의 범위가 라인 형태를 가지는 태그
예를 들어, <span> 태그를 사용하면 자기 자신의 범위가 인라인이므로 다른 태그와 같은 라인에 존재할 수 있다. 좌우로 존재 가능한 상태.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div>블럭요소1</div><div>블럭요소2</div><div>블럭요소3</div>
<div>
<span>인라인요소1</span><span>인라인요소2</span><span>인라인요소3</span>
</div>
</body>
</html>

----------------------------------------
HTML Headings

1. <hn> : n은 1~6. 제목 지정시 사용하는 태그. 블럭 요소.
예를 들어, 가장 큰 제목은 <h1> 으로 지정하고, 작은 제목을 내려갈수록 번호를 증가시킨다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
</body>
</html>

-----------------------------------
HTML Paragraphs

1. <p>. 문단 지정시 사용하는 태그. 블럭 요소.
예를 들어, 뉴스 페이지 작성시 부모 요소 지정을 위한 <div> 태그와 제목 지정을 위한 <h> 태그, 내용 지정을 위한 <p> 태그를 혼용해서 아래와 같이 작성하게 된다. 적절한 부모 요소를 지정하는 것이 구조적 설계의 기본 구성이 된다. 부모 요소는 블럭 요소만 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div id="new01">
<h1>"페이스북, 비디오챗 '슬링샷' 개발중…스냅챗 잡기"</h1>
<p>보도에 따르면 마크 저커버그 최고경영자(CEO)는 지난해 스냅챗을 인수하려는 마음을 먹고 스냅챗 창업자 에번 스피겔 등과 접촉했으나 거절당한 이후 슬링샷 프로젝트를 출범시키고 최고 기밀로 관리하면서 진척 상황을 감독해 왔다.</p>
<p>슬링샷은 사용자가 화면을 두어 차례만 두드리면 짧은 비디오 메시지를 보낼 수 있도록 설계돼 있다.</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div>

<h1>HTML Basic Tags</h1>

<h2>Heading Tags</h2>

<p>Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.</p>

<h2>Paragraph Tag</h2>

<p>The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example:</p>

<h2>Line Break Tag</h2>

<p>Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.</p>
<p>The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML</p>

</div>
</body>
</html>

----------------------------------------------
CSS (Cascading Style Sheets)

1. HTML 태그만으로는 표현 부분이 부족하기 때문에 CSS를 이용해서 출력 형태를 지정하게 된다.

2. CSS 기본 형식
"CSS 속성명 : 값" 형태의 명령을 특정 대상에 적용하면 지정된 속성에 따라 출력 형태가 달라진다.
예를 들어, "color:red" 명령을 이용하면 특정 대상의 전경색이 빨간색으로 출력된다.

3. CSS 적용 방법
- 인라인 단위 적용 방법 : 특정 태그에만 적용되는 CSS. 웹페이지 내에서 특정 부분에만 적용하는 스타일 지정시 사용.
- 페이지 단위 적용 방법 : 특정 페이지에만 적용되는 CSS. 웹페이지 전체의 스타일 지정시 사용.
- 파일 단위 적용 방법 : 특정 파일 단위로 적용되는 CSS. 웹사이트 전체의 스타일 지정시 사용.

4. 인라인 단위 적용 방법
<태그명 style="CSS속성:값; CSS속성:값; ...">데이터</태그명>

5. 페이지 단위 적용 방법
<style type="text/css">
선택자 { CSS속성:값; CSS속성:값; ... }
</style>
-> 선택자는 여러가지 표현에 의해 특정 태그를 찾는 명령이다. 한 개 이상의 태그를 동시에 찾을 수 있다.

6. 파일 단위 적용 방법
<link rel="stylesheet" type="text/css" href="파일명.css">
-> 별도의 .css 파일을 만들어서 그 안에 스타일 내용을 작성한다.

뉴스 페이지 작성 연습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

/* 선택자 {속성:값; .... } */
/* 선택자에 태그 이름을 사용하면 특정 태그 전체에 대해서 속성 적용된다. */
/* width 속성은 블럭 요소의 너비 지정 */
/* line-height 속성은 줄간격 지정 */
/* font-size 속성은 글자 크기 지정 */
/* color 속성은 전경색 지정 */
/* font-weight 속성은 글자 굵기 지정 */
/* margin-top, margin-bottom 속성은 여백 지정 */

div { width: 550px; line-height: 170%;}

h1 {font-size:18pt;}

h2 {font-size:12pt; color:#9B9C9A; font-weight: bold;}

p {font-size:10pt; margin-top:25px; margin-bottom:25px; }
</style>

</head>
<body>

<div>

<h1>[프리미엄 리포트]“유명저널 게재 목표치 내라”… 창의성보다 숫자위주 평가</h1>

<h2>[3대 과학저널 한국인 논문 분석]과학자들이 말하는 문제점</h2>

<p><img src="http://imgnews.naver.net/image/020/2015/04/20/70793740.1_99_20150420040904.jpg?type=w540"></p>

<p>우선 연구자 개인을 평가하는 데 피인용 지수에 대한 가중치를 너무 많이 둔다는 지적이 가장 많이 나왔다. 저널의 영향력을 나타내는 피인용 지수는 학술 정보 서비스 기업인 톰슨로이터가 만든 것으로 당초 도서관이 저널 구입 여부를 판단할 수 있도록 가이드라인을 제공할 목적으로 개발됐다.</p>

<p>오세정 서울대 물리천문학부 교수는 “피인용 지수가 논문의 과학적 가치를 평가하는 잣대로 변질됐다”면서 “노벨 물리학상을 받은 연구자의 논문도 대부분 피인용 지수가 그다지 높지 않은 물리 전문 저널에 발표됐다”고 말했다. 지난해 청색 발광다이오드(LED)를 개발해 노벨 물리학상을 받은 논문은 피인용 지수가 1.057인 ‘일본 응용물리학저널’ 등에 발표됐다. 세계 3대 저널인 네이처, 사이언스, 셀의 피인용 지수는 30∼40 수준이다.</p>

</div>

</body>
</html>

--------------------------------------------
요약

1. 웹 어플리케이션의 특징
- 웹클라이언트와 웹서버의 역할
- 요청과 응답 메커니즘
- 브라우저(IE, FF, CR), 웹서버(Apache Tomcat)

2. 이클립스 환경설정
- Dynamic Web Project 생성
- 톰캣 서버 연동
- .html, .jsp 파일 생성

3. HTML 페이지 특성

4. CSS 특성

----------------------------------------------

저작자표시