[HTML] (Note)

2022/2/28

HTML
: HyperText Markup Language: 웹에서 사용하는 웹문서

확장자명: .html

웹문서: 작성 프로그램 “웹 편집기”, 작성된 웹문서 보는 프로그램은 웹브라우저로 서로 다름.

웹 표준: 웹사이트를 만들 때 지켜야 하는 약속들을 정리한 것. HTML5

W3C: World Wide Web Consortirum 단체 설립. 웹 표준을 정의하는 단체

태그 tag

마크업을 할 때 사용하는 약속된 표기법
< >를 이용해 구분. <html>
태그는 소문자로 사용.
여는 태그와 닫는 태그 정확히 구분하기.
태그: 쌍 태그로 이루어짐 <html> 여는 태그 이 안이 태그 영역 </html> 닫는 태그
홑 태그: 하나의 태그로 이루어짐 <img />
들여 쓰기 잘하기
태그는 속성과 함께 작성 가능: <태그명 속성명 = “속성 값” 속성명 =”속성 값> …… </태그명> //속성과 속성을 구분해주는 건 띄어쓰기!! 쉼표 없음.
! tab 하면 doctype

텍스트 관련 태그

<h1></h1>: h태그: h1부터 h6까지 있다. 제목 표시할 때 쓰는 제목 태그. 자동 줄 바꿈 되어서 한 줄 모두 차지.
<p></p>: 단락 만들기: 앞뒤 줄 바꿈 있는 텍스트 덩어리
<br/>: 줄 내림
<hr/>: 수평 줄 넣기
<blockquote></blockquote>: 인용문 넣기: 양끝 들여 쓰기 적용됨.
<pre></pre>: 입력하는 그대로 화면에 표시 (previously formatted text)
<span></span>: 줄 바꿈 없이 영역 묶기: 일부 텍스트만 묶어서 스타일 적용할 때 주로 사용
<strong></strong>: 볼드체
<u></u>: 밑줄

목록 태그

1. <ul></ul>, <li></li>: unordered list 번호 없는 목록 만들기

2. <ol></ol>, <li></li>: ordered list 번호 있는 목록 만들기
type 속성: 숫자/ 영문/ 로마 숫자 변경 가능 1= 숫자, a= 영문소문자, A= 영문 대문자
start 속성: 중간 번호부터 시작 가능
reversed 속성: 항목 역순으로

표 만드는 태그
표: table은 행(row), 열(column)으로 이루어져 있다.
<table></table>
<tr></tr>: 행 지정
<td></td>: 셀 만들기
<th></th>: 제목 셀
-행/열 합치기
<td>, <th>에 작성
colspan: 열 합치기 <td colspan= “합칠 열의 개수”>…
rowspan: 행 합치기 <td rowspan = “합칠 행의 개수”>

이미지 태그

1. 이미지 파일
GIF: 색상 수 256가지뿐, 파일크기가 작음. 아이콘, 불릿 등 작은 이미지에 주로 사용. 움직이는 이미지 만들 수 있음.
JPG: 사진
PNG: 투명 배경

2. 태그
<img/>
src 속성: 필수 기입 속성. 이미지 파일 경로 지정해줘야 함. (상대 경로, 절대 경로 다 가능)
alt 속성: 이미지 설명글
width, height 속성: 이미지 가로, 세로 크기 지정 (px)

링크
-태그: <a></a>: href 속성을 이용하여 다른 페이지로 이동시켜준다.
<a href = “이동할 주소”>추가 정보</a>

a링크는 다른 페이지로 링크를 생성할 때 사용/ href 속성은 링크의 목적지/ 추가 정보는 링크 텍스트이다. 클릭할 수 있다는 것을 나타내기 위해 화면에서 밑줄이 그어진다.
<a href = “이동할 주소”><img/></a>

-속성:
href: 링크 주소
target:

새 창으로 이동: _blank

현재 창으로 이동: _self (default)

-앵커(닻…)
웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여 놓고 그 위치로 한 번에 이동하는 링크를 만들 수 있는데 기능을 anchor 앵커라고 한다.

폼 관련 태그(중요)
아이디와 비번 입력, 로그인 버튼, 회원 가입 창 등 사용자가 웹 사이트 서버로 정보를 보낼 수 있는 요소들을 모두 폼 form이라 한다.<form>은 화면에 나타나지 않는다. <form>은 입력 요소를 담는 컨테이너의 역할만을 한다. 개발자가 <form> 요소 안에 실제로 입력을 받는 요소를 넣어야 한다.

1. form 태그
<form 속성=”값”>……여러 폼 요소……</form>

2. form 태그의 속성
method: 사용자가 입력한 내용을 서버 쪽으로 어떤 방식으로 전달할지 지정.

A. get: 주소 표시되는 부분에 사용자가 입력한 내용이 그대로 드러남(디폴트)

B. post: 입력 내용이 url에 드러나지 않고, 내부에 담아서 전송

