[HTML & CSS] TIL 1. HTML 이해하기

in PROGRAMING STUDY on HTML & CSS


  1. HTML에대한 개념을 살펴본다.

  2. 태그

    • 시작 태그와 닫는 태그는 꼭 쌍으로 돌아다녀야 할까요?

    • 내용과 요소의 차이점에 대해서 말하시오.

  3. 속성을 정의할 때 어떤 형태로 쓰이나요?

  4. 태그는 중첩이 가능한가요? 가능하다면, 모든 태그가 중첩이 가능한가요?

  5. 중첩이 불가능한 태그가 있다면, 그 태그에 대해서 서술하시오.

  6. html의 기본 구조를 설명하세요.


boostcourse의 웹 UI 개발 강의를 듣고 정리한 필기입니다. 😀


1. HTML 이해하기

HTML은 HyperText Markup Language의 약자이다.

▶ HyperText 텍스트를 초월하는 이라는 뜻을 가지고 있다. 쉽게 이야기하면 클릭하면 다른 페이지로 이동하는 링크이다.

▶ Markup Language 는 프로그래밍 언어의 한 종류이다. 이 언어의 특징은 정보를 구조적으로 표현을 하는 언어라는 뜻이다.

즉, HTML은 문서의 구조나 혹은 문서의 내용을 다루고 있는 언어이다. 우리가 이용하는 웹사이트들이 모두 HTML 언어를 이용해서 만들어진다. 그리고 HTML은 파일 확장자로 html을 쓰게되고 그 파일 안에 HTML 코드를 작성하게 된다.

다음은 네이버메인 화면의 html 문서이다.

title

브라우져는 이러한 html 문서를 해석하여 우리에게 익숙한 화면으로 출력한다.

title

html은 90년대 초반, 영국의 물리학자 팀 버너스 리의 제안으로 개발되었다. 처음에 만들게 된 이유는 자신이 속해있던 연구소에서 연구원들이 신속하게 정보다 문서를 공유하기 위해서 만들었다. 지금의 웹과는 형태와 모양, 구체적인 방향은 다르지만, 정보를 공유한다는 목적 자체는 비슷하다.


2. HTML 문법

2.1 태그(TAG)

tag들은 ‘무언가를 표시하기 위한 꼬리표, 이름표’라는 의미가 있다. HTML은이러한 tag들의 집합이다.

▶ 특징1. 태그들은 부등호 (<>)로 묶여 있으며, <,> 사이에 태그의 이름이 들어간다.

▶ 특징2. 대부분의 태그는 여는 태그와 닫는 태그로 이루어지며, 닫는 태그 앞에는 / 기호가 붙는다.

▶ 특징3. 여는 태그와 닫는 태그 사이에는 실제 화면에서 나타나는 내용이 위치한다.

<h1>                <!-- opening tag, h1는 tag의 이름 -->
    Hello world     <!-- content -->
</h1>               <!-- closing tag -->

위 코드에서는 Hello word가 화면에 출력된다. 이렇게 내용을 포함한 태그 전체를 요소(Element)라고 한다. 태그와 요소는 다른 것이니 같은 의미로 사용하지 말자.

HTML에는 다양한 태그들이 존재한다. 각자의 이미가 있으니, 그 의미에 맞게 사용하는 것이 중요하며, 태그는 HTML 뿐만 아니라 마크업 언어에서 모두 사용된다.

▶마크업(MarkUp) 언어 : 태그(tag)와 같은 마크(mark)로 둘러쌓인 언어를 뜻한다. XML, SGML, XHTML 등이 존재한다.

2.2 속성(ATTRIBUTE)

HTML 태그들은 속성을 가지고 있다. 속성은 태그에 추가적인 정보나, 태그의 동작과 표현을 제어할 수 있는 설정값을 말한다.

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

속성은 이름과 값으로 이루어져 있는데 , 위 코드를 뜯어보면 이해가 쉽다. 시작태그 안에는 id는 이름에 해당하고, "title"은 값에 해당한다.

2.2.1 속성의 특징

▶ 특징1. 속성이름="속성값"의 형태가 된다

▶ 특징2. 이름과 값 사이엔 =를 제외하면 어떠한 공백도 들어가면 안 된다. 왜냐하면 태그 이름과 속성 이름은 ,(콤마)가 아닌 공백으로 구분을 해주기 때문이다.

▶ 특징3. 값은 항상 따옴표(‘ 혹은 “)로 감싸한다.

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

여러개의 속성을 써줄 때도, 마찬가지로 ,(콤마)가 아닌 공백으로 구분해줘야 한다. 여기서 속성의 순서는 결과 값이나 태그에 영향을 주지 않으며, 아래 코드와 위 코드는 완전히 같은 결과를 갖는다.

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

2.2.2 속성의 종류

▶ 종류1. 모든 태그에서 사용할 수 있는 속성(글로벌 속성)

▶ 종류2. 특정 태그에서만 사용할 수 있는 속성

