-
HTML
Hyper Text Markup Language 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 링크를 의미
Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능
태그
HTML에서 가장 중요하고 기본이 되는 규칙
<h1>Hello</h1>요소
Element 내용을 포함한 태그 전체
속성
태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값
시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현
여러 속성을 선언할 때는 공백으로 구분해서 사용
<h1 id="title" class="main">Hello, HTML</h1>빈 태그
내용이 없어 종료 태그가 필요하지 않은 빈 태그
- <br>
- <img src="">
- <input type="">
HTML에서의 공백
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시
HTML에서의 주석
<!-- 로 시작표시 --> 표시로 종료 주석은 메모의 목적으로만 사용
<!-- <h1>Hello</h1> -->HTML의 기본 구조
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>Hello, HTML</h1> </body> </html>문서 타입 정의
문서 타입 정의는 보통 DTD(doctype) 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문
<html>요소
<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미
<head> 브라우저 화면에 표시되지 않고 태그 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정
<body> 태그 실제 브라우저 화면에 나타나는 내용
제목 태그
제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그 <h1>~<h6>
<h1>은 해당 페이지를 대표하는 큰 제목으로 주로 사용 숫자가 올라갈수록 조금 더 낮은 수준의 소제목
단락 태그
단락(paragraph) 태그는 paragraph를 줄여서 p
텍스트 표현 태그
- <b> : bold 글자를 굵게 표현하는 태그
- <i> : italic 글자를 기울여서 표현하는 태그
- <u> : underline 글자의 밑줄을 표현하는 태그
- <s> : strike 글자의 중간선을 표현하는 태그
<a> 태그
링크태그 href 속성
링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다.
href 속성의 값은 링크의 목적지가 되는 URL입니다.
<a href="#some-element-id">이동하기</a> <h1 id="some-element-id">이동하기</h1>속성값
_self 현재 화면에 표시, target 속성이 선언되지 않으면 기본적으로 동작
_blank 새로운 창에 표시
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
내부링크
<a>를 통해 페이지 내부의 특정 요소로 초점을 이동
<a href="#some-element-id">회사 소개로 이동하기</a>의미가 없는 컨테이너 요소
<div>, <span>
스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 사용
<div> -block레벨 태그 한 줄 생성해서 표현<span>-inline레벨 태그 한 줄 안에서 표현<ul>
ul(unordered list) 태그 순서가 없는 리스트를 표현할 때 사용
<ul> <li>A</li> <li>B</li> </ul><ol>
ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용
<ol> <li>1</li> <li>2</li> </ol><dl>태그
<dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조
- <dt> : 용어를 나타내는 태그
- <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그
<img>
<img>는 문서에 이미지를 삽입하는 태그 닫는 태그가 없는 빈 태그
<img src="./images/123.png" alt="123">src 속성
이미지의 경로를 나타내는 필수 속성
alt 속성
이미지의 대체 텍스트를 나타내는 필수 속성
width/height 속성
이미지의 가로/세로 크기를 나타내는 속성
상대경로와 절대경로
src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있습니다.
상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고,
절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다.
<!-- 상대경로 --> <img src="./images/123.png" alt="123"> <!-- 절대경로 --> <img src="http://www.naver.com/123.png" alt="123">표의 구성 요소
표의 행(가로 방향)을 row, 열(세로 방향)을 column
- <table> : 표를 나타내는 태그
- <tr> : 행을 나타내는 태그
- <th> : 제목 셀을 나타내는 태그
- <td> : 셀을 나타내는 태그
<table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> </table>- <caption>: 표의 제목을 나타내는 태그
- <thead>: 제목 행을 그룹화하는 태그
- <tfoot>: 바닥 행을 그룹화하는 태그
- <tbody>: 본문 행을 그룹화하는 태그
input
<input type="text" placeholder="텍스트"> <input type="password"> <input type="checkbox" name="hobby"> 1 <input type="checkbox" name="hobby"> 2 <input type="file"> 파일을 서버에 올릴 때 사용input type
- submit : form의 값을 전송하는 버튼
- reset : form의 값을 초기화하는 버튼
- image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
- button : 아무 기능이 없는 버튼
<select>
<select> 선택 목록 상자 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그(multiple 속성 사용시 다중 선택 가능)
<textarea>
여러 줄의 텍스트를 입력할 때 사용
속성 cols : 가로 크기를 조절하는 속성 rows : 세로 크기를 조절하는 속성(화면에 보여지는 줄 수)
<button>
submit, reset, button
<label>
<label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용
<label for="name">이름</label>: <input type="text" id="name"><br><form>
<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그
<fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
<legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성
method 속성값
get 방식 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출됨
post 방식 데이터가 전송될 때 데이터가 노출되지 않음
action: 데이터를 처리하기 위한 서버의 주소
method: 데이터를 전송하는 방식을 지정
block-level 블록 레벨 요소
부모 요소의 가로 영역에 맞게 꽉 채워져 표현 되는 요소 박스의 위아래로 줄 바꿈 생성
일반적인 모든 요소(블록, 인라인 레벨 등)를 포함 div, h1~h6, p, ul, li, table ...
inline-level 인라인 레벨 요소
하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소 줄 바꿈이 되지 않고 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없음 span, i, img, em, strong, a ...