[Day1] HTML 1 - 개요, HTML 요소, 속성 (태그)

[Day1] HTML 1 [11/2]

1) 아파치 톰캣 다운 : https://tomcat.apache.org/

2) dynamic web project 새로 만들기

3) target : new runtime - 아파치 폴더 설정

4) web.xml 체크

http://localhost:8080/webPro/index.html

아이피/webPro/index.html

1. 인터넷( Internet )

1) 전 세계를 연결하는 국제 정보 통신망.

2) ARPA(Advanced Research projects Agency)가 1969년에 웹의 모태가 되는 ARPANET 개발

3) 군사용과 민간용으로 구분

4) 민간용으로 사용되던 네트워크가 현재의 인터넷이 되었다.

2. 웹( Web )

1) 인터넷에 연결된 컴퓨터를 통해서 사람들이 정보(영상, 문자 등등)을 공유하는 공간.

2) 1991년에 등장

3) 인터넷은 통신망이고 웹은 그 위에서 작동하는 서비스

4) 1989년 유럽 공동 원자핵 연구소( CERN )의 "팀 버너스 리"가 하이퍼 링크를 포함하는

문서의 개념을 제안.

1991년에 "월드 와이드 웹"을 개발해 배포.

3. 월드 와이드 웹( World Wide Web == WWW )

4. W3C ( World Wide Web Consortium )

1) 국제 웹 표준화 단체(기구)

2) 1994년 10월 설립 ( 팀 버너스 리가 창설 )

3) WWW 의 표준안 제작과 새로운 표준안 제안, 기술의 공유를 통해 WWW의 기술적,

사회적 확장을 위해 구성된 세계적 단체

4) html5, css3 등등

5) 강제성 X

5. 웹 브라우저

1) 인터넷에서 정보를 검색(공유)하는 데 사용되는 응용 프로그램

2) 최초 웹 브라우저 - 모자이크( 1993년 )

-> 후에 "넷스케이프" 발표.

3) W3C의 표준을 무시하며 경쟁~

MS사 - 인터넷 익스플로러( IE )

- PC 에 강제로 설치

넷스케이프사 - 넷스케이프웹 브라이저

4) 웹 브라우저 사이에 발생한 기술 전쟁 - 1차 웹 브라우저 전쟁

1994 ~ 1998년 까지 진행.

( MS사의 인터넷 익스플로러 승리)

6. 플러그인

1) 웹브라우저와 연동되는 특정 프로그램을 사용자의 PC에 추가로 설치해

웹 브라우저의 기능을 확장하는 방법.

2) 웹의 발전속도를 따라가지 못하는 W3C 에 불만을 느낀 기업들이 개발

3) 대표적인 플러그인

- MS사의 액티브X

- 어도비사의 플래시 ( Flash )

7. 웹 2.0

1) 서로 다른 사용자가 함께 새로운 컨텐츠를 창조할 수 있게 된 시대

웹 3.0

1) 인터넷에 엄청난 양의 정보 중에

내가 지금 필요한 정보와 지식만을 추출해서 보여주는 맞춤형 웹의 시대를

웹 3.0 이라고 한다. ( 개인화, 지능화, 상황인식 등 웹 3.0의 대표 키워드 )

8. 플러그인의 문제

1) 액티브X 같은 플러그인이 들어가면 웹 사이트가 무거워짐.

-> 해결 : W3C에서 html 표준 제안서가 제출되었다 ( MS사 거절 X )

9. WHATWG

1) Web Hypertext Application Technology Woking Group

2) MS사( IE ) 제외 + 웹 브라우저 제공 기업 설립

3) 2004년 6월 html5 표준 제정

4) 새로운 웹 표준인 [Web Application 1.0 표준]을 작성

5) W3C 또한 [Web Application 1.0 표준] 채택~

지금까지 웹 표준 : html5 사용

10. 웹브라우저 사이의 발생한 기술 전쟁 - 2차 웹브라우저 전쟁

MS사(IE) < WHATWG

h5,c3 X

h5,c3 O

11. 웹 표준의 변화

1) W3C 가 Web Application 1.0 표준( WHATWG )을 HTML5 표준으로 변경

2) W3C + WHATWG => HTML W/G을 결성 -> html 5 표준 작성.

3) html5 표준은 현재도 작성 중이며, 2014년에 정식 권고안을 발표.

12. 2차 웹 브라우저 전쟁 시작

1) MS사(IE)만 최신 표준을 지원하지 못하는 상황

2) 웹브라우저의 점유율이 뒤집히는 기회 생성.

13. html 역사

World Wide Web의 초창기

1) 1989 "팀 버너스 리"

1991 html ( "팀 버너스 리" )

2) 1993 html+

3) 1995 html 2.0 ( HTML Working Group )

4) 1997 html 3.2 ( W3C )

1999 html 4.01

2000 xhtml 1.0 == xml 1.0 + html 4.01

5) 2008 html5 ( WHATWG ) MS사(IE )