▶ 종류3. 특정 태그에서는 필수적으로 있어야 하는 속성

▶ 특징4. 선택적으로 쓸 수 있는 속성

2.3 태그 중첩(Nesting Tags)

태그는 중첩이 가능하다. 즉, 태그 안에 다른 태그를 선언할 수 있다는 말이다. 중첩의 수와 종류는 문제가 되지 않지만, 때에 따라 정해진 태그만 중첩할 수도 있다. 이 부분에 대해서는 각 태그를 설명하는 챕터에서 자세히 언급된다.

<div>Contents here          <!-- 부모 태그, div는 tag의 이름 -->   
   <span>Here too!</span>   <!-- 자식 태그 -->   
</div>                      <!-- 자식 태그는 부모 태그의 종료 태그 밖으로 벗어나면 안된다. -->

이때, 쓰이는 용어가 부모태그, 자식태그이다. 부모태그란, 상위의 태그를 말하며, 자식태그는 부모 태그 안에 있는 태그를 말한다.

<!-- 자식 태그인 span이 </div>보다 아래에 있기 때문에 잘못된 문법이다. -->
<div>Contents here  
   <span>Here too! 
</div> 
   </span>

태그를 중첩할 때 주의할 점은 자식태그는 부모 태그를 벗어나서는 안 된다는 것이다.

2.4 빈 태그(Empty Tags)

[2.1 태그(TAG)]에서 언급한 태그들의 특징을 생각해보자. 태그는 여닫는 태그, 이 두 개가 한 쌍으로 이루어져 있다고 했으며, 이 설명을 쓸 때 대부분 이라는 단어를 같이 사용했을 것이다.

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

즉, 위 코드처럼 태그 중 한 개의 태그만을 쓰는 태그가 존재한다. 이러한 태그를 내용이 없는 빈 태그라고 한다. 내용을 넣지 않았기 때문에 닫는 태그가 필요하지 않다. 빈 태그는 내용만 비어있을 뿐이지, 속성을 통해서 화면을 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그이다.

title

위는 본 블로그 About에 있는 부분을 캡쳐한 것이다. 위 부분의 html은 어떻게 될까?

title

img 태그는 닫는 태그 없이 속성값으로만 존재하며, 그림 옆에 있던 글씨는 img 태그 밑에 있는 div 태그의 내용으로 들어가 있다. 이처럼 사진 경로가 속성값으로 선언된 src라는 속성을 참고해 이미지를 가지고 오고, 그것을 브라우저가 직접 화면에 내용을 그려주는 형식이다. 이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 한다.

2.5 공백

html 코드를 작성하다보면 공백을 어떻게 처리해야하나 하는 고민이 들 것이다. 기본적으로 HTML은 한 칸 이상의 공백을 모두 무시해버린다. ( 이 특징을 모르고 블로그 HTML 코드 만지다가 왼쪽 사이드 바의 디자인이 망가진 적이 있다…. )

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

위에 코드를 보면 첫번째 태그는 한간의 공백이 있고, 두번째 태그는 두칸 이상의 공백, 세번째 태그는 개행을 무시했다.

title

그런데도 불구하고 이 세개의 결과값은 모두 같다.

2.6 주석

주석은 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미한다. Javascript는 //를 주석으로 쓰고, Python은 #을 주석으로 쓴다. 위 코드블럭에서도 종종 보였지만, HTML의 주석은 <!--와 -->를 한 쌍으로 한다.

<div>Contents here          <!-- 부모 태그, div는 tag의 이름 -->   
   <span>Here too!</span>   <!-- 자식 태그 -->   
</div>                      <!-- 자식 태그는 부모 태그의 종료 태그 밖으로 벗어나면 안된다. -->

객체는 또 다른 자료형이다. 객체 또한 배열과 마찬가지로 여러 타입이 섞일 수 있다.


3. 문서의 기본 구조

HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 <html>요소로 구분한다.

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
</head>
<body>
  <h1>Hello world</h1>
  <div>Contents here
    <span>Here too!</span>
  </div>
</body>
</html>

title

3.1 문서타입

문서타입는 보통 DTD(doctype)이라고 부른다. 이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 한다.

위 코드에서는 <!DOCTYPE html>가 문서타입에 해당한다.

3.2 <html> 요소

문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있다.

▶ <head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않으며, 대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 한다.

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

3.3 트리구조

title

우리가 이것을 표현할 때 ‘트리구조’라는 말을 사용한다. 맨 상단에 문서 시작이라고 선언을 하면, 그 아래에 html이라는 상위 태그가 있고, 자식으로 head와 body가 있다. head와 body 아래는 각각, title과 h1, div가 존재한다. div 아래에는 span이 존재한다. 이런 식으로 부모 노드와 자식 노드로 구성되어있고, 그 안에 content(title 태그 안의 Page title)가 담기는 형태로 되어있다.


© 2020. by RIVER

Powered by RIVER