IT 성장일기

[HTML] HTML 기초 찍먹하기 본문

Mark up/HTML

[HTML] HTML 기초 찍먹하기

고 양 2023. 9. 26. 23:39
반응형
HTML 기초 찍먹하기

 

HTML이 뭔가요?

Hyper Text Markup Language의 약자로서 웹페이지를 뼈대를 구성하는 언어입니다.

우리가 보는 웹페이지는 대부분 HTML로 이루어져 있습니다.

(프로그래밍 언어가 아니라 마크업 언어입니다!)

 

HTML 태그
HTML은 저마다의 역할을 가지고 있는 여러 가지의 태그로 구성됩니다. 

태그는 꺽쇠괄호('<', '>')로 표현되며 아래와 같이 시작태그와 종료태그 한 쌍으로 이루어지는 것이 일반적입니다.
HTML태그를 닫지 않아도 문서의 표시는 가능하지만 반드시 태그를 닫는 습관을 들이는 것이 좋습니다.
예상치 못한 예외나 오류를 발생시킬 수 있기 때문입니다.

<table></table>

 

몇 가지 예외적으로 시작태그만으로 사용되는 태그가 존재하는데 이를 빈 태그(Empty tag)라고 부릅니다.

<br>
<hr>
<img>

 

 

HTML의 기본구조

HTML Intro

안녕하세요 :)

이거 아마 이렇게 보일거예요!ㅎㅎ
<!DOCTYPE html>
<html lang="ko">


<head>
    <meta charset="UTF-8">
    <title>HTML Intro</title>
</head>


<body>
    <div style="border:1px solid; padding:15px;">
        <h1>안녕하세요 :)</h1>
        <pre>이거 아마 이렇게 보일거예요!ㅎㅎ</pre>
    </div>
</body>
 
 
</html>

<! DOCTYPE html> 👉🏻 이 문서가 HTML5 버전임을 명시합니다.

<html lang="ko">  👉🏻 HTML 문서의 루트 태그이며 주 언어를 한국어로 설정하고 있다고 합니다.

<head>                       👉🏻 HTML 문서의 메타데이터(Meta data)를 정의합니다.
<body>                       👉🏻 브라우저를 통해 사용자들에게 표시되는 부분을 정의하는 부분입니다.

 

 

HTML 요소의 구조

 

HTML 요소는 여러 가지 속성을 가질 수 있습니다.
예를 들면 각각의 요소에 대한 CSS 스타일을 적용할 수도 있고 id나 name처럼 고유한 값을 부여할 수도 있습니다.

<element attribute="value"></element>

속성명은 따옴표(quote)를 사용하지 않지만 속성값은 반드시 따옴표로 감싸주어야 합니다.
이때 큰따옴표인지 작은따옴표인지는 구분하지 않지만 따옴표 쌍은 반드시 맞춰주어야 합니다 (기본이지!)

<!-- normal -->
<element attribute='value'>Inner Text</element>
<element attribute="value">Inner Text</element>

<!-- Bad Case! -->
<element attribute="value'>Inner Text</element>

 

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂

 

* 참고 : http://www.tcpschool.com/

반응형
저작자표시 비영리 변경금지 (새창열림)

'Mark up > HTML' 카테고리의 다른 글

[HTML] HTML 텍스트 요소를 정리해 보자 - Character Set 과 Entity 문자  (0) 2023.10.20
[HTML] HTML 텍스트 요소를 정리해 보자 - 축약어와 주소  (0) 2023.10.20
[HTML] HTML 텍스트 요소를 정리해 보자 - 주석과 인용구  (0) 2023.10.05
[HTML] HTML 텍스트 요소를 정리해 보자 - 서식  (2) 2023.10.04
[HTML] HTML 텍스트 요소를 정리해 보자 - 제목과 문단  (0) 2023.10.04
'Mark up/HTML' Related Articles more