Hyper Text Markup Language

웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정하는 언어로, 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다.

구조

<!DOCTYPE html>                    // HTML5 문서 선언 태그
<html>                            // HTML 문서의 시작과 끝을 의미
<head>                            // 웹 사이트의 요약 정보를 담는 영역, 노출X
    <meta charset="UTF-8">        // character setting의 약자, 모든 문자를 깨짐 없이 표시
    <title>웹프로그래밍</title>    // 탭에 나타나는 제목을 적는 태그
</head>
<body>                            // 웹 사이트에서 눈에 보이는 정보를 담는 영역, 노출O
</body>
</html>

형식

일반적인 형식

<열린태그 속성 = "속성값">컨텐츠</닫힌태그>

줄바꿈

<br>

이미지 태그

<img src="./logo.png" alt="로고"/>

src="/logo.png"에서 /logo.png에 내가 사용하고자 하는 이미지의 주소를 입력하면 된다.
인터넷상의 주소를 입력하는게 제일 오류가 발생하지 않는다.
alt="로고"는 사진에 마우스를 가져다 댔을 때 뜨는 설명을 나타낸다.

div 태그

<div class="이름" style="color:pink"></div>

HTML class 속성으로 요소의 이름을 추가한다. css 선택자로 활용된다.
style: 텍스트를 꾸며주는 속성

이외의 태그

블록요소 태그

<h1>안녕하세요</h1>        // h1 ~ h6 까지 있으며 내림차순으로 크기가 작아진다.
<p></p>                    // paragraph의 약자, 본문 표현
<ol></ol>                // Ordered list의 약자, 순서가 있는 리스트 생성
<ul></ul>                // Unordered list의 약자, 순서가 없는 리스트 생성
<header></header>        // 웹의 간판인 상단 영역을 담당한다.
<footer></footer>        // 웹의 정보를 설명하는 하단 영역을 담당한다.

<ol>, <ul>은 <li></li>태그와 함께 쓰인다.

글자요소 태그

<span>글을 썼어요</span>
<a href="#" target="_blank">새로고침<a>    // 텍스트나 이미지를 클릭 시, 다른 웹페이지로 이동

href: 연결할 웹페이지의 URL 주소
target: 웹페이지를 연결하는 방식

728x90