TIL 01_HTML 기초

3431 단어 htmlTILTIL

당연히 시작은 기초를 다져야 한다.
HTML 기초에 대해 알아보자!


HTML 이란?

HTML은 HtyperText Markup Language의 약자이며 웹 페이지의 구조와 내용을 만드는 데 사용된다.
HTML은 모든 웹 페이지의 골격이다. 개발자, 마케팅 담당자 및 디자이너가 배우는 첫 번째 언어이며 프런트 엔드 개발 작업의 핵심이다.


HTML 기본 문법

대부분의 HTML는 열기 및 닫기 태그가 있다. 그에 대한 기본 문법은 다음과 같다.

<tag>contents</tag>

기본적인 HTML 형식

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

<DOCTYPE html> 태그는 가장 윗쪽에 삽입되어 해당 문서가 HTML 문서임을 명시한다.
<head> 태그는 웹 페이지의 정보를 담는다.
<body> 태그는 웹 페이지에 실제로 보이는 부분을 담는다.


태그 요소

1. 텍스트를 묶는 태그

  • <h1>~<h6> : 각 콘텐츠 영역에서 제목을 표시할 때 사용
  • <br> : 줄을 바꿀 때 사용 ***닫는 태그가 없음
  • <hr> : 주제가 바뀔 때, 수평 줄 생성
  • <p> : (기본형 <p>텍스트</p>)입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락 생성
  • <pre> : (기본형 <pre>텍스트</pre>)소스에 표시한 공백이 그대로 표시

2. 텍스트를 한 줄로 표시하는 태그

  • <strong> : 중요한 내용을 강조 굵게 / <b> : 단순히 굵게
  • <em> : 강조하는 이탤릭 / <i> : 단순히 이탤릭체로 표시
  • <q> : 줄바꿈 없이 인용 내용을 따옴표("")로 표시
  • <span> : 줄 안에서 (인라인) 묶기
  • <div> : 줄 바꿔 (블록) 단락으로 묶기

Q. <div><span> 태그의 차이점은?
A : <div> 태그로 묶인 덩어리는 블록레벨 요소가 된다. 당연히 앞뒤 줄 바꿈도 되고 너비/높이를 정할 수 있다. <span> 태그로 묶인 덩어리는 인라인 요소. 줄 바꿈이 되지 않고 주변 텍스트에 연결되어 표시되며 너비/높이를 정할 수 없다.

좋은 웹페이지 즐겨찾기