본문 바로가기
코딩 일반

HTML 기초 - 초간단 버전

by 라빅군 2023. 6. 24.

HTML 페이지의 기본 구조

HTML을 처음 접하는 분들을 위해 웹 페이지의 기본 구조를 쉽게 설명해보려고 합니다.

아래 정도만 알아도 웹개발 하시는 분들은 HTML을 몰라서 생기는 문제는 거의 없을 실 거예요. 

 

웹 페이지는 다음과 같이 이루어져 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>페이지 타이틀</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <header>
        <h1>이것은 헤더입니다.</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <main>
        <section>
            <h2>섹션 제목</h2>
            <p>이것은 섹션의 본문입니다.</p>
        </section>
    </main>

    <footer>
        <p>이것은 푸터입니다.</p>
    </footer>
</body>
</html>

여기에서 각 요소들의 역할은 다음과 같습니다:

<!DOCTYPE html>: 문서 유형을 나타냅니다. 여기에서는 HTML5를 사용하고 있음을 나타냅니다.
<html>: HTML 문서의 루트(root) 요소입니다.
<head>: 메타 정보의 컨테이너로 사용되며, <title>, <style>, <meta>, <link>, <script>, <noscript> 등의 요소를 포함할 수 있습니다. 이 정보는 브라우저에 의해 사용되지만, 보통 페이지 콘텐츠로는 표시되지 않습니다.
<title>: 문서의 제목을 나타냅니다. 브라우저의 탭이나 창 제목, 페이지를 즐겨찾기 할 때 사용되는 제목으로 사용됩니다.
<link>: 외부 리소스를 연결합니다. 여기서는 CSS 파일을 연결하고 있습니다.
<script>: JavaScript 코드를 포함하거나 연결합니다. 여기서는 외부 JavaScript 파일을 연결하고 있습니다.
<body>: 실제 콘텐츠를 담는 곳입니다.

 

 

또한, 웹 페이지를 구성하는 주요 태그들이 몇 가지 더 있습니다.


<header>, <nav>, <main>, <footer>: 웹 페이지의 구조를 나타내는 구조적 요소입니다. 헤더, 내비게이션, 본문, 푸터를 나타냅니다.
<h1>, <h2>: 제목 요소로, 콘텐츠의 계층 구조를 나타냅니다.
<p>: 문단을 나타냅니다.
<ul>, <li>: 순서가 없는 목록(unordered list)과 그 아이템을 나타냅니다.
<a>: 하이퍼링크를 나타냅니다. 여기서는 내비게이션 링크로 사용되었습니다.

 

HTML 요소란?

HTML 요소는 웹 페이지의 구성 단위로, 웹 페이지의 다양한 콘텐츠와 구조를 나타내는데 사용됩니다. HTML 요소는 시작 태그, 종료 태그, 그리고 그 사이의 콘텐츠로 구성되며, 필요에 따라 속성을 포함할 수 있습니다.

 


예를 들어, 아래는 간단한 HTML 요소의 예입니다.

<p>Hello, World!</p>

 

위 예제에서 <p>는 시작 태그, </p>는 종료 태그, 그리고 Hello, World!는 이 HTML 요소의 콘텐츠입니다. 이 요소는 텍스트를 담는 'paragraph'를 나타내는 <p> 요소입니다. 또 다른 예로, 링크를 만드는 HTML 요소인 <a> 요소는 다음과 같이 사용될 수 있습니다.

<a href="https://www.example.com">Visit Example.com</a>

 

이 경우, <a>는 시작 태그, </a>는 종료 태그이며, Visit Example.com은 콘텐츠입니다. href라는 속성이 추가되어 있어, 이 링크를 클릭하면 https://www.example.com로 이동하게 됩니다.

이와 같이 HTML 요소들은 웹 페이지의 모든 콘텐츠와 구조를 나타내는 핵심적인 구성 요소입니다.

 

