1. HTML 기본 틀

이전 게시물([HTML/CSS] 1. HTML 기본 틀 작성)에서 HTML 문서 기본 틀에 대해서 이야기 했었다.

이번에는 필수적으로 작성해야하는 기본 틀이 아니라 실제로 사용하기 위해 작성하는 HTML의 기본적인 레이아웃과 기초적인 CSS에 대해서 이야기해보려고 한다.

참고) IntelliJ에서 HTML FIle, Stylesheet(CSS) 파일들을 생성할 수 있다. 생성하자마자 기본 틀을 제공하며, html 파일에서 !(느낌표)를 치고 Tab을 눌러도 틀을 제공한다.

Untitled

아래는 기본적인 틀 예제 코드이다.

<!DOCTYPE html>
<html lang="ko">
	<head>
	    <meta charset="UTF-8">
	    <title>HTML 문서 제목</title>
			<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<!-- [<header>, <main>, <footer>](<https://solar-textbook-084.notion.site/HTML-CSS-2-HTML-CSS-2f41f1a5b8974a9ea891c8f5c29fb168>) 참고 -->
	</body>
</html>

1) 문서 레이아웃 설명

<link rel="" type="" href="">

<link> : 해당 문서와 외부 소스(external resource) 사이의 관계를 정의할 때 사용

<link> 요소는 빈 태그이며, 속성만을 포함하며, <head> 요소 내부에만 위치할 수 있으며, 그 개수에는 제한이 없다.

이러한 <link> 요소는 주로 외부 스타일 시트(external style sheet)를 연결할 때 사용된다.

속성 설명

rel (relation) : 필수 속성으로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시 ex) rel="stylesheet" - 외부의 스타일시트 파일을 연결하는 것
href (hyper reference) : 링크될 외부 리소스(external resource)의 URL를 명시 절대 주소와 상대 주소 둘 다 올 수 있다.