안녕하세요
이번 포스팅에서는 HTML언어와 대표적인 태그들에 대해 알아보겠습니다.
HTML이란?
HTML(Hyper Text Markup Language)
역할)
1. 웹에서 정보라는 요소를 입력
2. 메뉴, 배너, 본문 등 다양한 컨텐츠 공간 설정
=> 현재는 HTML5 사용
HTML 태그 알아보기
HTML 태그 = 시맨틱 태그
구조
<열린태그 속성 ="속성값> 콘텐츠 </닫힌태그>
<meta> 태그
HTML문서 한줄요약, 키워드,작성자, 문서의 특징을 알 수 있다.
<head>태그 안에 사용
닫힌 태그 X
charset : 언어의 집합
name의 3가지 속성이 있다.
1. description : 해당 문서의 한줄 요약
2. keyword : 주요 키워드
3. author : 문서 작성자, 저작권자
<a>태그
anchor 의 약자로 태그 선택시 특정 영역이나 특정 페이지로 이동하는 태그
herf 속성 : 연결할 주소 설정
-> 주소 지정이 안되면 #을 속성값으로 넣으면 된다.
target속성
1) _blank : 사이트 이동 시 새탭,새창을 띄운다.
2) _self : 현재 탭에서 페이지 이동(기본 설정)
title 속성 : 글에 마우스 포인터를 올리면 속성값이 나온다.(필수 속성은 아님)
<img> 태그
image의 약자로 정보성 이미지 삽입
별도의 이미지 폴더가 있을 경우
src = image(폴더명)/logo.png라고 해야함
alt속성
이미지가 제대로 표시되지 않는 경우 사용한다.
<h1> ~ <h6> 태그
헤드라인
숫자가 낮을수록 중요도가 올라간다. -> 글자 크기도 커짐
숫자가 높을수록 중요도가 낮아진다. -> 글자 크기도 작아짐
해외 웹사이트 경우 <h1>태그의 콘텐츠로 img태그를 사용하기도 함
<span>태그+-
특정 문단 안에 특정 단어, 문장에 디자인 적용
->눈에 띄는 특징이 없어 CSS와 같이 사용
<mark>태그
형광펜 처럼 특정 텍스트를 강조할 때 사용
기본적으로 노란색
EX) <mark style ="background-color : red"> 사과 </mark>
목록태그
목록태그로
<ol>
ordered list
순서가 있는 목록
EX)
1.
2.
<ul> unordered list
순서가 없는 목록들
숫자대신 안에 동그라미가 나옴
=> 이 태그들 안에 <li> list item태그를 이용해서 아이템들을 구분해야한다.
<br>
line break
강제 줄바꿈 = Enter키라고 생각하면 됨
<input> 태그
같이 공부하는 입장으로써 틀린 부분이 있으면 알려주세요!
부족한 포스팅 봐주셔서 감사합니다!
'웹 > HTML' 카테고리의 다른 글
| HTML - 시맨틱 마크업 정의 와 관련 태그 정리 (0) | 2023.02.12 |
|---|---|
| VS code Emmet 기능 알아보기 (0) | 2023.01.05 |
| HTML 엔티티 코드 알아보기 (0) | 2023.01.04 |
| HTML 박스모델 및 레이아웃에 영향을 미치는 요소 알아보기 (0) | 2022.12.15 |
| HTML 공간을 정의하는 태그 및 Block 요소와 Inline요소 알아보기 (0) | 2022.12.06 |
