[HTML] 공부 정리 자료 공유

처음 개발 공부를 시작했을 때, 혼자 보기도하고 같이 공부했던 분들한테 공유하기 위해서 정리한 자료인데
누군가에게 또 도움이 되지 않을까싶어서 정리했던 자료들을 올려보려고 합니다 :)
예전에 공부했던 자료라 지금과는 다를 수 있어서 그 부분 참고하셔서 봐주세요!!

단축키

▶ Window

Ctrl + Alt + ↑, ↓

다중커서

▶ Mac (개인 설정)

Option + Command + ↑, ↓

다중커서

▶ 서버와 클라이언트

클라이언트 : 서버에게 요청해주는 대상

서버 : 요청받은 서비스를 응답해주는 대상

▶ 웹(Web)

요청과 응답이 일어나는 장소

▶ 웹 브라우저(Web Browser)

사용자의 요청에 맞는 주소로 찾아가서 인터넷의 컨텐츠(문서와 그림, 멀티미디어 파일 등)를

검색 및 열람 후 사용자에게 응답하기 위한 응용 프로그램의 총칭이다.

1. 실제경로 ⇒ 사용x, 보안

2. 사용자정의 경로

응답은 항상 정적인 데이터 html

▶ 프로토콜(protocol) : 통신규약

사용자의 요청에 반드시 응답하도록 약속한다.

1. http://(Hypertext Transfer Protocol)

클라이언트와 서버 간의 웹 페이지 등의 자원을 통신하는 규약

텍스트로 통신하기 때문에 가로채어 본다면 누구든 내용을 볼 수 있다.

2. https://(Hypertext Transfer Protocol Secure Socket)

SSL(Secure Socket Layer) 프로토콜을 이용하여 자원을 공개키 암호화 방식으로 암호화해서 통신하는 규약

▶ IP(Internet Protocol)

사람이 태어나면 출생 신고를 하고 고유번호인 주민번호를 발급받는다. 이를 통해 서로를 구분하듯인 네트워크 상에서 인터넷에 접속할 때 다른 컴퓨터와 구별될 수 있도록 하는 고유번호를 IP 주소라고 한다. 클라이언트가 찾아갈 서버의 고유한 값, 컴퓨터가 컴퓨터를 찾을 때 쓰는 고유한 값

▶ 도메인(Domain)

IP 주소는 기억하고 이해하기 힘들기 때문에 이를 위해서 이름을 부여할 수 있도록 한 것. 도메인을 통해 IP 주소를 검색할 수 있으며, 이러한 서비스를 제공하는 것을 DNS(Domain Naming Service) 라고 한다.

▶ WWW(World Wide Web)

인터넷에 연결된 전 세계 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 정보 공간.

▶ W3C(더블유삼씨)

WWW를 위한 표준을 제정하고 관리하는 중립적인 기관이다.

▶ 웹 접근성

모든 사용자가 신체적, 환경적 조건에 관계 없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 의미한다. 마우스가 없는 환경이나 키보드만을 조작해야 할 경우, 신체적 장애로 인해 특수한 환경 하에 접속을 해야되는 경우, 브라우저별, 모바일 환경에서 접속해야 되는 경우와 같이 다양한 플랫폼에서도 정보 제공에 다름이 없어야 한다는 것이다.

▶ 웹 표준(Web Standard)

웹에서 표준으로 사용되는 기술이나 규칙을 의미하며, 이는 특정 브라우저에서만 사용되는

비표준화된 기술을 배제하고 W3C의 토론을 통해 나온 권고안을 사용하는 것을 말한다.

웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다.

1. HTML(Hypertext Markup Language)

웹 페이지에서 다른 페이지로 이동할 수 있도록 해주는 마크업 언어이다.

마크업 언어란 태그 방법 체계를 의미하며, 태그 등을 이용하여 문서나 데이터의 구조를

기술하는 언어이다. HTML의 역할은 정보 및 내용이다.

2. CSS(Cascading Style Sheets)

