itsme

html이해하기 본문

Study/코딩

html이해하기

itssmeee 2021. 1. 9. 02:47
반응형

 

html이란?

html은 프로그래밍 언어로 웹페이지를 만들 때 사용된다.

웹 사이트들이 모두 html을 사용하여 만들어진다.

 

html은 Hyper Text Markup Language의 줄임말이다.

Hyper Text는 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크를 의미한다.

Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능하다는 특징이다.

HTML은 파일 확장자로 .html을 쓰며, 그 파일 안에 html 코드를 작성하게 된다.

 

 

이제 html의 기초적인 문법을 알아보자!

 

1. 태그(TAG)

 

태그란?

HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙이다.

태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석된다.

우리가 다양한 태그들을 이용해 코드를 작성하면, 브라우저가 이를 인식해 내용을 표현하게 된다.

 

태그를 사용하는 방법

태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어간다.

대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙는다.

시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치하게 된다. 

ex) <h1>Hello, HTML</h1> => <h1>을 사용해 'Hello, HTML'을 출력하는 코드. <h1> = 시작태그, </h1>종료태그, Hello, HTML = 내용

 

요소란?

내용을 포함한 태그 전체를 요소(Element)라고 한다.

태그와 요소는 의미가 다르지만 많은 사람이 태그와 요소를 같은 의미로 사용하니 혼동하지 않도록 주의해야 한다.

 

태그 중첩

태그 안에 다른 태그를 선언할 수 있는데 중첩되는 태그는 부모 태그를 벗어나서는 안된다.

 

잘못된 태그 선언 예시)

<h1>Hello, <i>HTML</h1></i>

=> <h1>안에서 <i>가 시작되었으나, <i>보다 부모인 <h1>의 종료 태그가 먼저 선언되었다.

이렇게 엇갈리게 태그를 선언하는 것은 올바르지 않다.

 

올바른 태그 선언 예시) 

<h1>Hello, <i>HTML</i></h1>

=> <i>의 종료 태그를 먼저 선언해준 후 <h1>의 종료 태그를 선언해야 한다.

 

 

2. 속성

 

속성이란?

속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미한다.

 

속성을 사용하는 방법

속성은 이름과 값으로 이루어져 있다.

시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현한다.

속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현한다.

<h1 id="title">Hello, HTML</h1>

=> <h1>에 id 속성을 추가해 title 값을 선언한 코드이다.

 

여러 속성을 사용하는 방법

의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 선언할 수 있다.

여러 속성을 선언할 때는 공백으로 구분해서 사용.

<h1 id="title" class="main">Hello, HTML</h1>

=> <h1>에 id 와 class 2개의 속성을 선언한 코드이다. 순서는 상관이 없다.

 

속성의 종류

속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분된다.

또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분된다.

위의 예시에서 쓰인 id와 class 속성은 글로벌 속성이다.

 

3. 빈 태그

 

빈 태그란?

태그는 기본적으로 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있으며,그 사이에 내용이 들어가게 된다.

하지만 태그 중에는 그렇지 않은 태그가 존재하기도 한다.

이러한 태그를 내용이 없는 빈 태그라고 한다.

  • <br>
  • <img src="">
  • <input type="">

=> 빈 태그의 예시

빈 태그는 내용이 없어서 종료 태그가 필요하지 않다.

 

빈 태그의 특징

빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그이다.

빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우이다.

이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 한다.

빈 태그에 대체되는 태그만 있는 것은 아니며 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재한다.

위 예시 코드의 <br>이 바로 이 경우이다.

 

4. 공백

 

html은 두 칸 이상의 공백을 모두 무시한다.

<h1>Hello, HTML</h1>
<h1>Hello,     HTML</h1>
<h1>
    Hello,
    HTML
</h1>

위 세가지 모두 같은 Hello, HTML 텍스트가 화면에 나타난다.

 

5. 주석

 

주석이란?

주석은 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미.

html파일 내에 주석으로 표시를 해주면 브라우저는 해당 부분을 인식하여 해석하지 않는다.

주석의 시작은 <!-- 로 표시하고, -->표시로 종료한다.

 

6. html의 기본구조

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>

<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않는다.

<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어간다. 

 

첫날에 배운 내용은 끝!!!

이제부터 틈틈히 배운내용들은 이 블로그에 기록해야지!!!

부스트코스 끝날때까지 화이팅팅팅팅~~~

'Study > 코딩' 카테고리의 다른 글

CSS(2)  (0) 2021.12.10
CSS(1)  (0) 2021.12.10
콘텐츠모델, 시멘틱마크업, 블록 & 인라인  (0) 2021.01.10
html 태그(2)  (0) 2021.01.10
html 태그(1)  (0) 2021.01.09
'Study/코딩' Related Articles more