6) 2014 html5 ( W3C 권고 )

7) 2017 html5.2 ( W3C 권고 )

14. https://www.w3.org/ - html5 검색

https://www.w3.org/TR/2014/REC-html5-20141028/

15. 웹 동작 원리

(클라이언트) -> 요청( reqeust ) ( 웹 서버 ) + WAS( Web Application Server)

스폰 : 웹 브라우저

PC : 웹 브라우저

[주소창: http://www.naver.com/main.jsp] 엔터 main.jsp + 자바코딩 컴+실-> 결

콘솔 : javac.exe (자바 컴파일) java.exe (자바 실행)

-> 웹에서는 WAS가 함!!

<- 응답( response )

IIS

1) 아파치 + 2) 톰캣

Web Server :요청과 응답해줌 ex) IIS(MS), 아파치

WAS : 프로그램 컴파일 및 실행 ex) 톰캣

* 클라이언트 : 요청하는쪽

* 서버 : 응답하는쪽

* 서버인 동시에 클라이언트 역할을 하기도함

16. 웹 표준 기술 = 웹페이지 구성( html5 ) + 스타일 적용 ( css3 ) + 사용자 반응 처리 등등( js )

17. 편집기

메모장/ 에디터플러스

[ 이클립스 ] 아파치톰캣

*** Visual Studio Code ***

18. html

1) HyperText Markup Language의 약자

하이퍼텍스트 : 시공간을 초월하는 텍스트

마크업 : 태그 형식의

랭귀지 : 언어

2) 웹 페이지를 만들기 위한 표준 마크업(태그) 언어이다.

3) 여러 요소(elements)들로 구성된다.

19. 요소( element ) ? 요소추가,삭제,수정

= 시작태그 + 내용 + 종료태그

start tag + content + end tag

start tag 시작태그 <태그명>

end tag 종료(닫기)태그 </태그명>

20. html 문서의 기본 구조

1) 문서(Document)에 대한 유형(TYPE)을 선언하는 부분이 제일 위(처음) 선언한다.

<!DOCTYPE> 선언문

ㄱ.  html5 문법을 따르는 문서
<!DOCTYPE html>

ㄴ. HTML 4.01 Transitional 문법을 따른 문서
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ㄷ. XHTML 1.0 Transitional = XML 1.0 + HTML 4.01 Transitional 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!doctype html> 대소 문자 구분 X          선언문은 대문자 사용 권장.

2) html 문서의 시작 과 끝 : html 태그

<html>  소문자 권장.

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

<body>

</body>

</html>

3) html 요소의 내용( content ) - 자식 태그

ㄱ) 필수 자식 태그 : body 태그 - html 문서의 보여지는 부분은 body ~ /body 안에 코딩.

ㄴ) X head 태그 - html 문서에 대한 여러가지 정보(메타 정보)를 나타내는 태그

ㄴ title 태그 - html문서의 제목을 지정하는 태그

브라우저의 제목표시줄 또는 페이지탭에 표시된다.

ㄴ meta 태그 - 종료태그 X

- 메타 정보를 나타내는 요소

- charset = "UTF-8" = 브라우저에게 utf-8 로 읽으라는 얘기(디코딩하라는)

element : <시작태그 속성="??"> content </종료태그>

속성(attribute)

- 시작 태그 안에 속성( attribute ) : 해당 요소의 추가적인 정보를 제공하기 위해 사용된다.

- 속성 형식

<시작태그 []속성명="속성값" ] 속성명='속성값' 속성명=속성값 속성명(속성명과 속성값이 같을경우 속성값 지워도됨) >

// 쌍따옴표가 원칙!

     <select name="" id="">
     	<option value=""></option>
     	<option value="" selected="selected"></option>
     	<option value=""></option>
     </select>

h태그

<body>
   <!-- h$*6>{홍길동} -->
   <h1>홍길동 - 머리글줄의 텍스트</h1>
   <h2>홍길동 - [h]eading </h2>
   <h3>홍길동 - 블럭모드</h3>
   <h4>홍길동 - h1~6</h4>
   <h5>홍길동 - 종료태그 O</h5>
   <h6>홍길동</h6>
   <!-- 
   https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
    -->
   
   koxo.com
</body>

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day6] HTML 6 - div 페이지, 반응형웹, form, canvas,svg, 멀티미디어, youtube (0)	2022.11.10
[Day5] HTML 5 - 홈메뉴, button, div float, media, iframe, head tag, 반응형 웹, 이모티콘, 시맨틱 태그, 규칙, form, select, option, get, post (0)	2022.11.08
[Day4] HTML 4 - ul,li, div, jquery, emmet (0)	2022.11.07
[Day3] HTML 3 - 이미지, 이미지맵, picture, favicon,table (0)	2022.11.07
[Day2] HTML 2 - 여러가지 태그 (0)	2022.11.06

[Day1] HTML 1 - 개요, HTML 요소, 속성 (태그)

[Day1] HTML 1 [11/2]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day1] HTML 1 [11/2]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바