구체적으로 어떤 스타일로 요소가 표시되는 지를 정하는 규격이다.

HTML은 문서를 구조화(레이아웃)하는 것 뿐만 아니라 꾸미기도 할 수 있지만,

동일한 디자인을 사용한 문서가 여러 개 있다면, 변경 시 모두 하나씩 수정해야 한다.

따라서 CSS는 이런 문제를 해결함과 동시에 웹 페이지에서 내용과 스타일을 분리하고

역할도 분리해준다.

3. JS(Javascript)

화면 쪽에서 연산이 가능한 스크립트 언어이다.

사용자의 다양한 이벤트 처리, 비동기 통신 등을 자유롭게 사용할 수 있다.

HTML안에서 태그 형태로 JS를 사용할 수도 있으며, 외부 파일로 제작 후

포함시켜 사용할 수도 있다. 유효성 검사, 통신 등을 담당한다.

4. XHTML(Extensible HTML)

기존에 사용되던 HTML 규격이 가진 문제점을 극복하고 보다 다양한 분야에 응용될 수 있도록 해주는 여러가지 확장된 기능을 포함한다. 하지만 XML기반으로 만들어졌기 때문에 지원되지 않는 브라우저도 있다. 따라서 HTML과 XHTML은 사실상 큰 차이 없이 사용된다.

5. XML(Extensible Markup Language)

어떠한 데이터를 설명하기 위해서 임의로 지은 태그로 데이터를 감싼다. 태그로 데이터를 설명하며, 이것이 데이터의 표시(Markup)가 되고 추가적인 데이터가 생기면 태그 추가와 태그 내부 내용 추가를 할 수 있다. 따라서 데이터 전달에 목적이 있다.

[XML]

<?xml version="1.0>

<user>

</user>

[JSON]

{"userId": "hds1234", "name": "한동석"}

[JAVA]

public class User{

String userId;

String name;

}

▶ 서버 설치(Tomcat)

구글에 tomcat 검색

> download 페이지 접속(https://tomcat.apache.org/download-10.cgi)

> Tomcat 9 클릭

> (사양에 맞게) 64-bit Windows zip 클릭

(맥인 경우) tar.gz 다운로드

> 다운로드 후 C드라이브에 압축 해제

> bin/startup.bat 실행

> localhost:8080 접속 성공하면 연결 완료

* 만약 아이디, 비밀번호 입력 박스가 뜬다면, 사용하고 있는 port 번호이기 때문에 수정해야함.

수정 방법

C:\apache-tomcat-9.0.60\conf 에서 server.xml 편집

> 아래의 코드 찾기

-->

<Connector port="8085" protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443" />

> port 번호를 8081~65535 사이 값으로 변경.

> C:\apache-tomcat-9.0.60\bin\startup.bat 실행

> 만약 실행 안되면, JDK 환경변수 다시 확인

> 실행 후 브라우저 실행

> localhost:포트번호 > 엔터 > 고양이 나오면 성공!

▶ 이클립스와 서버 연동

perspective는 JAVAEE(default)로 설정

> window

> preferences

> server 검색

> Server and Runtime > Tomcat v9.0 Server 선택 > Apply

> Runtime Environments > Add 클릭 > Apache Tomcat 9.0 선택 > Next > Tomcat installation directory > C:\apache-tomcat-9.0.65 > Apply and Close

> Server 탭에서 "No .... " 링크 클릭 > Tomcat 9.0으로 선택 후 Finish

> 등록한 Tomcat 서버 클릭 후 우측 재생 버튼 클릭

▶ HTML

HTML의 요소

<p> You are better </p>

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

(1) (2) (3)

(1) 여는 태그(Opening Tag) : 요소의 이름(p)과 열고 닫는 꺽쇠 괄호로 구성된다.

(2) 내용(Content) : 요소의 내용이며, 단순한 텍스트를 의미한다.

(3) 닫는 태그(Closing Tag) : 요소의 이름 앞에 슬래시(/)가 있으며, 여는 태그의 끝맺음을 의미한다.

(1), (2), (3)을 통틀어 요소(Element)라고 한다. 요소(태그)의 이름은 대소문자를 구분하지 않지만 가독성에 있어서 소문자로만 작성하는 것을 권장한다(XHTML).

HTML 주석

: (Windows) Ctrl + Shift + /, (Mac) Ctrl + Option + /

속성(Attributes)

요소(태그)는 속성을 가질 수 있다.

<p class="conversation"> You are much better </p>

속성은 요소에 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용한다. 특히 id와 class속성은 스타일에 관련된 내용이나 기타 연산등의 내용을 위해 해당 태그를 찾을 수 있는 구분점 역할을 수행한다.

- 속성 사용 시 주의사항

1) 태그 이름 다음에 오는 속성은 태그 이름과 속성 사이에 공백이 있어야 하고, 여러 속성이 있을 경우에는 속성 사이에도 공백이 있어야 한다.

