HTML 태그

J_A_Y.·2023년 3월 5일
0

HTML:

Hyper Text Markup Language로 웹사이트에서 정보와 구역등을 설정 할 수 있습니다.

현재는 HTML5의 버전을 사용하고 특징은 semantic한 언어입니다.

기본적인 태그:

HTML의 문법 형태는 아래와 같습니다!

<OPENING 태그 속성 = "속성값">컨텐츠(정보 내용)</CLOSING 태그>
#EX

<!DOCTYPE html> # HTML5를 선언하는 태그!
<html> #HTML문서의 시작
<head> #head 태그, 간단한 요약정보 
    <meta charset="UTF-8"> # 모든문자를 깨짐없이 표시하기 위한 코드
    <title>Document</title> # 브라우저의 탭의 제목을 나타내는 타이틀 태그
</head>
<body> #바디 태그, 웹사이트의 내용을 포함
</body>
</html> #HTML문서의 끝! 

<img> 태그 : 이미지를 삽입하는 태그!

<img src ="https://cdn.pixabay.com/photo/2019/08/07/14/10/golden-retriever-4390884__340.jpg" alt="강아지">

<img> 태그는 닫아주는 태그 없이 사용합니다~!

src 속성은 source 로써 파일 경로를 불러오고,

alt 속성은 이미지가 어떤이유로 출력 되지 않을 경우, 이미지의 설명 텍스트가 대체되어 출력되는 역할을 합니다.

<h> 태그 : 블록 요소

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>

Heading 즉 제목이나 부제목 표현할때 쓰입니다.

<h1>태그는 가장 큰 제목이기 때문에 하나의 문서에서 반드시 하나만 사용합니다.

<p>태그 : 블록 요소

<p>I love you</p>

본문의 내용을 쓸때 사용합니다! (주요 텍스트 단락을 표현)

<ul>태그 :

<ul>
	<li>메뉴1</li>
	<li>메뉴2</li>
	<li>메뉴3</li>
</ul>

unordered list의 약자로, 순서가 상관없는 리스트를 생성 할 때 사용합니다. (자식 태그로 <li>태그를 달고 다닌다! 보통 메뉴버튼을 만들 때 사용한다.)
*<ol> ordered list도 있습니다. 사용법은 <ul> 태그와 동일 하나 출력했을시 숫자의 순서로 표시됩니다. ex) 1.첫번째 예시 2. 두번째 예시

<a>태그 : 인라인 요소

<a href="https://www.naver.com/" target="_blank">네이버</a>

<a>태그는 택스트나 이미지를 클릭했을때, 다른 웹페이지로 이동시키는 기능을 가지고 있는 태그 입니다.

(하이퍼링크 기능) href속성은 연결할 웹페이지의 주소를 불러오고, target속성은 연결 방식을 결정!

profile
길을 만드는 개발자

0개의 댓글