[웹개발 독학2] WEB1 - HTML, 구조관련 태그들과 외부링크 연결 그리고 웹사이트 완성

김나정·2025년 2월 26일

WEB1 html 생활코딩

웹개발

목록 보기

2/4

이 글의 범위 : 문서의 구조와 슈퍼스타들부터 ~ 까지

문서의 구조와 슈퍼스타들

What to Study?

이전 포스트인 웹개발 독학1에서 HTML의 문법을 마스터했다.
다르게 말하자면 문장을 만드는 방법을 마스터한 것이다.

문장이 모이면 페이지,
페이지가 모이면 책이 되는 것처럼

책에는 표지가 있고 표지에는 제목, 저자가 있듯이
정보가 많아질수록 정보를 잘 정리정돈하기 위한 체계
즉, 구조가 필요해진다.

앞시간에 알아보지않았던
빈도수가 가장 높은 슈퍼스타 태그들이 바로 이 구조를 표현하는 태그이다.

`<title>웹페이지의 제목</title>`

검색엔진이 웹페이지를 분석할 때
가장 중요하게 생각하는 태그이기 때문에
title 태그를 쓰지 않으면 정말 큰 손해
영어가 아닌 문자가 깨지는 경우 웹브라우저야
이 웹페이지는 UTF-8로 만들어졌기 때문에 UTF-8로 열어야 해~
이것을 웹브라우저가 알아듣게 해야 하므로 <meta charset="utf-8">를 추가.
[before]

[after]

HTML을 만든 사람들은 본문과 본문을 설명하는 정보를
각기 다른 태그로 분리해서 정리 정돈하기로 했는데
이것이 바로 head와 body이다.

`<head>본문을 설명하는 정보</head>`

`<body>본문</body>`

또
body 태그와
head 태그를 감싸는
하나의 태그를 두기로 약속했는데 바로 html태그이다.

`<html></html>`

또 이 웹페이지가
HTML로서 만들어졌다는 것을
표현하기 위해서 코드를 작성하는 첫 줄에

`<!doctype html>`

라는 코드를 추가한다.

``

html에서 주석 처리 하는 방법

전체 코드

<!doctype html>
<html>
    
    <head>
        <title>Consulting Reservation</title>
        <meta charset="utf-8">
    </head>  
    
    <body>
        <h1>[25민사대비반] 1:1 자소서 컨설팅 신청📚</h1>
    
        <img src="consulting.jpg"width="40%">
        <br>
        <p>
            <📑컨설팅 준비물>
            <ul>
                <li>생기부</li>
                <li>노트북 or 태블릿</li>
            </ul>
        </p>
        <p>
            <🚨안내 사항>
            <ol>
                <li>정확한 날짜는 강의실 및 컨설턴트 배치에 따라 정해진 후 공지 드립니다.</li>
                <li>컨설턴트 일정에 따라 대면 컨설팅이 아닌 ZOOM(실시간 화상통화)으로 대체될 수도 있습니다.</li>
            </ol>
        </p>
    </body>
</html>

이렇게 해서
전세계의 수 많은 웹페이지들이
공통적으로 가지고 있는
구조를 완전히 마스터한다!

HTML 태그의 제왕

`<a>외부 링크 연결</a>`

<a href="연결할 링크" target ="_blank"(새 페이지로 열어줌) title="어떤 링크인지 툴팁으로 설명">

<!doctype html>
<html>

    <head>
        <title>Consulting Reservation</title>
        <meta charset="utf-8">
    </head>  
    
    <body>
        <h1>[25<a href="https://www.minjok.hs.kr/" target="_blank" title="민사고 홈페이지"></a>] 1:1 자소서 컨설팅 신청📚</h1>
    
        <img src="consulting.jpg"width="40%">
        <br>
        <p>
            <📑컨설팅 준비물>
            <ul>
                <li>생기부</li>
                <li>노트북 or 태블릿</li>
            </ul>
        </p>
        <p>
            <🚨안내 사항>
            <ol>
                <li>정확한 날짜는 강의실 및 컨설턴트 배치에 따라 정해진 후 공지 드립니다.</li>
                <li>컨설턴트 일정에 따라 대면 컨설팅이 아닌 ZOOM(실시간 화상통화)으로 대체될 수도 있습니다.</li>
            </ol>
        </p>
    </body>
</html>

웹사이트 완성

지금부터는 웹사이트를 더욱 자세하게 만들 경우 학원의 정보를 노출하게 될 것 같아서... (~~밥줄이라 짤릴까봐 쫄았음~~)
제 프로필 소개 사이트로 다시 만듭니다☺

~~(급하게 만드는 초안..ㅋ)~~

파일 구조

코드

<!doctype html>
<html>
<head>
    <title>najeong.log</title>
    <meta charset="utf-8">
</head>  
<body>
    <h1><a href="jjjangmmman.html">najeong.log</a></h1>
    <ol>
        <li><a href="1.Introduce.html" title="Who is 나정">Introduce</a></li>
        <li><a href="2.Instagram.html" title="인스타 염탐하기">Instagram</a></li>
        <li><a href="3.Velog.html" title="공부 감시하기">Velog</a></li>
        <li><a href="4.GitHub.html" title="프로젝트 엿보기">GitHub</a></li>
        <li><a href="5.YouTube.html" title="일상 훔쳐보기">YouTube</a></li>
    </ol>
    <h2>NaJeong Kim</h2>
    <p> 안녕하세요 저는 서울여자대학교 정보보호학과 3학년 김나정입니다. 
        보안에 입문하기 위해 드림핵을 공부하다가 입문자들이 접근하기 쉬운 웹해킹을 알아보던 도중
        웹해킹을 공부하기 위해서는 웹개발을 해야한다는 조언을 듣고 지금 이 웹페이지를 만들고 있습니다.
    </p>
</body>
</html>

0.홈화면/jjjangmmman.html

1.Introduce.html

2.Instagram.html

<h2>Instagram</h2>
    
    <p> <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Instagram_logo_2022.svg" width="1%"> 
        <a href="https://www.instagram.com/jjjangmmman/" target="_blank">jjjangmmman</a> 
    </p>