아이디('id)와 클래스('class')란?

HTML에서 아이디(id)와 클래스(class)는 요소를 선택하거나 특정 스타일을 적용하는 데 사용하는 중요한 속성입니다.

아이디 (id) :
아이디는 HTML 요소를 고유하게 식별합니다.
각 페이지 내에서 아이디는 고유해야하며, 한 번만 사용할 수 있습니다. 즉, 같은 id 값을 가진 요소가 두 개 이상 존재해서는 안됩니다.
아이디는 주로 특정 요소를 유일하게 식별하거나 JavaScript에서 특정 요소에 접근하는 데 사용됩니다.

 

예시:

<div id="myUniqueID"></div>

 

클래스 (class) :
클래스는 한 개 이상의 HTML 요소를 그룹으로 묶는 데 사용합니다.
클래스는 페이지 내의 여러 요소에 동일하게 적용될 수 있으며, 하나의 요소는 여러 개의 클래스를 가질 수 있습니다.
클래스는 주로 CSS 스타일을 여러 요소에 적용하거나 JavaScript로 해당 클래스를 가진 요소들을 그룹으로 조작하는 데 사용됩니다.

 

예시:

 <div class="myClass1 myClass2"></div>

 

아이디와 클래스는 모두 HTML 요소에 스타일을 적용하거나 JavaScript로 해당 요소를 선택하고 조작하는 데 중요한 역할을 합니다. 그러나 아이디는 유일한 요소를 식별하는 데, 클래스는 여러 요소를 그룹으로 묶는 데 사용된다는 차이점이 있습니다.

 

그룹으로 묶는다는 것의 의미

"그룹으로 묶는다"라는 말은 클래스를 사용해서 HTML 요소들을 논리적으로 하나의 그룹으로 구분하거나 분류할 수 있다는 의미입니다.

예를 들어, 웹 페이지에 여러 개의 <div> 요소가 있고, 이 중 일부는 특별한 스타일이나 동작을 가져야 한다고 가정해봅시다. 이런 경우, 이 특별한 <div> 요소들에 공통된 class 속성을 부여함으로써, 그룹을 형성할 수 있습니다.

다음은 'highlight'라는 클래스가 적용된 HTML 요소들의 예입니다:

<div class="highlight">이 부분은 강조됩니다.</div>
<p>이 부분은 일반 텍스트입니다.</p>
<div class="highlight">이 부분도 강조됩니다.</div>

위의 예에서, "highlight" 클래스를 가진 <div> 요소들은 하나의 그룹으로 묶일 수 있습니다. 이 그룹에는 특별한 스타일(CSS)을 적용하거나, 특정 JavaScript 동작을 적용할 수 있습니다. 예를 들어, "highlight" 클래스를 가진 모든 요소의 배경색을 노란색으로 만드는 CSS 코드는 다음과 같습니다:

.highlight {
    background-color: yellow;
}

이와 같이 클래스를 이용하여 HTML 요소들을 그룹으로 묶어 스타일이나 동작을 일괄적으로 적용할 수 있습니다.

<link>에서 rel???

rel 속성은 <link> 요소가 어떤 목적으로 사용되는지, 또는 어떤 관계를 가지는지를 정의합니다. rel은 "relationship"의 줄임말입니다.

예를 들어, CSS 스타일시트를 HTML 페이지에 연결할 때, 우리는 <link> 요소의 rel 속성을 "stylesheet"으로 설정합니다. 이는 해당 링크가 스타일시트와 연결된다는 것을 브라우저에 알려줍니다. 예시는 아래와 같습니다.

<link rel="stylesheet" type="text/css" href="styles.css">

 

rel 속성은 여러 다른 값을 가질 수 있으며, 각 값은 링크의 다른 유형을 나타냅니다. 예를 들어, 아이콘 파일을 나타내려면 rel 속성을 "icon"으로 설정할 수 있습니다:

<link rel="icon" type="image/png" href="favicon.png">

이 외에도 "alternate", "author", "prefetch" 등 다양한 값들이 있습니다. 이 값들은 각각 다른 용도로 링크를 사용하도록 브라우저에 지시합니다.

 

<head> 부분 좀더 자세히 설명

1. `<title>`: 이 태그는 웹 페이지의 제목을 정의합니다. 이 정보는 브라우저 탭에서 표시되며, 검색 엔진 결과 페이지에서 페이지 제목으로 사용됩니다.

   예시:

   <title>My First Web Page</title>


2. `<style>`: 이 태그는 웹 페이지에 내장 CSS를 작성하는 데 사용됩니다. CSS는 웹 페이지의 레이아웃과 디자인을 제어합니다.

   예시: 

<style>
     body {
       background-color: lightblue;
     }
   </style>



3. `<meta>`: 이 태그는 웹 페이지에 대한 메타데이터를 제공합니다. 이 정보는 브라우저(페이지 표시 방법), 검색 엔진(키워드), 혹은 기타 웹 서비스에 의해 사용됩니다.

   예시: 

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="John Doe">


4. `<link>`: 이 태그는 현재 문서와 외부 리소스 간의 관계를 정의합니다. 대부분의 경우, 외부 CSS 파일을 연결하는 데 사용됩니다.

   예시:

   <link rel="stylesheet" type="text/css" href="styles.css">


5. `<script>`: 이 태그는 JavaScript 코드를 포함하거나, 외부 JavaScript 파일을 참조하는 데 사용됩니다.

   예시:

<script src="script.js"></script>


6. `<noscript>`: 이 태그는 브라우저가 스크립트를 지원하지 않거나 스크립트가 비활성화된 경우에만 표시되는 콘텐츠를 정의합니다.

   예시:

<noscript>Your browser does not support JavaScript!</noscript>

 

<script>

 

`<script>` 태그는 HTML 페이지에서 JavaScript 코드를 실행하는 데 사용됩니다. JavaScript는 웹 페이지를 동적으로 만들어줍니다. 즉, 페이지의 요소를 실시간으로 변경하거나, 사용자와의 상호작용을 처리하거나, 데이터를 웹 서버와 교환하는 등의 작업을 수행합니다.

`<script>` 태그를 사용하는 방법은 주로 두 가지입니다:

1. 인라인 JavaScript: `<script>` 태그 내부에 직접 JavaScript 코드를 작성합니다. 

<script>
    function myFunction() {
        var x = document.getElementById("demo");
        x.style.fontSize = "25px"; 
        x.style.color = "red"; 
    }
</script>



이 코드에서 `myFunction`은 페이지 내의 요소를 수정하는 간단한 JavaScript 함수입니다. `document.getElementById("demo")`는 "demo"라는 id를 가진 HTML 요소를 선택하고, 그 다음 두 줄은 해당 요소의 폰트 크기와 색상을 변경합니다.

2. 외부 JavaScript 파일 참조: `<script>` 태그의 `src` 속성을 사용해 외부 JavaScript 파일을 참조합니다.

<script src="script.js"></script>


이 경우, `script.js`라는 외부 파일에 있는 JavaScript 코드가 로드되어 실행됩니다. 이 방식은 코드를 별도의 파일로 관리할 수 있어 유지보수가 쉽고, 여러 페이지에서 동일한 코드를 재사용할 수 있다는 장점이 있습니다.

`<script>` 태그를 HTML 문서의 `<head>` 또는 `<body>` 섹션의 어디에서든지 위치시킬 수 있지만, 일반적으로는 문서의 로드 시간을 최적화하기 위해 `</body>` 태그 직전에 위치시킵니다. 이렇게 하면 HTML 문서의 렌더링이 JavaScript의 로딩 및 실행에 의해 차단되는 것을 방지할 수 있습니다.

 

 

이 정도의 내용만 알아도, 요즘 React, Vue, Angular 등으로 코딩하시는데, HTML 구조를 몰라서 막막한 기분은 들지 않을 거라고 생각합니다. 그럼 오늘도 Happy coding!

 

'코딩 일반' 카테고리의 다른 글

웹훅(Webhook)  (0) 2023.06.22

관련글

티스토리툴바