HTML 편 - 3일차

개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 1. 09:00

3일차

12. 부모 자식과 목록

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

위 코드 처럼 태그가 서로 포함 관계에 있을 때 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라 한다.
그것에 좋은 예로 목차 또는 목록을 나타낼 때 사용되는 <li>태그가 있다.
<li>태그는 목록의 영어인 List의 앞 두 글자를 나타낸다.

<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>

위와 같이 쓸 수 있지만 목록이 더 늘어나고, 만약 그 목록이 위의 목록과 관계가 없는 목록이라면, 구분을 해야한다.
이런 경우에 쓰라고 고안된 태그가 <li>태그의 부모인 <ul>이란 태그이며, 다음과 같이 쓸 수 있다.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ul>
    <li>egoing</li>
    <li>k8805</li>
    <li>youbin</li>
</ul>

즉, <li> 같은 항목은 어디서부터 어디까지가 연관된 항목인지를 구분하기 위한 부모 태그가 필요하다.
만약 목록에 번호를 매겨야하며, 목록이 한 두개가 아닌 1억 개라고 가정해보자.
이러한 경우 숫자를 1억 번 써야하며 만약 첫 번째 목록을 지워 달라고 한다면 1억 개를 수정해야 한다.
손이 정말 빨라서 하나를 바꾸는데 0.1초가 걸린다고 하더라도 약 115일정도 걸린다.
이런 상황을 위하여 <ol>태그가 있다.

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

위 코드를 확인하면 자동으로 숫자가 매겨지는 것을 볼 수 있다.
<ol>이든 <ul>이든 공통적으로 'l'을 가지고 있으며, 이것은 list의 약자이다.
그리고 앞의 ol은 'Ordered List'의 약자이고, ul은 'Unordered List'의 약자이다.
빈도수가 매우 높은 <li> 태그와 <ul> 태그, 그리고 아쉽게도 순위권에는 들지 않지만 <ol> 태그까지 살펴보았다.

이처럼 <li>와 <ul>, <li>와 <ol>을 이해하고 나면 나중에 조금 더 복잡한, 이를 테면 아래와 같이 표(table)를 만들 때도 충분히 응용할 수 있다.

<table>
	<tr>
    	<td>head</td>
        <td>98.1%</td>
    </tr>
    <tr>
    	<td>body</td>
        <td>97.9%</td>
    </tr>
    <tr>
    	<td>html</td>
        <td>97.9%</td>
    </tr>
</table>

저자 유튜브 강의보기
- https://www.youtube.com/watch?v=aUtnyev_1vg

13. 문서의 구조와 슈퍼스타들

문장이 모이면, 페이지가 되고, 페이지가 모이면 책이 된다.
책에는 표지가 있고 표지에는 제목과 저자가 표기된다.
이처럼 정보가 많아짐에 따라 정보를 잘 정리 정돈하기 위한 체계, 구조라는 것이 필요하다.
HTML 태그의 랭킹중 1 ~ 5위 태그를 알아볼 것이다.

먼저 실습중인 웹 페이지의 제목을 보자.
다른 웹 페이지에는 내용을 잘 표현하는 제목을 표시하고 있는 반면 실습 예제는 파일명이 제목이다.
이를 해결하기 위해서 실습 예제 상단에 아래와 같이 작성한다.

<title>WEB1 - html</title>

<title>태그는 책으로 치면 책 표지의 제목과 같은 정보로 사용하기 때문에 쓰지 않는 것은 굉장한 손해이다.

만약 내용의 제목에 한국어 문자를 넣을 경우 출력된 결과가 다를 수 있다.
이는 글씨로 작성하면 그 글씨 그대로 컴퓨터에 저장되는 게 아니기 때문이다.
컴퓨터는 모든 정보를 0 아니면 1로 최종적으로 저장하는데, 0과 1을 어떻게 저장할 것인지에 관한 여러가지 약속들 중 하나가 에디터 하단에 있는 UTF-8이다.
그래서 웹 브라우저에게 이 웹 페이지를 열 때 UTF-8로 열라고 다음과 같이 지시(작성)한다.

