HTML 까지는 기억이 날 듯 말듯
어릴 때 나모웹에디터로 홈페이지 만들던 세대라 그런지
이건 꽤나 익숙합니다
HTML 이란?
Hyper Text Markup Language
보통 퍼블리셔들이 많이 배우는 언어이고
프로그래밍 언어는 아니라고 합니다
HTML과 CSS는 프로그래밍 언어가 아니다
; html은 마크업 언어, CSS는 스타일 언어
Hyper Text (글, 이미지...)
: 현재 페이지의 글 이미지를 초월하여 다른 웹 페이지의 자료들과 연결시켜준다
Markup Language
: 웹페이지 상의 컨텐츠를 어떻게 표현할지 명령하는 언어
=> 웹 페이지를 이동할 수 있게 해 주고,
다른 웹페이지에 이미지 등 컨텐츠에 접근 가능하고 웹 페이지 내 컨텐츠를 제작하는 언어
=> 웹 페이지 때 기초 틀을 만드는 데 쓰는 언어 (꾸미는 기능 X ; 스타일시트로서의 기능을 하고 있지 않다0)
행위에 따라 바뀌는 것 : 동적
HTML 특징 ; 태그 형태를 띄고 있음
tag ; 이 html 요소는 어떤 기능을 하고 있고 어떠한 속성을 가지고 있는지 나타낸다
ex.
- 컨텐츠가 있는 경우
<시작 태그명 속성명='속성값'>...(컨텐츠)</종료 태그명>
- 컨텐츠가 없는 경우 : 단일태그
<태그명/>
ex.
<div id="menu_list" style="width: 300px">...<div>
이 태그는 div이며 id 속성은 menu_list라는 값을 가지고 있고
style 속성에는 width 300px이라는 값을 담고 있다 ; 부가정보 ; 있어도 되고 없어도 됨
HTML 기본 구조
<html> --- 현재 해당 태그 안의 요소들이 html 언어를 사용한다
<head></head> --- 해당 페이지의 정보, 창 이름, 검색 엔진 노출 정보 등
<body></body> --- 사용자가 화면에 보고 노출될 곳
</html>
확장자명은 .html로 끝나야 함
HTML 태그(element = 요소)의 종류
HTML은 종류가 아주 많아서 하나하나 기억하거나 외우는 것은 무리이지만
기본적으로 가장 많이 사용하는 종류
<div> ... </div>
- 가장 사용 빈도가 높음
- 하나의 구역, 비어있는 박스, 틀 ; 구역을 나누는 용도
<input/>
- 텍스트 박스 태그
- 글을 입력할 수도 있고, 체크박스, 버튼 생성
ex. 로그인 정보, 검색창, ... ; 사용자가 입력할 수 있도록 해주는 태그
<p> ... </p>
- 한 문장 단위의 글을 작성하는 태그 ; 하나의 글
- 위 아래 여백이 생기게 되는데 보통은 css로 이러한 기본 속성 값을 초기화 시키기 때문에 신경쓰지 않아도 됨
- p태그 안에는 div 태그를 사용할 수 없다 ; div 안에 div는 가능
<span> ... </span>
- 단어, 특정 구간을 구분/분리하기 위해(지정)
- 동그란 원을 만들 때 사용
<img/> <video> <audio/>
- 이미지, 비디오, 오디오와 같은 미디어 매체들을 위한 요소
<h1~~~h6> ... </h1~~~h6>
- 제목 요소 : 각 숫자마다 폰트 크기, 굵기, 여백 등이 다름
- h1이 제일 크며 6이 제일 작다
<a> ... </a>
- 링크, 페이지 이동
- a href = "이동할 페이지의 경로"
ex. 메뉴 클릭 시 다른 페이지로 이동(url 변동)
<select>
<option> ... </option>
</select>
- 드롭다운 메뉴 태그
- option은 해당 드롭다운의 목록 ; value라는 속성을 갖고 있음
=> 선택된 value가 select 요소의 value가 된다
ex. 회원가입 시 이메일 선택 드롭다운 메뉴
<button> ... </button>
- 버튼
- 기본 속성 값은 "submit"
<button type="button">...</button>
- input type = "button" ; input태그로도 지정가능
<ul>
<li> ... </li>
</ul>
- 리스트 태그
- 메뉴 혹은 반복되는 아이템을 하나로 묶기 위해 사용
*
input과 button과 같이 특별한 기능을 하는 태그가 아니라면 태그명에 의미를 둘 필요는 없음
단, 시멘틱 웹 태그는 제외한다
input의 type 속성
- input은 사용자가 입력 가능한 태그로 다양한 형태를 띄고 있다
ex. radio, submit, checkbox, text, email, password, number, ...
이러한 종류를 구별하기 위하여 type이라는 속성을 통해
해당 input이 어떠한 기능을 하고 있는 태그인지 명확히 명시할 필요가 있음
그러나 type을 지정하지 않으면 default value는 text다
label의 속성
<label> ... </label>
- 묶어주는 태그
ex. 체크 박스 모양을 바꾸려 할 때
해당 체크박스를 보이지 않게 하는 css를 설정하고
해당 자리에 label 태그를 투어
마치 다른 이미지를 클릭해도 label과 연결되어 checkbox가 클릭되게 하는 태그
더 많은 HTML 자료는 아래 링크에 있어요
<a> - HTML: Hypertext Markup Language | MDN
HTML <a> 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. <a> 안의 콘텐츠는 링크 목적지
developer.mozilla.org
'Frontend > HTML' 카테고리의 다른 글
| 프론트엔드 HTML 시멘트 웹 태그, table, datelist, form, iframe (0) | 2023.02.04 |
|---|---|
| VS Code ; Visual Studio Code 프로그램 설치 방법 / 확장팩 추천 & 설치 (0) | 2023.01.18 |
| 백엔드, 프론트엔드 및 UI, UX 기본 개념 (0) | 2023.01.15 |