name: 태그에 이름 부여. 폼에 이름 부여. form 태그 요소(input)에 name 속성을 지정하면 넘겨주는 데이터의 이름을 name 속성 값으로 지정해줌.
action: form 태그 안에 내용들을 처리해줄 서버 상의 경로 작성

input 태그(중요)

1. 태그: <input 속성 =”값”…/>
폼에서 사용자가 입력하는 부분을 만들 때 사용. <input type = “type 속성 값”>에 따라 여러 형태로 입력받을 수 있다.

ex) <input type="button" value="눌러보세요!" name="button1"/>
type 속성은 입력 필드의 종류를 결정. value 속성은 버튼에 나타내는 텍스트. name속성은 서버로 전달되는 이름.

2. type 속성 값
text: 한 줄짜리 텍스트 입력할 수 있는 텍스트 상자
hidden: 화면 상에는 보이지 않지만 서버로 데이터를 전송할 때 사용
password: 비밀번호 입력란. 별표나 점으로 표시
radio: 하나의 항목만 선택할 수 있는 체크박스 계열. name 속성 값이 동일해야 동일 그룹으로 인식하고 한 개만 선택 가능하게 됨. 체크 해제 불가
checkbox: 중복선택 가능. 체크 해제 가능
submit: 사용자가 입력한 정보를 서버로 전송 버튼 value 속성 값이 버튼 글자로 표시
reset: 입력한 모든 정보를 초기화해주는 버튼
image: 이미지 버튼 넣기. submit과 동일한 기능. src로 이미지 경로 지정 필요.

color: 색상 선택 상자
date, month, week: 날짜 선택 박스
time, datetime, datetime-local: 시간
file: 파일 첨부 시

3. input의 다른 속성
autofocus: 입력 커서 지정
placeholder: 입력 박스에 기입할 내용 힌트로 표시하기
readonly: 읽기 전용
required: 필수 기입 요소로 지정

Select 태그

: 옵션 중에 선택하는 드롭다운 목록. 셀렉트는 항상 option 요소와 함께 사용되며 option 요소는 반드시 value 속성을 가지고 있어야한다.

1. 태그
<select>
     <option value="값"> 내용 1 </option>
     <option value="값"> 내용 2 </option>
     <option value="값"> 내용 3 </option>
</select>

textarea 태그
: 여러 줄 입력하는 텍스트 영역

1. 태그
<textarea></textarea>

2. 속성
cols: 가로 너비를 문자 단위로 지정
rows: 세로 너비를 줄 단위로 지정

button 태그
: 버튼 태그 <input type = “button” 과 동일한 버튼 생성
차이점은 화면 낭독기에서 버튼이 있다는 것을 button 태그를 사용하면 이를 인지하고 전달 가능.

1. 태그
<button type> 버튼 텍스트 </button>

2. type 속성
submit: 폼의 내용을 서버로 전송 (input type = “submit” 과 동일 기능)
reset: 입력 내용 초기화
button: 버튼 형태만 있고 자체 기능 x

Progress

: 작업의 진행 상태를 나타내는 등의 막대그래프 같은 태그

1. 태그
<progress value = “값”></progress>

2. 속성
values: 부동소수점으로 표현
max: 완료 기준의 값

시멘틱 태그
: 웹 페이지의 각 요소에 의미를 부여해서 의미와 관련성을 기반으로 보다 진보된 검색 또는 서비스가 가능하도록 시도한 것. html5에 시멘틱 웹을 위한 태그들이 제공됨.

header: 헤더, 상단부, 로고 같은 거 배치하는 부분
nav: 내비게이션 (메뉴 가로바)
aside: 오른쪽 소메뉴 같은 용도
section: 본문 부분, article 포함
article: 본문의 주 내용이 들어가는 부분
footer: 하단부

---------------교재 참고---------------------
div와 span

div는 논리적 섹션으로 분리하는데 사용되는 태그이다.

<div>

<p> 사자는 아프리카에 살며..</p>

<div>

div 요소 안에 h2, p 요소가 들어있다. div로 둘을 묶은 것 == div가 컨테이너가 되어서 h2, p를 포함하고 있는 것이다.

html 요소는 div와 span을 통해 묶을 수 있는데, div는 블록 수준의 요소로서 하나의 줄을 전부 차지한다. 요소는 대량의 내용에 대하여 스타일 속성을 설정할 때 유용하다.

span 요소는 인라인 요소-> 텍스트를 위한 컨테이너. div와 같이 CSS와 함께 사용되어서 텍스트 일부의 스타일 속성을 설정할 때 사용된다.

참고) <div>는 웹 페이지의 공간을 분할하여 레이아웃을 작성하는데도 널리 사용된다-> 원하는 레이아웃을 작성하기 위해 논리적인 섹션을 작성하는데도 사용된다. 이는 테이블을 이용한 레이아웃을 대치할 수 있다.

티스토리툴바