[TIL]- HTML 구조

테디·2022년 6월 14일

🎈HTML 기본구조

hyper text markup language

각각의 html 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용
웹을 이루는 가장 기초적인 구성 요소
웹페이지 HTML 문서라 부르기도 함

기본 구조

<!DOCTYPE html> -> 현재 문서가 HTML5문서임을 명시
<html lang="en"> -> html 문서의 루트를 정의한다
<head> -> html 문서의 메타데이터 라는 것을 정의
		메타데이터 : HTML 문서에 대한 정보 웹페이지에 직접적으로 표현되지 않는 정보
    	메타데이터를 title, style, script 등을 이용해서 표현할수 있다 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> -> 문서의 제목 표시 (브라우저 탭,툴바)
                             즐겨찾기의 제목이 된다.
</head>
<body>
</body>
</html>

🎈HTML 요소구조

1. 요소(element)

시작태그와 종료태그 그리고 태그사이에 위치한 컨텐츠(내용)로 구성된다.

  시작태그    컨텐츠       종료태그
    <h1> 그래서 요소가 뭔데? </h1>
    -태그와 컨텐츠를 합쳐서 HTML 요소라 부른다

2. 태그의 특징

태그는 대소문자 구별은 하지않는다.
하지만 웹 표준기구( w3c )에서 소문자를 권장하고 있기 때문에 전세계의 웹 개발자들은 대부분 소문자를 사용한다 w3c : World wide web consortium 전 세계의 웹 표준을 제정하는 중립기관.
empty tag(빈 태그) : 종료태그가 없는 태그
- br, hr, img, input, link
어트리뷰트(atrribute) / 속성
- 요소의 성질이나 특징을 정의하는 명세
- 모든 html 요소는 어트리뷰트를 가질 수 있음
- 어트리뷰트는 요소에 추가적인 정보를 제공할 수 있음
- 어트리뷰트는 반드시 시작 태그에 위치해야하며 이름: 값의 쌍으로 이루어진다

3. 텍스트 태그

📖제목, 단락, 서식

제목태그는 일반적으로는 제목의 크기를 조정하지만 웹 페이지 제작시 각각 태그에 기본 스타일을 적용해서 다른 글꼴들을 표현하거나 혹은 라인별로 다른 스타일을 적용하고 싶을때 사용

💡제목 테크 /h

<h1>글씨</h1>
<h2>글씨</h2>
<h3>글씨</h3>
<h4>글씨</h4>
<h5>글씨</h5>
<h6>글씨</h6>

💡글자형태(단락+서식) 태그

b, strong, i, em, mark, del, p, br, hr, pre, blockquote

글자 태그들 중에서 자주 사용되는 태그들은 p, br, hr, pre 정도다
대부분 CSS를 통해서 바꾸는 형식으로 웹페이지 스타일을 지정하기 때문

특히 i 태그의 경우는 사용할일이 거의 없기 때문에 웹페이지의 외부 아이콘이나 외부 이미지 호출시 사용하기도 한다

<strong>나는 strong</strong> <br>
<i>나는 i태그</i> <br>
<em>나는 em</em> <br>
<mark>나는 mark</mark> <br>
<del>나는 del</del> <br>
<p>나는 p태그</p> <br>
<pre>나는 pre태그</pre>

💡p태그 vs pre태그 차이

결론적으로 개행 적용과 미적용의 차이 (pre는 개행을 적용할수 있음)

p태그 : 단락을 표현하는 태그.

HTML 내에서 작성된 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 적용

일반적으로 html내부의 컨텐츠는 enter를 이용하던
공백을 많이 주던 무조건 공백1칸으로 인식하는 특징이 있음
html은 개행을 표현하기 위해 br 태그를 사용

📖엔티티

엔티티(entity) : 미리 예약되어있는 몇몇 문자들.
다른말로 HTML 예약어 라고도 부른다.

예약어 : 이미 기능이 있는 문자.
html에서는 크롬등의 웹 브라우저가 평소와는 다른 의미로 해석.

💡엔티티 사용 예시

&엔티티명; &#엔티티숫자;

💡HTML에서 자주 사용하는 엔티티

&nbsp; :줄바꿈 없는 공백
&lt; : 보다 작은 ( < )
&gt; : 보다 큰 ( > )
&amp; : AND 기호 
&quot; : 큰 따옴표
&apos; : 작은 따옴표

엔티티로 표현하는 특수문자(심볼 문자)
&reg; : 등록상표
&cent; :센트
&pound; :파운드
&euro; : 유료