기본 구성

728x90

⭐️ HTML 기본 개념 ⭐️

01.HTML 이란?

HTML (HyperText Markup Language) 은 웹 사이트의 모습을 기술하기 위한 마크업 언어를 의미합니다.
웹의 기초적인 구성요소로, 웹 페이지의 구조와 콘텐츠의 의미를 정의합니다.

참고하기

1HyperText 는 웹 페이지를 다른 페이지로 연결하는 링크를 뜻합니다.

2HTML 의 최초 제안자는 유럽 입자 물리 연구소 CERN 의 물리학자 "팀 버너스리 (Tim Berners-Lee)" 입니다.

"팀 버너스리"는 연구원들의 문서 공유 체계를 시작으로 인터넷 기반 하이퍼텍스트를 개발하였고, 이후에 TCP/IP 통신규약을 만든 전산학자 "빈트 서프 (Vinton Gray Cerf)" 와 함께 인터넷의 아버지로 불립니다.

3웹의 기초적인 구성요소 3가지

HTML웹 페이지의 구조와 콘텐츠의 의미를 정의합니다. ☛ 건물의 뼈대 / 사람의 골격
JavaScript문서와 유저의 상호작용을 위한 웹 페이지의 기능과 동작을 정의합니다. ☛ 엘레베이터 등 건물의 기능 / 사람의 근육조직 및 신체기관
CSS웹 페이지에 관한 다양한 스타일을 정의합니다. ☛ 건물의 디자인 / 사람의 옷

02.HTML 기본 구성

1요소 (element)

HTML 문서를 이루는 개별적인 요소를 의미하며, 대부분의 요소들은 '태그, 속성, 내용'으로 이루어져 있습니다.
종료 태그 없이, 단독으로 사용하는 요소를 '빈 요소 (empty elements)'라고 합니다. ex)

This is a paragraph. 
<여는 태그> "속성 값" 내용 <닫는 태그>
// class ☛ 속성 명

2태그 (tag)

HTML 문서를 구성하는 기본 단위로, HTML 문서를 이루는 문법적 표시를 말합니다.
HTML 을 기술하기 위해 사용하는 '명령어'를 표시하는 것을 의미하며,
HTML 명령어의 형태는 각 괄호 < > (여는 태그와 닫는 태그)로 구성되어 있습니다.

기본 요소의 예

기본 태그의 예
요소명	설명
<meta>	HTML 문서의 설명, 키워드, 문서의 작성자 등을 지정합니다.
<title>	제목 표시줄 또는 페이지 탭에 보이는 HTML 문서의 제목을 설정합니다.
<link>	HTML 문서에 외부의 리소스의 관계를 명시하여 연결합니다. CSS 파일을 HTML 문서에 연결할 때 제일 많이 사용합니다.
<style>	HTML 문서 내에서 스타일(CSS) 정보를 정의합니다.
<script>	HTML 문서 내부에서 자바스크립트를 정의하거나 외부에서 자바스크립트 파일을 불러올 때 사용합니다.

3DOCTYPE 선언

HTML 문서를 작성할 때에는 첫 문장으로 DOCTYPE 을 선언하며, 이는 브라우저에게 작성된 문서의 형식을 알려주는 것을 의미합니다.
브라우저는 문서의 형식을 확인하고 태그/요소의 지원 여부, 속성처리 기준에 따라 정보를 표시합니다.
DOCTYPE 선언은 브라우저가 HTML 문서의 내용을 올바르게 표시하도록 돕는 역할을 합니다.

 <!DOCTYPE html>          // DOCTYPE 을 선언하며 시작
    <html lang="ko">         // lang 속성 설정
    <head>
        <meta charset="UTF-8">       // charset 속성 설정
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

4속성 (attribute)

태그의 동작을 제어하기 위해 태그 내부에 부가적인 설정값을 선언하는 것을 말합니다.
요소의 기본 기능을 수정하거나 스스로 기능하지 못하는 특정 요소에 기능을 제공합니다.
속성은 여는 태그 안에 속성 명 = " 속성 값 " 의 형식으로 기술합니다.

참고하기

1하나의 태그 안에 '속성 명' 과 '속성 값' 은 동시에 여러 개가 존재할 수 있습니다.

ex) 속성 명 ☛ style , width, height, alt 등

속성의 예

1lang 속성

HTML 을 문서에서 사용하는 언어를 설정하는 것을 말합니다.
시각 장애인들이 사용하는 스크린 리더 (음성 낭독 프로그램) 은 lang 속성의 언어 설정에 따라 문서를 읽어주므로, lang 속성은 HTML 문서에서 반드시 정의해야 하는 속성입니다.

< html lang = "ko" > 한국어로 설정 : " 일, 이, 삼 " 으로 읽음
< html lang = "en" > 영어로 설정 : " 원, 투, 쓰리 "로 읽음

참고하기

1주 언어 설정 이후, 특정 부분에서 언어를 바꿔주어야 한다면 해당 부분에만 다른 언어로 지정할 수 있습니다.

Ich liebe dich

2charset 속성

< meta > 태그 안에 문자 인코딩 (charset) 방식을 설정합니다.
charset 속성의 값으로 주로 UTF-8 을 사용하는데, UTF-8 는 거의 대부분의 문자를 처리할 수 있습니다.

< meta charset = " UTF-8 " >

참고하기

1viewport현재 화면 상의 표시되고 있는 영역을 뜻합니다.

모바일 해상도에 맞게 HTML 문서의 가로 세로 크기를 조절해주는 속성입니다.
웹 페이지를 만들 때 뷰포트 설정을 해 주어야 반응형 페이지를 제대로 동작시킬 수 있습니다.

< meta name = " viewport " >

5마크업 (markup)

표시를 하여 문서를 구조화한다는 뜻이며, 위의 ' 요소(element)들로 코딩하는 것 '을 의미합니다.
웹 브라우저가 해독할 수 있도록 문서를 구조화하는 언어를 ' 마크업 언어 '라고 합니다.

참고하기

1마크업의 종류문서의 형태를 표현하는 '표현적 마크업',

프로그램이 문서를 처리하는 방법을 서술하는 '절차적 마크업',

문서가 표현하는 내용을 기술하는 '기술적 마크업'이 있습니다.

728x90

'HTML' 카테고리의 다른 글

블록 / 인라인 요소 (2)	2022.08.21
시멘틱 구조 요소 (3)	2022.08.16
W3C (웹 표준, 웹 접근성, 웹 호환성) (7)	2022.08.09

깜냥깜냥🐾코딩 혜윰

기본 구성

⭐️ HTML 기본 개념 ⭐️

01.HTML 이란?

참고하기

02.HTML 기본 구성

1요소 (element)

2태그 (tag)

기본 요소의 예

3DOCTYPE 선언

4속성 (attribute)

참고하기

속성의 예

1lang 속성

참고하기

2charset 속성

참고하기

5마크업 (markup)

참고하기

'HTML' 카테고리의 다른 글

댓글

티스토리툴바

기본 구성

⭐️ HTML 기본 개념 ⭐️

01.HTML 이란?

참고하기

02.HTML 기본 구성

1요소 (element)

2태그 (tag)

기본 요소의 예

3DOCTYPE 선언

4속성 (attribute)

참고하기

속성의 예

1lang 속성

참고하기

2charset 속성

참고하기

5마크업 (markup)

참고하기

'HTML' 카테고리의 다른 글

관련글

댓글

티스토리툴바