[LG유레카]Ⅰ.HTML

2024-07-01 8 분 소요

HTML

HTML은 Hypertext Markup Language의 약자.
1990년도 이후 웹(web, World Wide Web)에서 사용하는 문서 양식
문서에 하이퍼 텍스트,표, 목록, 비디오 등을 포함 할 수 잇는 tag를 사용
문서를 Web Browser에 표현할 때 tag를 사용
- tag의 종류
  - 시작태그
    
    ex) <table>
  - 끝태그
    
    ex) </table>
  - 빈태그
    
    ex) <br></br> ➡️ <br/>
- 태그와 엘리먼트(element)의 차이점
  
  table 태그 ➡️ <table>
  
  table 엘리먼트 ➡️
```
<table>
    <tr>
    	<td>내용</td>
    </tr>
</table>
```
  이렇게 자식 태그까지 포함한 것을 엘리먼트. 즉, 요소라고 말할 수 있다.

개발 배경

수많은 플러그인들로 인한 Browser간의 부작용을 막기 위해 개발.
HTML5개발 단계
- 익스플로러 독점
- 익스플로러에 맞는 많은 플러그인 개발
- 거대해져가는 브라우저 및 보안 취약점 발생
- MS를 제외한 회사들이 HTML표준안을 W3C에 제시
- HTML 표준안 무시
- 무시당한 회사들이 Web Application1.0개발
- W3C에서 XHTML2.0개발
- XHTML2.0 쇠퇴
- W3C에서 Web Application 1.0을 웹 표준안으로 수용.
- Web Application 1.0을 HTML5로 계명.
- 2014년 HTML5로 정식 배포.

기존의 Web Browser에 많은 플러그인이 설치되면서 많은 문제점이 발생했고, 이를 해결하기 위한 방안으로 W3C에서 Web Application1.0을 HTML5로 수용. 2014년에 정식으로 배포되었으며, 계속 업그레이드되고 있다.

웹표준

모든 브라우저에서 웹서비스가 정상적으로 보여질 수 있도록 하는 것.
W3C(World Web Consertium)
- 월드와이드웹(www)의 창시자인 팀 버너스 리를 중심으로 창립된 월드와이드웹 컨소시엄
W3C에서 HTML5를 웹 표준으로 권고하고 웹 브라우저는 이를 따름

특징

HTML5는 지금도 개발 중에 있고, 다양한 기능이 추가됨
멀티미디어 요소 재생
- 과거 브라우저는 멀티미디어를 재생하기 위해 별도의 외부 플러그인을 사용해야 했으나, HTML5에서는 멀티미디어 요소를 별도의 플러그인 없이도 재생가능
서버와 통신
- 서버와 클라이언트 사이에 소켓 통신이 가능
Semantic tag 추가
- 웹사이트를 검색엔진이 좀더 빠르게 검색할 수 있도록 하기 위해 특정 tag에 의미를 부여하는 방식.

문서구조

tag는 현재 문서가 HTML문서임을 정의
시작tag(<tagname>)와 종료 tag(</tagname>)가 있으며, tag사이에 문서 내용을 정의
각 tag는 고유의 의미를 가지고 있으며, Web Browser는 이 의미에 따라 문서를 화면에 표신

Web & HTML 작동원리

서버는 클라이언트의 요청 내용을 분석하여 결과값을 HTML로 전송.
서버는 결과값을 전송한 후 클라이언트와 연결 종료.
클라이언트는 서버로부터 전달받은 HTML을 Web Browser에 표시
각 Web Browser는 브라우저 엔진이 내장되어 있고, 이 엔진이 tag를 해석하여 화면에 표현.

CRS - Client Side Renderin

SSR - Server Side Rendering

HTML

웹 문서를 구성하는 3가지 요소

HTML은 마크업 언어(markup language)로 웹 문서를 작성하며, tag를 사용하여 문서의 구조 등을 기술하는 언어

tag와 속성

attribute

name

value

HTML 문서는 tag로 만들어진다.
HTML문서의 전체 구성은 html, head,body tag로 구성.
tag는 시작 tag와 종료tag로 쌍을 이루거나 시작 tag만 존재하는 tag도 있다.
시작 tag와 종료 tag는 /로 구분하며 중첩되지 않도록 한다.
각각의 tag는 속성과 속성 값이 존재한다.

HTML tag에는 어는 tag에나 넣어서 사용할 수 있는 글로벌 속성(global attribute)

