Frontend/HTML, CSS

[HTML] HTML 기본 내용

희디 2023. 7. 8. 05:02

웹 페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등 다양 

 

 

※ 기본 구성 요소 

 

1) 태그 

: 웹 페이지를 구성하는 요소(텍스트, 이미지, 버튼 등)를 정의하는 역할. HTML 문법을 이루는 가장 작은 단위

<태그명> 식의 형태

 

2) 속성 

: 태그에 어떤 의미나 기능을 보충하는 역할 (aka. 옵션) -> 사용해도 되고, 안 해도 됨 + 여러 개 사용 가능.

<태그명 속성명="속성값"> 형태

속성값이 여러개이면 큰 따옴표 안에 콤마로 연결 

 

3) 문법 : 태그와 속성으로 문법을 구성 

 

(3-1) content(내용)가 있는 문법 : 콘텐츠의 앞뒤를 태그로 감싸야 함. 

<title> My First Web </title>
<!-- 순서대로 시작태그, 콘텐츠, 종료태그 
이 세 가지를 모두 통틀어서 "요소(element)"라고 함 -->

 

(3-2) content(내용)가 없는 문법 : 태그로 앞뒤를 감쌀 필요가 없는 "빈 태그"

시작요소가 곧 요소. 

ex) <br> 태그 

 

4) 주석 : 실행결과에는 나타나지 않지만, 코드에 어떠한 메모나 설명을 남기고 싶을 때 사용 

 

<!-- content -->

 

 

※ 기본 구조

<!DOCTYPE html>    <!-- DTD : 문서형 정의 -->
<html lang="en">   <!-- 문서의 시작과 끝 html 태그-->
<head>             <!-- 문서 정보 정의 -->  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>            <!-- 웹 브라우저에 표시할 내용 -->
    <p>나만의 첫 번째 웹 페이지</p>
</body>
</html>

 

1) DTD (Document Type Definition) 

: 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것. 

 만들 때 항상 처음에 넣어야 함! 

 

<!DOCTYPE html>

최신형식인 HTML5으로 해석. 

 

2) html 태그 : HTML 문서의 시작과 끝을 의미 -> 모든 태그는 html 태그 안에 작성되어야 함!!

 

3) head 태그 : HTML 문서의 메타데이터를 정의하는 영역 

 

meta data - HTML 문서에 대한 정보, 웹 브라우저에서의 직접적 노출은 X

                 - meta, title, link, style, script 태그 등을 사용해 HTML 문서의 여러 정보 정의 

 

- meta 태그 : 메타데이터 정의에 사용 

 

☞ 아래는 HTML 문서에서 허용하는 문자집합 정의. 많은 언어를 허용하기 위해 UTF-8만을 사용 

<meta charset="UTF-8">

 

☞ 인터넷 익스플로러의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터. 

(+ 렌더링? 렌더링 엔진이란? 

서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 것. 렌더링 엔진은 HTML 문서를 파싱해서 DOM트리를 만든다.) 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

위와 같이 하면 구 버전의 렌더링 엔진을 사용하는 실험적 프로젝트가 아니라면 해당 태그를 정의하는게 좋음!

 

☞ 기기의 화면 너비에 맞추기 위해 사용하는 메타 데이터 태그

뷰포트 (viewport - 웹 페이지에 접속했을 때, 사용자에게 보이는 화면영역을 의미)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

☞ tilte 태그 : HTML 문서의 제목을 지정하는데에 사용.

엔진 사이트에서 HTML 문서를 찾을 때, title 태그에 작성된 제목으로 찾는다. 중복된게 여러개 발견시, 노출에 불이익 줌. 

모든 HTML 문서는 반드시 1개의 title 태그를 사용해 HTML 문서의 제목을 지정해주기!!

<title>My First Web</title>

 

4) body 태그 

: 웹 브라우저에 노출되는 내용 작성 영역. 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성

 

 

※ HTML 특징 

 

1. 블록 요소와 인라인 요소 

 

블록요소 : 사용할 때마다 줄 바꿈이 되는 태그 (ex. hn태그, p태그) 

인라인 요소 : 공간이 부족할 때만 줄 바꿈이 되는 태그 (ex. a태그, span태그)

 

2. 부모, 자식, 형제 관계 

사용 위치에 따라 부모, 자식, 형제 관계를 가짐.

부모 안에 자식이 있고, 부모안에 있는 자식들은 모두 형제관계. 

 

ex) html, head, body 태그에서

head와 body의 부모태그는 html,

html의 자식태그는 head와 body태그.

head와 body태그는 형제관계. 

 

3. 줄 바꿈과 들여쓰기 

for 코드의 가독성 -> 되도록 줄 바꿈과 들여쓰기 지키기. (부모/형제/자식 관계 파악이 쉽고, 이에 따라 구성하기)