보안/웹 해킹

웹 기초 공부 #3

Lluvia7319 2023. 9. 11. 16:59

이번 글에서는 HTML의 부모&자식 관계 그리고 HTML 문서의 구조에 대해 알아볼것이다.

 

HTML에서의 부모, 자식 관계는 주로 태그의 관계를 나타낼때를 말한다.

 

얘를 들어 다음과 같은 예시 코드가 있다고 생각하자.

<parent>
	<child></child>
</parent>

parent나 child 라는 태그는 없지만 얘를 들기 위해 사용한다.

 

위의 코드에서 parent 태그에 대한 child 태그를 자식 태그라고 한다.

또, child 태그에 대한 parent 태그를 부모 태그 라고 한다.

 

실제 코드를 예를 들자면

<p>
	<a href="https://lluvia-secu-study.tistory.com/">MyBlog</a>
</p>

위 코드에서 <a>는 <p>의 자식 태그이고 <p>는 <a>의 부모 태그이다.

 

하지만 꼭 <a>가 <p>의 자식 태그일 필요, <p>가 꼭 <a>의 부모 태그일 필요가 없다.

 

이는 상황에 따라 달라질 수 있다.

 

하지만 몇몇 태그는 부모 자식 관계처럼 관계가 고정인 태그들이 있다.

 

 

앞선 글에서 간단한 웹사이트를 만드는데 HTML이나 CSS등을 설명하는 페이지를 만든다고 했다.

즉, 메인 페이지에서 다른 페이지로 이동하기 위해 하이퍼링크를 모아둔 리스트를 만드려 한다.

 

목차 구성을 다음과 같이 해보자.

1. WEB<br>
2. HTML<br>
3. CSS<br>
4. JavaScript<br>
<h1>WEB</h1>
<img src="sample.jpg" width="500">

<p><h3>웹이란?</h3>월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다. 
<br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만
웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다. 
<br>다만 앞서 말했듯 인터넷과 웹의 의미가 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하는 서비스이다.</p>
...

하단부분 생략

꽤나 목차와 비슷하게 보이게 출력된다.

다만 HTML을 개발한 사람들은 저런 방식말고 목차를 표현할때 사용하라고 태그를 만들어 두었다.

 

바로 웹 기초 공부 #1하단에 설명한 <li>, <ul> 태그이다.

 

<li> 태그를 이용하여 다시 목차를 구성해보자.

<li>1. WEB</li>
<li>2. HTML</li>
<li>3. CSS</li>
<li>4. JavaScript</li>
<h1>WEB</h1>
<img src="sample.jpg" width="500">

<p><h3>웹이란?</h3>월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다. 
<br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만
웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다. 
<br>다만 앞서 말했듯 인터넷과 웹의 의미가 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하는 서비스이다.</p>
...

위와 같이 <li> 태그로 리스트를 만들어 목차화 시킬 수 있다.

그러나 <li> 태그는 목차에 순서를 붙이지 않는 것을 볼 수 있다.

또한 다른 목차와 구분이 불가능하다는 단점이 존재한다.

 

이러한 문제를 해결하기 위해 각 목차마다 경계를 제공하는 태그가 <ul>이다.

두개의 목차를 만들고 <ul>태그로 각각 묶어보자.

<ul>
    <li>1. WEB</li>
    <li>2. HTML</li>
    <li>3. CSS</li>
    <li>4. JavaScript</li>
</ul>
<ul>
    <li>Kim</li>
    <li>Lee</li>
    <li>Park</li>
    <li>Choi</li>
</ul>

두개의 목차를 만들어도 <ul> 태그로 인해 분리 되어 보이는것을 볼 수 있다.

 

다음 상황을 상상해보자.

만약 누군가 몇십만개에서 1억개 이상의 항목을 가진 리스트에 넘버링을 하려한다.

이때 우리가 배운 <li> <ul> 태그로 구성하기엔 손수 번호를 붙여야하는데

이때 사용하는 태그가 <ol>이다.

ul은 Unordered list 즉, 무질서한 리스트

ol은 Ordered list 즉, 질서있는 리스트

<ol> 태그는 리스트의 항목들에 넘버링을 해준다.

<ol>
    <li>WEB</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<ol>
    <li>Kim</li>
    <li>Lee</li>
    <li>Park</li>
    <li>Choi</li>
</ol>

이렇게 자식 태그가 부모 태그에 의해 영향을 받는 관계를 보았다.

위와 같은 관계를 태그의 부모, 자식 관계라고 한다.

 

이제 앞선 글 2개와 위의 글로 HTML에서 문장을 만드는 방법을 배웠다.

하지만 문장이 여러개 모이면 페이지가 되며 페이지가 모이면 책이 된다.

 

책에는 표지가 있고 표지에는 제목과 저자가 표기된다.

 

이렇게 같은것이 모이면 특정한 구조로 뭉쳐 하나의 무언가를 만들어낸다.

 

HTML도 마찬가지다. 따라서 지금부터는 HTML 문서의 구조에 대해 알아볼것이다.

 

앞서 웹 기초 공부 #1의 하단에서 본 최상위의 태그들이 어디에 쓰는지 본적이 없다.

