Hyper Text Markup Language 를 의미하는 HTML은
웹사이트에서 눈에 보이는 정보 혹은 특정한 구역을 설정할 때 사용되는 언어
HTML의 태그 구성 요소 : <열린태그 속성 = "속성값">컨텐츠</닫힌태그>
태그명 : HTML이 갖고 있는 고유의 기능
속성 : HTML 태그가 갖고 있는 추가 정보
속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것
<!DOCTYPE html> : HTML5라는 신조어로 문서를 선언하는 태그
<html> ...</html> : HTML문서의 시작과 끝을 의미
<head> ...</head> : 웹사이트의 간단한 요약정보를 담는 영역 (노출되지 않는 정보)
<body> ... </body> : 웹사이트에서 눈에 보이는 정보를 담는 영역 (이미지나 텍스트 처럼 출력되는 정보)
<meta charset ="UTF-8"> : character setting의 약자를 나타내는 문자코드
<title> ... </title> : 웹사이트 탭에 나타내는 제목을 적는 태그
<a> ... </a> : 글자나 이미지 클릭시 다른 사이트로 이동시키는 태그
href 속성 : HTML 연결할 페이지의 주소 지정
target 속성 : 어떤 방식으로 페이지를 이동할 지 설정
- "_blank" : 새 탭을 띄워서 웹사이트 전환
- "_self" : 현재 탭에서 웹사이트를 전환 (디폴트 값)
<a>...</a> 태그의 target 속성 예시 : <a href = "https://hans-j.tistory.com" target = "_blank">블로그</a>
<img>태그 : 정보성을 갖고 있는 이미지 삽입. 닫힘 태그 없음
src 속성 : 삽입할 이미지 파일 경로
alt 속성 : 웹사이트가 이미지를 출력하지 못 했을 경우, 텍스트 정보로 대체.
<img> 태그 예시 : <img src ="logo.png" alt="블로그로고">
<h> 태그 : Heading 의 약자로 제목이나 부제목을 표현. 숫자 값이 클수록 폰트 사이즈가 작음.
<h1>태그는 한번만 사용
<p>태그 : Paragraph의 약자로 본문 내용을 표현. 웹사이트의 중요 정보를 담는 태그
<ol>태그 : Ordered list의 약자로, 순서가 있는 리스트 생성
- <ol>태그는
- 이런식으로
- 나타남
<li>태그 : <ol>과 <ul>의 각 항목을 나열할 때 사용
<ul>태그: Unordered list의 약자로, 순서가 없는 리스트 생성. 메뉴버튼을 만들 때 사용되는 태그
- <ul>태그는
- 이런식으로
- 나타남
*'앨리스코딩 AI/SW 온라인 실무교육'을 듣고 작성했습니다.
'HTML' 카테고리의 다른 글
| [HTML]부트스트랩+그리드 (4) | 2023.01.15 |
|---|---|
| [HTML]의미론적 태그 (0) | 2023.01.14 |
| [HTML]실습하기 좋은 웹사이트 (0) | 2023.01.02 |
| [HTML]태그 (0) | 2023.01.02 |
| [HTML] 레이아웃 (2) | 2022.10.03 |