<meta charset="utf-8">

<meta> 태그를 추가하면 글씨가 제대로 출력됨을 알 수 있다.
charset에서 char는 캐릭터(character), 즉 문자란 뜻이고, set은 집합이란 뜻이다. 즉, UTF-8로 문서를 읽으라고 브라우저에게 이야기하고 있는 것이다.

방금 배운 두 줄의 코드와 그 아래에서 지금까지 작성했던 코드 사이에는 차이가 있다.
밑에 있는 코드들은 본문인 반면 방금 배운 코드들은 본문을 설명한다.
HTML을 만든 사람들은 본문은 <body>라는 태그로 묶기로 약속했고, 그렇게 해야 한다.
본문을 설명하는, 즉 <body>를 설명하는 태그는 <head>로 묶기로 했다.
즉 HTML에 있는 모든 태그는 <head> 태그 또는 <body> 태그 중 하나 아래에 놓이게 된다. 그런 의미에서 이 두 개의 태그는 상당히 고위직 태그라 할 수 있다.
이 고위직 태그를 감싸는 단 하나의 최고위층 태그가 있는데 그것이 바로 <html>이라는 태그이다.

<!DOCTYPE html>
<html>
    <head>
        <title>WEB1 - html</title>
        <meta charset="utf-8">
    </head>
    <body>
        <ol>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ol>
        <h1>HTML</h1>
        <p>
            Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. 
            Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. 
            HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
        <img src="coding.jpg" width="100%">
        </p>
        <p style="margin-top:40px;">
            HTML elements are the building blocks of HTML pages. 
            With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. 
            It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. 
            HTML elements are delineated by tags, written using angle brackets.
        </p>
    </body>
</html>

그리고 이 <html> 태그 위에 관용적으로 이 문서에는 HTML이 담겨 있다는 뜻에서 <!DOCTYPE HTML>이라고 쓴다.
우리가 매일 같이 방문하는 웹 사이트 아무 곳이나 가서 [페이지 소스 보기]를 하면 대부분 이러한 구조로 되어 있다.

저자 유튜브 강의보기
- https://www.youtube.com/watch?v=sVt5nyz3Gdo

14. HTML 태그의 제왕

링크를 달 때 사용하는 <a>태그는 배가 정박 할 때 사용하는 닻(anchor:앵커)를 의미한다.
본문의 HTML에 링크를 달 텐데, HTML의 기술 공식 사용 설명서를 링크 걸면 좋을 것 같다.
HTML의 사용 설명서는 'html specification'으로 검색하라. (specification:명세, 설명서)
그렇게 해서 찾은 문서는 W3C라는 국제 기구에서 운영하고 있는 문서이고, W3C Recommendation이라고 하는 W3C 권고안이다.
- https://www.w3.org/TR/2011/WD-html5-20110405/

HTML5

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research

www.w3.org

링크를 걸고 싶은 곳을 <a>태그로 감싸고 새로고침해보면 링크는 걸리지 않는다.
<a>태그에 정보가 부족하기 때문에 속성을 추가해야 한다.
- href 속성 : HyperText의 첫 글자인 h와 웹 브라우저에게 이 값을 참조하라는 의미의 reference에서 앞의 세 글자인 ref를 따서 href라고 하는 속성에 지정한다.

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/">
    Hypertext Markup Language (HTML)
</a>

만약 클릭했을 때 새 탭에서 열리게 만들고 싶다면 target 속성에 _blank로 지정해준다.

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank">
    Hypertext Markup Language (HTML)
</a>

또 이 링크를 클릭하기 전에 툴팁처럼 무엇인가를 알려주고 싶다면 다음과 같이 수정한다.

<a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification">
    Hypertext Markup Language (HTML)
</a>

그런 다음 페이지를 새로고침하고 링크에 마우스 커서를 올려 보면 툴팁이 나타나는 것을 확인할 수 있다.

저자 유튜브 강의보기
- https://www.youtube.com/watch?v=V3pkC1hE-as

