※ HTML은 Naver의 'Boostcourse'에서 공부하고있습니다.
HTML
'Hyper Text Markup Language'의 줄임말로 '팀 버너스리'의 제안으로 개발되었으며, 웹 페이지의 내용을 서술하고 정의하는 데 사용됩니다.
태그
<, > 기호 사이에 태그 이름이 들어가며 시작 태그와 종료 태그의 쌍으로 작성합니다.
<h1>안녕하세요</h1>위 예시는 'h1 태그'를 사용하여 '안녕하세요'를 출력합니다.
속성(attribute)
태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어하는 설정값입니다.
<h1 id="title">안녕하세요</h1>h1 태그에 'id'라는 '속성'을 사용했고, 'title'이라는 '속성값'을 부여했습니다.
속성은 하나의 태그에 꼭 하나만 쓰이는 것은 아니며, 아래처럼 여러 속성을 부여할 수도 있습니다.
<a href="https://velog.io" class="link">velog 바로가기</a>속성의 선언 순서는 태그에 영향을 끼치지 않습니다.
주석
<!--주석 내용--><!--와 --> 사이에 위치한 내용은 '주석'으로 처리되어 화면에 표시되지않습니다.
따라서 주의할 내용을 메모해놓을 수 있습니다.
태그의 중첩
선언한 태그 안에 다른 태그를 중첩하여 사용 할 수 있습니다.
단, 중첩하여 사용 시 먼저 선언한 부모 태그를 벗어나면 안됩니다.
<h1><u>안녕</u>하세요</h1> <!-- 올바른 예 -->
<h1><u>안녕</h1>하세요</u> <!-- 잘못된 예 -->태그의 중첩은 필요에따라 두번 이상의 중첩도 가능합니다.
빈 태그
태그는 보통 시작 태그와 종료 태그 한 쌍으로 이루어지지만, 종료 태그 없이 단일로 존재하는 태그도 있습니다. 이러한 태그를 '빈 태그'라고 합니다.
<img src="">
<br>이외에도 여러 태그가 존재하며, 이러한 빈 태그는 <img>처럼 브라우저가 내용을 그려주어 대체되는 태그로 사용되거나, <br>처럼 특수한 용도로 사용되는 태그가 있습니다.
공백과 개행
HTML에서 공백은 한 칸만 인식합니다. 즉, 두 칸 이상의 공백은 무시하며, 개행(enter)도 무시합니다.
따라서 개행을 하기 위해서는 위의 빈 태그 중
<br>태그를 사용해야합니다.
기본 구조
웹 문서 작성 시 반드시 들어가야하는 기본적인 내용으로, 크게 '문서 타입 정의'와 'html 요소'로 구분합니다.
문서 타입 정의
'DTD(Document Type Definition)'라고 부르며, 문서의 작성 버전을 브라우저에 알려주는 선언문으로, 반드시 문서 최상단에 작성해야합니다.
HTML 요소
문서 최상단에 문서 타입 정의를 작성한 후, 그 아래에 'html 요소'를 작성합니다.
먼저 <html> 태그를 작성하고, 그 안에 중첩 태그의 형태로 자식 태그인 <head>와 <body> 태그를 작성합니다.
<html> 태그의 속성 중 'lang 속성'은 어떤 언어로 문서를 작성했는지 나타냅니다.
<head> 태그 안에 작성된 내용은 화면에는 나타나지않지만, '문서의 기본 정보 설정'이나, '외부 스타일 시트(CSS 파일)'와 'Javascript' 파일을 연결하는 등의 역할을 합니다.
<head> 태그의 자식 태그 중 <meta> 태그에서 'charset 속성'은 '문자의 인코딩 방식(UTF-8 등)'을 지정합니다.
<body> 태그에는 실제로 화면에 나타나는 내용이 작성되며, 위에서 예로 쓰였던, <h1>, <a>, <br> 태그 등이 자식 태그로 사용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>안녕하세요</h1>
</body>
</html>