안녕하세요 . crome입니다.
오늘은 웹 개발 기초인 html에 대해 알아 보겠습니다.
HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.
elements 구성
■여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다.
■ 닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같습니다. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치합니다. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다.
■ 내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트이다.
■ 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고한다.
HTML 문서의 구조
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My page 제목작성</title>
</head>
<body>
<p>본문 내용 작성</p>
</body>
</html><!DOCTYPE html>: 문서 형식을 나타냅니다. HTML 초창기에 (1991~2년) doctype은 HTML 페이지가 자동 오류 검사나 다른 유용한 것이 가능한 좋은 HTML을 의미하는 연결고리처럼 작동하는 것을 뜻했습니다. 이런 형식으로 사용했습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
하지만 요즘에는 아무도 신경쓰지 않으며, 그저 모든 것이 제대로 작동하기 위해 포함되어야 하는 역사적 유물일 뿐입니다. <!DOCTYPE html> 은 유효한 문서 형식을 나타내는 짧은 문장이고, 이 것만 알고 있으면 됩니다.
<html></html>
<html> 요소입니다. 이 요소는 전체 페이지의 콘텐츠를 포함하며, 기본 요소입니다.
<head></head>:
<head> 요소입니다. 이 요소는 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있습니다.
<meta charset="utf-8">
이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며 예시에서 지정한 UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함됩니다. 이 설정을 사용하면 페이지에 포함 된 모든 텍스트 내용을 처리 할 수 있습니다. 이것을 설정하면 나중에 문자 인코딩과 관련된 일부 문제를 피하는 데 도움이 됩니다.
<title></title>
<title> 요소입니다. 이 요소를 사용하면 페이지 제목이 설정되며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용됩니다.
<body></body>
<body> 요소 여기에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함됩니다.
주요 태크
a태그 : 하이퍼 링크 삽입시 사용
<a href="링크할 주소">텍스트 또는 이미지</a>input태그: 사용자 입력 항목 정의
| attribute | value | description |
| type= | text | 한 줄 텍스트 |
| password | 비밀번호 입력 | |
| button | 일반 버튼 | |
| submit | 전송 버튼 | |
| reset | 입력값 리셋 버튼 | |
| image | 이미지 버튼 | |
| file | 파일 첨부 버튼 | |
| hidden | 숨김 값 필드 | |
| search | 검색 | |
| url | url | |
| 이메일 | ||
| tel | 전화번호 | |
| checkbox | 체크박스 (중복 체크) | |
| radio | 라디오 버튼 (unique 체크) | |
| number | 숫자 스핀 박스(버튼으로 숫자 조절) | |
| range | 숫자 슬라이드 막대 | |
| date | local - 연, 월, 일 | |
| month | local - 연, 월 | |
| week | local - 연, 주 | |
| time | local - 시, 분, 초, 분할 초 | |
| datetime | UTC - 연, 월, 일, 시, 분, 초, 분할 초 | |
| datetime-local | local - 연, 월, 일, 시, 분, 초, 분할 초 |
기타 태그
| tag | description |
| <textarea> | 여러 줄의 텍스트 입력 영역 |
| <select> | 드롭다운 목록 태그 |
| <datalist> | 미리 입력된 데이터 목록 |
| <button> | 버튼 , < input type='button' /> 동일 |
| <img> | 이미지 파일 태 |
| <embed> | 모든 종류의 파일들을 불러올 수 있도록 설계 |
| <object> | 이미지, 소리, 영상을 제외한 문서 형태(ex)pdf)와 같은 파일을 열어주는 태그 |
| <audio> | 소리를 불러오는 태크 |
| <video> | 영상을 불러오는 태크 |
이외에도 많지만 기본적인 태그에 대해 알아 보았습니다.
아래 링크를 통해 html을 테스트 해보는건 어떠신가요?
코드 실습 페이지
Playground | MDN (mozilla.org)
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
이상입니다.
부족한 부분은 조금씩 보완해 나가겠습니다.
도움이 되셨다면 공감 및 댓글 남겨주세요.
감사합니다.
'IT > 프로그래밍' 카테고리의 다른 글
| HTML 5 신규 기능 (102) | 2023.10.19 |
|---|---|
| HTML 태그 예시 (98) | 2023.10.18 |
| 프런트엔드 vs 백엔드 vs 풀스택 개발자 (88) | 2023.10.13 |
| eclipse 환경설정 charset 변경 (0) | 2023.02.16 |
| [안드로이드]드로어블(drawable) (1) | 2018.05.25 |
