웹표준 - HTML

웹표준 - HTML

 

클라이언트(사용자) - 요청하는 쪽 ex(URL요청)

URL : http://cafe.naver.com(도메인):80(포트번호)/bitcampjr201806(요청경로)

 

서버(제공자) : 응답하는 쪽

웹 :클라이언트가 서버에 요청하면 요청을 응답하여 웹페이지를 제공하는 장소

클라이언트가 요청한 HTML(CSS,JS) 코드를 사용자에게 제공

요청에 따라서 TEXT, XML, JSON...(요청)를 파싱(브라우져가 읽을 수 있게)해서 제공

 

브라우져 - 서버가 제공한 코드를 화면으로 보여줌

 

클라이언트 프로그램

- 클라인트에서 실행되는 프로그램

- HTML 요소 생성, 자바스크립트로 요소를 부여

- 웹 브라우저에서 작용

 

서버 프로그램

- 서버에서 실행되는 프로그램

- 클라이언트의 요청에 따라 적절한 파일과 데이터를 제공

- 자바, C# , 루비, 파이썬 , 자바스크립트, ....

- MVC 프레임워크 

 

HTML5 - 마크업 언어

마크업 : 대상이 화면에 어떻게 보일지 나타내기 위해 사용하는 문자

         HTML로 페이지의 구조, 요소를 프로그래밍 하는 것

 

CSS -

- HTML 웹 페이지의 스타일을 지정할 때 사용되는 언어

 

JAVASCRIPT

- HTML 페이지에서 사용자 반응 등을 처리하는데 사용

 

HTML5 기본 용어

1) 태그 - 요소를 만들 때 사용하는 기호 (의미를 부여한다, 브라우져가 해석할 수 있게)

2) 요소 - 제목, 본문, 이미지 등 HTML 페이지에 존재하는 것 

3) 속성 - 태그에 추가 정보를 부여 할 때 사용

 

 

 

 

- 태그

1) html 태그 

 - 모든 html 페이지의 기본 요소 

 - lang 속성 입력가능, html lang = “ko” - 한국어

2) head 태그

 - body 태그에 필요한 스타일시트, 자바스크립트를 제공하는데 사용 + meta, title 태그사용

 - meta, title, script, link, style, base ...

 - 웹 페이지에 추가 정보 전달, 제목지정, 스크립트 추가, 다른 파일 추가, 스타일시트 추가

3) body 태그

 - 사용자에게 실제로 보여주는 부분

 

CSS 기본 작성법

1) 내부 스타일시트

 - HTML문서 안에 style을 직접 지정

 - 스타일시트를 손쉽게 사용할 수 있는 방법

2) 외부 스타일 시트

 - link 태그의 href 속성을 통해 HTML 페이지로 불러옴

 - 프로젝트의 규모가 큰 경우

 - <link rel = “stylesheet” href=‘Style.css (경로)“ />

 

자바스크립트 기본 작성법

 1) 내부 자바 스크립트 :

 - HTML 페이지 내부에 자바 스크립트 코드를 바로 입력

 - script 태그 사용

 2) 외부 자바 스크립트

 - script 태그의 src 속성에 파일의 경로를 입력

 

HTML 기본태그 - body태그 안

1) 글자태그

 • 제목 글자 태그 : 문서의 제목을 표현할 때 사용

  - <h1>, <h2> ,...<h6> : 첫 번째 ~ 여섯번째로 큰 제목 글자 태그 ( block 속성)

  - &nbsp; : 공백 

  - &lt : <  

  - &gt : >

  - &amp; : &

 

• 본문태그 : 제목 다음에 나오는 본문 입력시 사용

 - <p> : 본문 글자 태그 (inline 속성)

 - <br> : 개행 태그, 다른 글자 내부에 삽입 가능하며 단일로 구성가능 (br/)

 - <hr> : 수평 줄 태그, 다른 글자 내부에 삽입 불가능

 

• 하이퍼링크 태그 : 사용자의 선택에 따라 관련된 특정 정보로 이동가능하게 조직된 문서

 - <a> : 하이퍼링크 태그, 다른 웹 페이지나 웹페이지 내부의 특정 위치로 이동

 - <a>태그의 href 속성 : 어떤 페이지로 이동할지 웹 브라우저에 알려줌 (경로지정)

 ▶ href 속성의 여러 경로

 1) 절대 경로 - 현재 웹 페이지의 위치 상관없이, 웹 페이지, 파일의 위치를 나타내는 경로 

 2) 상대 경로 - 현재 웹 페이지의 위치에 따라 결정되는 웹페이지, 파일의 경로

 3) 아이디 경로 - 현재 웹 페이지 내부에 있는 다른 태그의 ID 속성

 4) 메일 경로 - 메일주소

 

• 글자 형식 태그

- <b> : 굵은 글자 태그

- <i> : 기울어진 글자 태그

- <small> : 작은 글자 태그

- <sub> : 아래 첨자 태그

- <sup> : 위 첨자 태그

- <ins> : 밑줄 글자 태그

--> ....등 스타일을 통해서 변경 할 수 있다. (굳이 외울 필요가 없다.)

 

• 목록 태그 

- 네비게이션 목록 제작할때 주로 사용 (수평방향)

- <ul> : 순서가 없는 리스트 태그 (block 속성)

- <ol> : 순서가 있는 리스트 태그 (block 속성)

- <li> : <ul>, <ol>에서 사용하는 리스트 태그 (block (속성 불릿을 제외한 block영역))

 

 

• 테이블 태그

- <table> : 표를 감싸는 태그

- <tr> : 표의 행 (표의 가로줄)

- <th> : 표의 제목 (<td>의 제목을 의미)

- <td> : 표의 셀 

<tr1><th>	<th>	<th>
<tr2><td>	<td>	<td>
<tr3><td>	<td>	<td>
<tr4><td>	<td>	<td>

▶ colspan과 rowspan속성

- colspan (열 합치기) : 세로 합치기 ↓

- rowspan (행 합치기) : 가로 합치기 →

 

•이미지 태그

- <img> : 이미지를 나타내는데 사용되는 태그 

- 속성 :  src, alt, width, height

- src - 이미지의 경로 지정

- alt - 이미지가 없을 때 나오는 글자 지정

- width - 이미지의 너비 지정

- height - 이미지의 높이 지정

 

• 공간 분할 태그 : CSS로 원하는 레이아웃을 구성하기 위해 사용

- <div> : 공간을 블록 형식으로 분할 (block)

- <span> : 공간을 인라인 형식으로 분할 (inline)

▶ 블록 형식과 인라인 형식의 태그

1) 블록 형식 태그 : <div>, <h1> ~ <h6>, <p>, <ol,ul,li> , <table>, <form>

2) 인라인 형식 태그 : <span>, <a>, <input>, 글자 형식 태그( <b>, <i> ...)

 

• 입력 양식 태그 : 클라이언트가 서버로 데이터를 보내는 가장 기본적인 방법 

- <form> : 입력 양식의 시작과 끝 표시  속성 - action, method

  action  - 전송 위치 (데이터를 전달할 목적지)

  method - 전송 방식 (GET/POST)

▶GET방식 / POST방식 

 - GET : 주소에 데이터를 직접 입력해 전달한다.

 - POST : 별도의 방법을 사용해 데이터를 해당 주소로 전달한다.

 

 -hidden : 해당 값을 필요로하지만 사용자에게 보여지지않게 하고 싶을 경우에 사용