글로벌 속성	설명
class	tag에 적용할 스타일의 이름을 지정 `ex) <div class="content">...</div>`
dir	내용의 텍스트 방향을 지정. 왼쪽» 오른쪽(기본값, ltr), 오른쪽 » 왼쪽 (rtl), 왼쪽 또는 오른쪽 정렬과 비슷한 형태로 표현. `ex) <p dir="rtl">오른쪽에서 왼쪽으로 표시됨</p>`
id	tag에 유일한 ID를 지정함. 자바스트립트에서 주로 사용 `ex) <input type="text id="userid">`
style	인라인 스타일을 적용하기 위해 사용 `ex) <p style="color:red; text-align:center">빨간색 가운데</p>`
title	tag에 추가 정보를 지정. tag에 마우스 포인터를 위치시킬 경우title값 표시 `ex) <p><abbr title="Web Application Server">WAS</abbr>는...</p>`

주석

주석의 내용은 브라우저에 출력되지 않는다.
HTML tag의 내용을 설명하기 위한 용도로 사용

문서 구성 요소

<html> tag는 HTML문서 전체를 정의.

Head<head>...</head>와 Body<Body>...</Body>로 구성

<head> tag는 브라우저에게 HTML문서의 머리 부분임을 인식.
<title>,<meta>,<style>,<link> tag를 포함 가능.
<title> tag는 문서의 제목을 의미, 브라우저의 제목 표시줄에 tag내용이 나타남.
<title> tag 이외의 다른 tag로 표현한 정보는 화면에 출력 X.
문서의 작성자, 날짜, 키워드 등 브라우저의 본문에 나타나지 않는 일반 정보를 나타냄
name과 content속성을 이용하여 다양한 정보를 나타냄
http-equiv속성을 이용하여 문서 이동 및 새로 고침이 가능
charset속성을 이용하여 문서의 인코딩 정보를 설정
Web Browser에 보여질 문서의 내용을 작성
<head> tag 다음에 위치하고 <head> 내부에 위치하는 tag와 <html>을 제외한 모든 tag.
id 속성을 이요하여 문서 내에서 tag를 유일하게 식별 가능(id속성은 중복❌)
class 속성을 이용하여 여러 tag에 공통적인 특성(CSS)를 부여(class속성은 중복⭕)
문단의 제목을 지정할 때 사용. <h1>부터<h6>까지 구분

➡️숫자가 커질 수록 글자는 작아 짐.
<section>tag를 이용하면 같은 tag를 서로 다르게 표현
문서 구조를<section>tag를 이용하여 구분하면 각 문단의 제목을 하나의 tag로 작성가능

특수문자

엔티티 이름	설명	화면 출력
\	Non-breaking space(공백)
\<	Less than	<
\>	Greater than	>
\&	Ampersand	\&
\"	Quotation mark	”
\&copyl	Copyright	©
\®	registered tradmark	®

시작태그와 끝 태그 사이에 들어가는 것들을 우리는 content라고한다.

포맷팅

포맷팅 요소에서는 화면에 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있다.

ex) <b>와 <strong>은 모두 텍스트를 굴게 표현하지만, <strong>요소는 텍스트를 강조

tag 명	설명
<abbr>	생략된 약어 표시, Title 속성을 함께 사용
<address>	연락처 정보 표시
<blockquote>	긴 인용문구 표시, 좌우로 들여쓰기가 됨
<q>	짧은 인용문구 표시, 좌우로 따옴표가 붙음
<cite>	웹 문서나 포스트에서 참고 내용 표시.
<pre>	공백, 줄 바꿈 등 입력된 그대로 화면에 표시
<code>	컴퓨터 인식을 위한 소스 코드.
<mark>	특정 문자열을 강조. 화면에는 하이라이팅 됨
<hr>	구분선
<b>, <strong>	굵은 글씨로 표시, 특정 문자열을 강조
<i>, <em>	이텔릭(기울게) 표시, 특정 문자열을 강조
<big>, <small>	큰 글자, 작은 글자로 표시
<sup>, <sub>	위 첨자, 아래 첨자로 표시
<s>, <u>	취소선, 밑줄

기본태그

목록 tag는 하나 이상의 하위 tag를 포함
목록 tag는 각 항목을 들여쓰기로 표현
번호 또는 심볼을 이용해서 목록을 표현

tag 명	설명
<ul>	번호 없는 목록을 표시. 항복 앞에 심볼을 표시
<ol>	번호 있는 목록을 표시. 숫자, 알파벳, 로마 숫자 등으로 표시
<li>	목록 항목<ul>이나 <ol> tag하위에서 사용
<di>	용어 정의와 설명에 대한 내용을 목록화 해서 표시
<dt>	용어 목록의 정의 부분을 나타냄
<dd>	용어 목록의 설명 부분을 나타냄

ol 태그 속성
- type
  - 1 : 숫자(기본 값)
  - a : 영문 소문자
  - A: 영문 대문지
  - i: 로마숫자 소문자
  - I: 로마숫자 대문자
