8. 웹 개발 - HTML(4) - HTML 상용구

저는 대학에서 컴퓨터공학 학위를 공부하고 있는 대학생입니다.
물론 어려운 내용도 배웁니다만, 그걸 어렵게 설명하고 싶진 않습니다.
친구처럼, 젊은 선생님처럼 아주 쉽게 전달하고 싶습니다.
이 카테고리에서는 제가 관심 있어하는 웹 개발에 대해 말해보려고 합니다.

https://that-is-all.tistory.com/entry/studying-web3

3. 웹 개발을 위한 프로그램 두 가지

저는 대학에서 컴퓨터공학 학위를 공부하고 있는 대학생입니다.물론 어려운 내용도 배웁니다만, 그걸 어렵게 설명하고 싶진 않습니다.친구처럼, 젊은 선생님처럼 아주 쉽게 전달하고 싶습니다.

that-is-all.tistory.com

여태까지 간단한 HTML 문법과 몇 개 안 되는 태그들을 배웠습니다.

그런데 약간의 구조가 틀렸습니다.

그래서 우리는 HTML 상용구에 대해 공부해 보도록 하겠습니다.

[※ Visual Studio Code에서 ! 입력 후 Tab키를 누르면 HTML 상용구가 자동으로 입력됩니다. ※]

아래 HTML 코드는 오늘 공부할 문법이 들어있습니다.(내용은 아무 의미 없으니 신경 쓰지 마세요. 혹은, 본인의 이야기를 채우셔도 상관없습니다.)

<!DOCTYPE html>

<html>

<head>
    <title>My IMAGINATION</title>
</head>

<body>
    <h1>IMAGINATION - h1</h1>

    Imagination is the production of sensations, feelings and thoughts informing oneself. These experiences can be 
    re-creations of past experiences, such as vivid memories with imagined changes, or completely invented and possibly
    fantastic scenes. Imagination helps apply knowledge to solve problems and is fundamental to integrating experience
    and the learning process.

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, non! Veritatis odio, vel autem eveniet
        architecto facere, maiores rem eos dolorum veniam saepe quas eligendi dolore officiis libero totam accusantium.
    </p>

    <h2>Conceptual history - h2</h2>
    <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium soluta reprehenderit nulla voluptatum
        praesentium quas laudantium quis, quia magni veritatis repellendus hic ullam. Quis porro ab iste harum
        laudantium pariatur. Soluta, id. Nihil, minus reprehenderit corporis ipsam corrupti odio recusandae saepe porro
        enim officia eius. Blanditiis ab explicabo molestias iusto! Praesentium autem deserunt error quaerat magni voluptatem iste 
        non sapiente.
    </p>

    <h3>Ancient - h3</h3>
    <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit nam qui possimus. Animi exercitationem, incidunt
        ex aliquam perferendis quasi dolorum unde fugit, sint id alias cumque enim molestiae deserunt facere.
        Blanditiis quisquam consequuntur voluptas sunt alias quos quae temporibus cupiditate maxime, deserunt culpa est
        aliquid nesciunt quo assumenda beatae vel quam iste nulla quia? Tempore dolor corrupti reiciendis exercitationem
        veritatis! Praesentium id, itaque minima error eligendi quae, quidem facere dolores provident reprehenderit libero dolor
        quaerat ipsum ab reiciendis quis eveniet at tempora quod soluta esse eaque, corrupti cumque. Ratione, laborum.
        Amet, corrupti ab! Delectus provident velit beatae asperiores, autem, quisquam quaerat libero in quos atque,
        deleniti ea iusto culpa harum eligendi minima repudiandae excepturi tenetur odio praesentium? Corrupti,
        excepturi optio!
    </p>

    <h4>Middle Ages - h4</h4>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit veniam sed voluptates perspiciatis molestiae,
        inventore cupiditate! Accusamus amet perferendis, iure id expedita, repudiandae nihil et neque rem quo vitae.
        Odio.
    </p>

    <h5>Modern - h5</h5>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio fuga numquam ab architecto libero, ipsum
        dignissimos. Itaque, voluptate placeat impedit quasi vel beatae sunt praesentium nemo nisi consequatur
        repellendus dolores. Alias laudantium tempore earum. Voluptatibus, labore soluta! Animi tempore ipsa deserunt repudiandae ducimus
        libero quia, assumenda molestias id unde totam minima numquam harum voluptate! Consequuntur, in. Eaque a recusandae itaque.
    </p>

    <h6>Cross cultural - h6</h6>
    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam vero nemo quae dicta doloribus voluptate tempore.
        Et vel earum officiis? Amet vel cupiditate hic accusamus. Est voluptate vitae accusantium quis.
        Sit pariatur adipisci iure dolores impedit mollitia eaque perspiciatis, atque iusto delectus, nostrum
        consequuntur numquam. Autem, ipsum eligendi. Sunt, reiciendis! Mollitia tenetur nemo ut doloremque qui minima temporibus
        soluta accusantium. Minima tempore optio quisquam dolore ipsum. Voluptatum, itaque consequatur exercitationem repellendus, odio
        expedita labore pariatur neque voluptatibus veritatis, est dolorem obcaecati id maxime commodi magnam dolores dolore
        doloremque vel? Voluptates?
    </p>
</body>

</html>

위 코드의 결과는 아래 이미지와 같습니다.

HTML 상용구	설명
<!DOCTYPE html>	HTML5를 사용하고 있다는 표식으로 생각하면 됩니다. 아직 HTML5이 뭔지 말씀드린 적은 없지만, 쉽게 말하면 HTML의 최신 규격을 쓴다는 겁니다.
<head>	메타데이터 요소라고 부르기도 합니다. 페이지 상에 보이지 않는 내용을 담고 있습니다. 웹 페이지와 스크립트에 관한 모든 메타데이터 정보를 담고 있습니다.
<title>	문서의 제목을 지정하는 요소지만, 예상과는 다소 다를 겁니다. 이런 걸 문서 속 제목이라고 생각하겠지만 이것과는 다릅니다. <title> 요소가 바꾸는 건 브라우저 탭 상에 표시되는 정보입니다. Google은 <title> 요소로 검색을 합니다. 타이틀은 페이지마다 있어야 하는 아주 중요한 요소입니다. 타이틀이 없는 경우 이 파일의 이름은 '상용구.html'로 저장됩니다.
<body>	한 <head>에는 하나의 <body>가 필요합니다. 문서의 모든 내용을 담고 있는 요소입니다. <body>는 단 하나만 있을 수 있고, 지금껏 배웠던 요소들(내용, <h1>, 단락 등)을 추가할 수 있습니다.

※※※ HTML 파일에는 아직 아무것도 하지 않았습니다. 그냥 텍스트지만 확장자가 HTML이라서 파일을 이렇게 볼 수 있는 겁니다. 이건 아무 데도 올리지 않았습니다. 이 파일에 담긴 컨텐츠는 어떤 웹사이트나 서버에도 공개되지 않습니다. 이 기기에서 저만 볼 수 있습니다. 온라인 콘텐츠가 아니니까요. ※※※

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

'지식 Spoon > 1. 웹 개발' 카테고리의 다른 글

9. 웹 개발 - Visual Studio Code에서의 유용한 기능1 (0)	2025.05.19
7. 웹 개발 - HTML(3) - <p> 태그 & <h> 태그 (2)	2025.05.15
6. 웹 개발 - HTML(2) - <b> 태그 (0)	2025.05.14