바로 지금부터 알아볼 것이다.

 

1. title

우리가 HTML문서를 작성하고 웹 브라우저로 열어보면 웹 페이지의 이름이 HTML 파일명과 같음을 볼 수 있다.

무언가 맘에 안들어야 한다. (아닐수도 있고)

때문에 <title>이라는 태그를 이용하여 웹 페이지의 제목을 변경한다.

<title>WEB - main</title>
<ol>
    <li>WEB</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<h1>WEB</h1>
<img src="sample.jpg" width="500">

<p><h3>웹이란?</h3>월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다. 
<br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만
웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다. 
<br>다만 앞서 말했듯 인터넷과 웹의 의미가 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하는 서비스이다.</p>
...

<title> 태그를 적용시키니 웹 페이지의 이름이 바뀐것을 볼 수 있다.

이러한 웹 페이지의 이름은 검색엔진이 가장 중요하게 생각하는 요소이기 때문에
사용하지 않으면 손해이다.

 

2.meta

가끔 HTML문서에 한글을 사용하면 한글이 깨져 출력되는 경우가 존재한다.

이는 웹 브라우저와 HTML문서간의 인코딩 차이로 발생한다.

 

때문에 HTML문서 작성시 웹브라우저에게 어떤 방식으로 저장했다고 알려야한다.

 

이때 사용하는 태그가 HTML의 부가적인 정보를 알리는 <meta> 태그이다.

<title>WEB - main</title>
<meta charset="utf-8">

<ol>
    <li>WEB</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<h1>WEB</h1>
<img src="sample.jpg" width="500">

<p><h3>웹이란?</h3>월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다. 
<br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만
웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다. 
...

 위와 같이 <meta>태그의 속성을 이용하여 해당 HTML 파일이 UTF-8 방식으로 작성되었다고 알릴 수 있다.

 

3. head / body

HTML을 개발한 사람들은 HTML문서의 본문과 본문을 설명하기 위한 부분을 나누기로 했다.

따라서 본문 내용을 <body>로 묶고 본문을 설명하는 부분을 <head>로 묶는다.

<head>
    <title>WEB - main</title>
    <meta charset="utf-8">
</head>
<body>
    <ol>
        <li>WEB</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    
    <h1>WEB</h1>
    <img src="sample.jpg" width="500">
    
    <p><h3>웹이란?</h3>월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다. 
    <br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만
    웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다. 
    <br>다만 앞서 말했듯 인터넷과 웹의 의미가 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하는 서비스이다.</p>
    ...
</body>

위와 같이 본문 따로 본문 설명부 따로 각각의 태그로 묶어 사용하기로 정의 되어있다.

 

4. html / !doctype

앞서 작성한 문서의 처음과 끝을 나타내기 위한 용도로 <html>태그를 사용한다.

또한 <head>와 <body>는 <html>의 자식 태그로써 사용해야 문서가 구조화되고 유효하다.

또한 <!doctype> 태그를 이용하여 해당 문서가 HTML 문서임을 선언해야 한다.

<!DOCTYPE html>
<html>
    <head>
        <title>WEB - main</title>
        <meta charset="utf-8">
    </head>
    <body>
        <ol>
            <li>WEB</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>
        
        <h1>WEB</h1>
        <img src="sample.jpg" width="500">
        
        <p><h3>웹이란?</h3>월드 와이드 웹<strong>(World Wide Web)</strong>, 통칭 <u>웹</u>이나 <u>WWW</u>, <u>W3</u>라고 불리는 것은 인터넷을 사용하는 사용자들이 서로의 정보를 공유 할 수 있는 공간을 의미한다. 
        <br>이는 주로 인터넷과 같은 의미로 사용되는 경우가 대부분이지만
        웹의 경우 인터넷에 존재하는 수많은 서비스 중 하나일 뿐이다. 
        <br>다만 앞서 말했듯 인터넷과 웹의 의미가 혼용되어 사용될 만큼 인터넷의 가장 큰 부분을 차지하는 서비스이다.</p>
        
        ...
    </body>
</html>

위와 같이 HTML 구조를 만드는 태그와 각 역할에 대해 알아봤다.

 

자주 사용하는 사이트의 소스코드를 한번 구경해보면 위의 구조와 거의 유사하다.

가장 위에는 <!doctype html>이 보이고 그 아래와 문서 끝에는 <html> 태그가

그 사이에 <head>와 <body>가 보이며 등등

 

여태까지 배운 것들이 배우기 전과는 달리 보이기 시작한다.

 

이런 느낌 때문에 공부를 하는 건가 싶다.

 

다음 글에는 html의 link(링크)와 앞서 만들기 시작한 웹 사이트의 완성을 다뤄볼 것이다.

 

긴글 읽어주셔서 감사합니다.

 

<정보 출처>

생활코딩_WEB_WEB1:부모 자식과 목록

https://opentutorials.org/course/3084/18408

생활코딩_WEB_WEB1:문서의 구조와 슈퍼스타들

https://opentutorials.org/course/3084/18409

저작자표시 (새창열림)