15. 웹 사이트 완성

웹 페이지를 만드는 방법을 배웠고, 웹 페이지와 웹페이지를 링크하는 길로 연결하는 방법도 배웠다.
지금부터 우리가 만든 웹 페이지들을 엮어서 하나의 웹 사이트를 만들어보자.

먼저 가장 큰 제목을 <h1>태그로 추가한다.

<h1>WEB</h1>

'WEB'과 'HTML'의 레벨이 같은 레벨이므로 HTML의 <h1>을 <h2>로 강등시킨다.

<h2>HTML</h2>

그리고 각각의 목록을 링크로 만들기 위해 다음과 같이 작성한다.

<h1><a href="index.html">WEB</a></h1>
<ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
</ol>

에디터에서 1.html을 복사하여 2.html, 3.html, index.html을 만듭니다.
2.html은 CSS에 관한 내용이므로 내용을 CSS로 수정한다.
3.html은 JavaScript에 관한 내용이므로 내용을 JavaScript로 수정한다.
index.html은 WEB에 관한 내용이므로 내용을 WEB으로 수정한다.

<!--index.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>WEB1 - Welcome</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1><a href="index.html">WEB</a></h1>
        <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
        </ol>
        <h2>WEB</h2>
        <p>
            The World Wide Web (WWW), commonly known as the Web, is the world's dominant software platform.[1] It was originally a hypertext document management system[2] accessed over the Internet.[3]
            The resources of the Web are transferred via the Hypertext Transfer Protocol (HTTP), may be accessed by users by a software application called a web browser, and are published by a software application called a web server.
            Web resources may be any type of downloaded media, but web pages are hypertext documents formatted in Hypertext Markup Language (HTML). Special HTML syntax displays embedded hyperlinks with URLs, which permits users to navigate to other web resources. In addition to text, web pages may contain references to images, video, audio, and software components, which are either displayed or internally executed in the user's web browser to render pages or streams of multimedia content.
            Multiple web resources with a common theme and usually a common domain name make up a website. Websites are stored in computers that are running a web server, which is a program that responds to requests made over the Internet from web browsers running on a user's computer. Website content can be provided by a publisher or interactively from user-generated content. Websites are provided for a myriad of informative, entertainment, commercial, and governmental reasons.
        </p>
    </body>
</html>

<!--1.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>WEB1 - HTML</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1><a href="index.html">WEB</a></h1>
        <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
        </ol>
        <h2>HTML</h2>
        <p>
            <a href="https://www.w3.org/TR/2011/WD-html5-20110405/" target="_blank" title="html5 specification">
                Hypertext Markup Language (HTML)
            </a> 
            is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. 
            Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. 
            HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
        <img src="coding.jpg" width="100%">
        </p>
        <p style="margin-top:40px;">
            HTML elements are the building blocks of HTML pages. 
            With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. 
            It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. 
            HTML elements are delineated by tags, written using angle brackets.
        </p>
    </body>
</html>

<!--2.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>WEB1 - CSS</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1><a href="index.html">WEB</a></h1>
        <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
        </ol>
        <h2>CSS</h2>
        <p>
            Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
            CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.
            Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.
            The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.
            The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.
        </p>
    </body>
</html>

<!--3.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>WEB1 - JavaScript</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1><a href="index.html">WEB</a></h1>
        <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
        </ol>
        <h2>JavaScript</h2>
        <p>
            JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.[11] Over 97% of websites use JavaScript on the client side for web page behavior,[12] often incorporating third-party libraries.[13] All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.
            JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[14] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).
            The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O.
            JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js.
            Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.
        </p>
    </body>
</html>

그러면 최종적으로 다음과 같은 4개의 페이지가 완성되고 웹 페이지에서 각 링크를 클릭하여 해당 페이지로 넘어갈 수 있다.

저자 유튜브 강의보기
- https://www.youtube.com/watch?v=w5S0GACgL3U

16. 원시 웹