- start
  - 숫자: 시작 번호
- reversed
  - 역순으로 표시

ul>li

table

HTML table모델은 데이터를 행(Row)과 열(Column)의 셀(Cell)에 표시.
행 그룹요소인 <thead>, <tbody>요소를 사용하여 행들을 그룹화
<colgroup>과 <col>요소는 열 그룹을 위한 추가적인 구조정보를 제공.
tabke의 셸(Cell)은 머리글 (<th>)이나 데이터(<td>)를 가질 수 있음.

<table>
   <caption>[[insert Title]]</caption> 
   <thead>
    	<tr>
       		<th>title1</th>
            <th>title2</th>
            <th>title3</th>
       </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
        	<td>data4</td>
            <td>data5</td>
            <td>data6</td>
        </tr>
    </tbody>
</table>

<table>, <tr>, <td> tag에는 table에 스타일을 적용하는 다양한 속성들이 있다.
frame 속성은 table의 특정 선을 보여줄지를 결정하며, rules 속성은 셀과 셀사이의 줄이 나타날 것인가를 지정
table정렬을 위한 align속성, background, bgcolor, border속성 등이 있음
HTML5부터는 이러한 속성들을 더 이상 지원하지 않는다. 스타일은 CSS를 사용하여 적용.
<caption>tag는 table 제목을 정의하기 위해 사용하며 <table>start tag 바로 뒤에 위치.
<caption> tag는 table당 하나만 사용
table 제목은 기본적으로 가운데 정렬, 정렬 방식 변경은 CSS를 사용
table행 그룹요소는 table의 행들을 머리글, 바닥글, 하나 이상의 복체 항목으로 그룹핑
행 그룹 요소에는 머리글<thead>, 본체항목<tbody>, 바닥글<tfoot> 요소가 있다.
각 행 그룹은 최소 하나 이상의 <tr>을 가져야 함
table열 그룹 요소는 table내에서 구조적인 분리를 가능하게 함.
<colgroup>요소는 명시적인 열 그룹을 만들며, <col>요소는 열(column)을 묶어 그룹핑함.
<colgroup>요소는 span 속성은 열 그룹에서 열의 개수를 저으이

<col>요소의 span 속성은 <col>에 의해 묶여진 열의 개수를 말함.

<table>
    <colgroup>
    	<col span="2" style="background-color: sktblue">
        <col width="200">
    </colgroup>
    <tr>
    	<th>No</th><th>강좌명</th><th>가격</th>
    </tr>
    <tr>
    	<td>1</td><td>HTML&CSS3</td><td>25000원</td>
    </tr>
    <tr>
    	<td>2</td><td>Spring Framework</td><td>47000원</td>
    </tr>
</table>

cellspacing은 table Cell과 Cell사이의 공간을 의미
cellpadding은 Cell외곽과 Cell컨텐츠 사이의 공간을 의미
HTML5 부터는 테두리 스타일 관련 속성을 지원하지 않고, CSS를 사용.

HTML table<td>요소에는 셀(Cell)을 병합하기 위한 두개의 속성이 있음.
colspan속성은 두 개 이상의 열(Column)을 하나로 합치기 위해 사용
rowspan속성은 두 개 이상의 행(Row)을 하나로 합치기 위해 사용

img

<img>tag를 사용하여 이미지를 삽입하기 위해 사용
src속성은 이미지 경로를 지정하기 위해 사용(상대경로, URL 모두 가능)
height, width 속성은 이미지 사이즈를 지정하기 위해 사용.
alt 속성은 이미지를 표시할 수 없을 때 화면에 대신하여 보여질 텍스트를 지정

<img src="이미지 경로/이미지이름.png" title="이미지"width="300" height="300" alt="이미지업로드">
<figure>는 설명 글을 붙여야 할 대상을 지정
<figcaption>: 설명 글이 필요한 대상은<figure> 태그로 묶고 설명 글은 <figcaption>태그로 묶는다.
설명 글을 붙일 수 있는 대상은 이미지나 오디오, 비디오 같은 미디어 파일이나 텍스트 단락이나 표.

링크요소 anchor⭐

<a>tag를 사용하며, 하나의 문서에서 다른 문서로 연결하기 위해 하이퍼링크 사용
tag를 서로 중첩해서 사용할 수 없다.
href속성은 하이퍼링크를 클릭했을 때 이동할 문서의 URL이나 문서의 책갈피를 지정.
target 속성은 하이퍼 링크를 클릭했을 때 현재 윈도우 또는 새로운 윈도우에서 이동할지를 지정.

자바스크립트 사용

a태그를 사용해 자바스크립트를 실행하려면
 <a href="javascript:ureca()">눌러주세요</a>
이렇게 작성해준다.

