HTML 파일의 구조
<!DOCTYPE html> <!--HTML의 버전을 표시, html5버전-->
<head> <!--사이트의 부가정보, 제목 설명 등을 나타냄-->
<meta charset="utf-8"> <!-- utf-8버전을 나타내며 한국어, 일본어, 중국어 사용가능-->
<meta name="viewport" content="width=device-width"> <!--디바이스와 뷰포트의 크기를 같게 설정-->
<title>repl.it</title> <!--사이트의 제목을 나타냄-->
</head>
<body> <!-- 사이트에서 화면에 나오는 것을 표시 -->
</body>
</html>
<h1>태그
<h1>, <h2>, <h3>, <h4>, <h5>태그는 주로 제목을 나타낼 때 사용합니다.- 숫자가 커질수록 글자의 크기는 작아집니다.
<span>태그와 <p>태그
<span>태그: 주로 텍스트를 넣을 때 사용합니다.<p>태그: 텍스트를 넣을 때 사용하며, 주로 문단을 통으로 넣을 때 사용합니다.<span>태그와 <p>태그의 차이점
<span>태그: 줄이 안바꾸고 나오는 인라인요소
<p>태그: 줄이 바뀌어 나오는 블록 요소
<a>태그
<a>태그는 클릭하면 화면이 이동하는 태그이며, href속성을 사용하여 이동할 주소값을 주면 됩니다.target속성에 "_blank" 값을 사용하면 클릭시, 새창을 뜨게 해줍니다.
<div>태그
<div>는 섹션을 나눌 때 사용하며, 다른 태그와 달리 의미가 없습니다.
<div>를 사용하는 이유
- 비슷한 부분끼리 그룹을 지어주고 레이아웃을 분리할 수 있으며 id와 class를 주어 css로 꾸밀 수 있기 때문입니다.
성장하는 프론트엔드 개발자의 길