이 수업은 두 개의 산으로 이뤄져 있다.
하나의 산은 웹 페이지를 만드는 것이며, 그 과정에서 코딩이 무엇인가를 파악하는 것이 목표였고, 그 목표에 도달하였다.
또 하나의 산은 내가 만든 웹 페이지를 인터넷을 통해 누구나 가져갈 수 있게 하는 것이다.
그 과정에서 인터넷이 무엇인가를 이해하게 될 것이다.
이번 수업에서는 지금까지의 여정에 대한 휴식이면서 앞으로 가야 할 여정에 대한 준비를 할 수 있는 시간이다. 바로 웹의 역사이다.
현재 2022년, 웹이 처음 등장한 지 32년이 지났다.
웹을 처음 공부하는 사람은 전체가 보이지 않아 마치 지도 없이 여행하고 있는 기분이 들 것이다.
그래서 웹의 역사를 거슬러 올라가서 웹이 세상에 처음 등장했던 시점에 도착하면, 웹의 본질이 있을 것 같다.

Internet VS WEB
인터넷이 도시라면, 웹은 도시 위에 있는 건물 하나이다.
인터넷이 도로라면, 웹은 도로 위를 달리는 자동차 한 대이다.
인터넷이 운영체제라면, 웹은 운영체제 위에 있는 프로그램 하나이다.
인터넷이라는 전체 안에 웹이라는 부분이 존재하고 또 웹과 동급인 여러가지 서비스들이 있다.
이 관계를 역사적으로 살펴보면 1960년과 1990년, 정보기술 역사상 가장 중요한 사건 2개가 있다.

1960년에 인터넷이 등장하고 무려 30년이 지난 후에 웹이 등장한다.
그러면 1960년으로 돌아가보자.1960년에는 핵이 화두였고, 당시 인류는 핵전쟁을 치른 직후였다.
미국에서는 미국이 핵 공격에 당한 상황을 시뮬레이션해봤고 그 결과 통신 쪽에서 아주 심각한 약점들이 드러난다. 당시 통신 시스템은 중앙집중적이었기 때문에 핵 공격을 당하면 통신이 마비되는 심각한 상황이었다. 그래서 핵 공격에도 견딜 수 있는 강인한 통신 시스템이 필요하게 되는데 바로 이것이 인터넷이다.
인터넷은 1960년에 출발하고 30년이란 시간 동안 인터넷은 천천히 확산된다. 그러다 1990년에 웹이 출현하면서 완전히 새로운 길을 걷게 된다.

웹의 고향은 스위스이다.
1990년 10월 팀 버너스 리는 세계 최초로 웹 페이지를 만드는 편집기를 만든다.
그리고 1990년 11월에 세계 최초의 웹 브라우저인 World Wide Web이라는 프로그램을 만든다.
1990년 12월 24일, 팀 버너스 리와 동료는 웹 서버라는 프로그램을 만들고 그 프로그램이 설치되어 있는 컴퓨터에 info.cern.ch 라는 주소를 부여한다.
http://info.cern.ch/

http://info.cern.ch

info.cern.ch

웹은 여기서 시작한다. 이 웹 사이트가 웹의 메소포타미아인 것이다.
이 때 완성한 웹을 저자는 원시웹이라고 부르고 싶다고 한다.

저자 유튜브 강의보기
- https://www.youtube.com/watch?v=pYOEy_mAMpI

해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

'개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글

CSS 편 - 1일차 (0)	2025.05.04
HTML 편 - 5일차 (2)	2025.05.03
HTML 편 - 4일차 (1)	2025.05.02
HTML 편 - 2일차 (0)	2025.04.30
HTML 편 - 1일차 (2)	2025.04.29

ABOUT ME

애딤프의 블로그

3일차

12. 부모 자식과 목록

13. 문서의 구조와 슈퍼스타들

14. HTML 태그의 제왕

15. 웹 사이트 완성

16. 원시 웹

'개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

3일차

12. 부모 자식과 목록

13. 문서의 구조와 슈퍼스타들

14. HTML 태그의 제왕

15. 웹 사이트 완성

16. 원시 웹

'개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바