속성 값	설명
_blank	링크 내용이 새 창이나 새 탭에서 열린다.
_self	target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
_parent	프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
_top	프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체화면으로 표시

같은 페이지 안에서 특정 요소를 클릭시 그 위치로 한 번에 이동시킨다.
<tag id="anchor name">text or image</tag>
<a href="#anchor name">text or image</a>

링크요소 link

link tag를 사용하며 문서와 외부 자원을 연결하기 위해 사용
<head> 위치에 정의하며 여러 자원을 연결할 수 있다.
rel 속성은 현재 문서와 연결된 문서 사이의 연관관계를 지정하기 위해 사용.
href 속성은 연결된 문서의 위치를 지정하기 위해 사용

iframe

화면의 일부분에 다른 문서를 포함
src속성은 포함시킬 외부 문서의 경로를 기정(상대경로, URL 모두 가능)
height, width 속성은 프레임 사이즈를 지정
name 속성은 프레임의 이름을 지정

form

사용자로부터 데이터를 입력 받아서 서버에서 처리하기 위한 용도로 사용
사용자의 요청에 따라 서버는 HTML form을 전달(회원가입 양식, 검색 양식 등)
사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송. 이를 submit이라고함.
서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 다시 반환함

사용자가 입력하기 위한 control 요소들은 모두<form>tag 하위에 위치해야 서버로 전송됨
각 control요소마다 텍스트 입력, 버튼 클릭 등 다양한 형식으로 입력을 받는다.

tag명	설명
<form>	사용자에게 입력 받을 항목을 정의, form tag내부에 여러 개의 control요소를 포함
<input>	텍스트 box, 체크 box, 라디오 버튼 등 사용자가 데이터를 입력할 수 있도록 함
<textarea>	여러 줄의 문자를 입력할 수 있도록 함.
<button>	버튼을 표시
<select>	select box(dropdown, combo box)를 표시
<optgroup>	select box의 각 항목들을 그룹화 함
<option>	select box의 각 항목들을 정의 함
<label>	마우스를 이용하여<input> 항목을 선택 시 편리함을 제공, for 속성을 이용하여 다른 control 요소와 텍스트를 연결시켜서 더 편리하게 선택할 수 있도록 함
<fieldset>	입력 항목들을 그룹화 함
<legend>	<fieldset>의 제목을 지정 함

사용자가 입력한 자료들을 어떤 방식으로 서버로 전달할 것인지 결정
서버에서 어떤 프로그램을 이용해 처리할 것인지 결정

<form [속성="속성값"]>form control</form>

속성의 종류와 설명

method

사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정

속성값

GET : 주소 표시줄에 사용자가 입력한 내용이 표시 256~2048bytes의 데이터만 서버로 전송

POST: HTTP메시지의 Body에 담아서 정송하기 때문에 전송 내용의 길이에 제한이 없다.

사용자가 입력한 내용이 표시되지 않는다.

name

form의 이름을 지정. 한 문서 안에 여러개의 <form> 태그가 있을 경우, 구분자로 사용

action

<form> 태그 안의 내용들을 처리해 줄 서버상의 프로그램 지정(URL)

target

<action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

autocomplete

자동완성 기능, 기본값 on

form control에 레이블(텍스트)을 연결
사용법

<label [속성="속성값"]>레이블<input...></label>

<label for ="id이름"><input id="id이름"[속성="속성값"]></label>

form 요소를 그룹으로 묶음

<fieldset>
    <legend>
        제목
    </legend>
    <input type="text"/>
    <input type="password"/>
</fieldset>

input

<input>tag는 type속성에 따라 여러 가지 형태로 화면에 표시

id 속성은 여러 번 사용된 폼 요소를 구분하기 위해 사용
id 속성 값은 최소한 한 개 이상의 문자여야 하며 공백은 허용❌
같은 html document에서 id는 하나의 값만 가능하고, name은 중족이 허용된다.

label의 for는 input에 할당된 id를 찾아서 포커스 해준다.

문제 내기 좋은 것들

ul, ol, li

colspan, rowspan

action, method의 의미

Twitter Facebook LinkedIn

Eon's Box

[LG유레카]Ⅰ.HTML

HTML

개발 배경

웹표준

특징

문서구조

Web & HTML 작동원리

HTML

tag와 속성

주석

문서 구성 요소

특수문자

포맷팅

기본태그

table

img

링크요소 anchor⭐

링크요소 link

iframe

form

input

공유하기

댓글남기기

참고

[나채공] Svelte은 무엇일까?

[PEAUTY] 스켈레톤 UI적용

[백준] 3003번 킹, 퀸, 룩, 비숍, 나이트, 폰

[백준] 1316번 그룹 단어 체커