<p class="conversation" id="message"> You are much better </p>

2) 속성이름 다음에는 등호(=)를 작성한다.

3) 속성 값은 따옴표 안에 작성한다(따옴표는 생략하여도 된다).

내포된 요소(Nesting elements)

요소 안에 다른 요소를 넣는 기법.

해당 부분에 다른 스타일 또는 다른 연산, 레이아웃 등을 적용하고자 할 때 사용한다.

<p> You are <strong>much</strong> better </p>

HTML 주의사항

1) HTML은 대소문자를 구분하지 않지만 되도록 소문자로 작성한다.

2) 속성의 값은 따옴표를 사용하지 않아도 되는 경우가 있지만,

띄어쓰기가 있을 경우 반드시 따옴표를 작성한다.

3) HTML에서 작은 따옴표와 큰 따옴표는 둘 다 같은 의미이다.

▶ 서식 태그

<strong>, <b> 태그

두 태그의 표현은 동일하지만 사용 용도가 다르다.

<b> 태그는 단순히 텍스트를 진하게 표시하는 역할을 하지만,

<strong>태그는 강조 뿐만 아니라 실제 페이지 내에서 중요한 부분을 브라우저에게

알려주는 역할을 한다. 브라우저에서 웹 접근성으로 인식되며, 스크린 리터로 페이지를 읽을 때 거센 억양으로 음을 낼 수 있도록 강조한다.

<i>, <em> 태그 : 글씨 기울이기

<i> 태그는 단순히 화면의 텍스트를 이태릭채로 표현해주지만,

<em>태그는 그 내용이 중요하다는 의미도 함께 포함해준다.

<mark> 태그

텍스트 하이라이팅 효과

<del> 태그

텍스트 중앙에 가로 줄을 그어서 텍스트를 지운 것과 같은 효과

<ins> 태그

텍스트 밑에 선을 추가하여 텍스트 강조 효과

<sup>, <sub> 태그

위 첨자, 아래 첨자

<q> 태그

“ ”로 감싸는 태그

<br>

줄바꿈

▶ html 특수코드

내용을 명령어로 인식하지 못하도록 하는 문법

<	< (less than)
>	> (greater than)
&	& (ampersand)
"	" (quotation)
공백

▶ <p> 태그

글 단락 태그

단락이란, 내용 상 끊어서 구분할 수 있는 하나하나의 부분을 의미하고, 문단이라고 부른다. <p> 태그를 이용하면 이러한 단락을 표현한다.

▶ 리스트 태그

1. 순서 없는 리스트

<ul>태그 안에 <li>태그 사용

ul : unordered list

2. 순서 있는 리스트

<ol>태그 안에 <li>태그 사용

ol : ordered list

- type 값의 종류

1 : 숫자(1, 2, 3, ...)

a : 알파벳 소문자

A : 알파벳 대문자

i : 로마 숫자(i, ii, iii, ...)

I : 로마 숫자(I, II, III, ...)

- start

시작 숫자 지정, 숫자로 지정해야한다.

- value

원하는 값으로 지정

- ul과 li의 공통 속성

style="list-style: ";

▶ 링크 태그

HTML 링크(Link)

현재 페이지에서 다른 페이지로 이동하고자 할 때 하이퍼링크를 사용한다.

보통 링크라고 부르며, <a> 태그를 사용한.

- href : 페이지의 경로, 사이트 주소

- target: _blank(새 창이나 새 탭), _self(현재 창), _parent(부모 창)

▶ 테이블(table)

여러 종류의 데이터가 행과 열로 정리된 표

<table> : 테이블 생성 시 사용하는 태

<tr> : 행

<th>, <td> : 열

- 사용방법

- 병합

1) colspan = "합칠 열 개수"

좌에서 우로 합쳐지고 현재 행에만 적용

2) rowspan = "합칠 행 개수"

현재 행과 아래 행이 합쳐지고 다음 행이 없으면 적용 안됨.

form 태그

웹 페이지 내에서 사용자로부터 입력을 받을 때 사용하는 태그

사용자가 입력한 데이터를 다른 페이지로 전송할 때 form태그를 사용한다.

입력 태그

...

</form>

- action : 데이터를 전송할 페이지의 경로(생략 시 현재 페이지)

- method : 데이터를 전송하는 방식(생략 시 get)

- name : form 태그의 이름을 설정(생략 시 이름 없음)

input 태그

입력받기 위해 사용되는 태그,

데이터를 지정하여 전달할 때 사용하는 태그

input 태그에서 사용할 수 있는 속성

type : 입력 종류를 설정

name : value의 key값

value : 사용자가 입력한 값(입력 전 미리 값을 넣어줄 수도 있다).

placeholder : 값을 아니지만 미리 출력해줄 문구를 작성할 수 있다.

readonly : 수정할 수 없도록 하는 설정

required : 필수 항목

maxlength : 글자 수 제한

input 태그의 type 속성

*text : 텍스트 입력(작성한 텍스트가 눈으로 보임)

*password : 텍스트 입력(작성한 텍스트가 눈으로 안보임)

*radio : 여러 개 중 하나의 옵션만 선택 가능

*checkbox : 여러 개 중 다수의 옵션 선택 가능

*file : 파일 전송(첨부파일 업로드)

color : 색상 선택

email : 이메일 입력(골뱅이 포함 입력)

url : http://로 입력

tel : 핸드폰 번호 입력

*date : 날짜 입력(브라우저 별로 캘린더의 스타일은 다를 수 있다)

number, min, max, step : 숫자 입력

range : 일정 범위 안의 값만 입력

search : 검색어 입력

*button, submit, reset : 버튼, 전송, 초기화

선택 입력

select 태그는 여러 개의 옵션이 드롭다운 리스트로 되어 있으며,

그 중 단 하나의 옵션만을 입력받을 수 있다.

<option value="">사용자에게 보여질 값</option>

...

</select>

문장 입력

textarea 요소는 사용자로부터 여러 줄의 텍스트를 입력받을 수 있다.

fieldset

fieldset 요소는 관련있는 폼 필드 세트를 표시한다.

form 필드 세트는 form 내에서 관련 태그를 하나의 그룹으로 묶은 것을 의미한다.

legend

fieldset 요소의 제목을 표시

묶음에 대한 설명을 할 때 사용한다.

▶ tip

[이클립스] html 파일에 코드 쓰는데 자동완성이 제대로 안 될 때 Tip

[이클립스] Emmet(Zen Coding) 설정하기 ※ JSP 설정 추가

HTML.pdf

0.34MB

저작자표시 (새창열림)

'HTML' 카테고리의 다른 글

[WBE2]DAY3_단락태그, 서식태그, 리스트태그 (0)	2020.05.13
[WBE2]DAY2_WWW, W3C, 웹 표준, 웹 접근성 개념, HTML(HTML 개념, 단락태그) (0)	2020.04.27
[WEB2]DAY1_JSP의 시작 (0)	2020.04.27