HTML (Hyper Text Mark-up Language) 시작하기

HTML은 Text로 작성된 웹페이지를 위한 Mark-up 언어 입니다.

지금 부터 예시 코드는가 나오는데 예시코드의 작성은 Visual studio code에서 진행하시면 됩니다.

Visual studio code를 활용한 HTML code 작성은 따로 정리하도록 하겠습니다.

가장 기본이 되는 code 틀은 아래와 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!!</title>
  </head>
  <body>
    Hello, HTML World!
  </body>
</html>

위 코드를 토대로 구성된 웹사이트는 아래와 같습니다.

이제 코드 내용을 하나씩 살펴보겠습니다.

<!DOCTYPE html>은 예외 입니다.

먼저

<!DOCTYPE html>

입니다.

위 문장은 Doctype Decoration이라고 부릅니다.

현재 문서가 HTML 문서이며 어떤 버전의 html을 사용하는지를 표현합니다.

위와 같이 적혀 있는경우는 최신 html을 사용한다는것을 의미하며 현재 최신 html버전은 html5입니다.

이어서 나오는 코드들은 웹사이트를 표시하기 위한 각 요소들의 표현입니다.

각 요소 안에는 다른 요소들이 포함 될 수 있으며 각 요소들은 무언가를 표현하고 있습니다.

그러한 요소들을 html tag 이라고 부르며

tag들은 <tag이름> 이걸로 시작해서 </tag이름> 이렇게 끝나는 모습으로 되어 있습니다.

이어서 살펴보겠습니다.

<html lang="en"> 
~~~
~~~~
</html>

html tag를 통해 문서를 묶어두며 여기서

lang="en"은 이 웹사이트가 english로 작성되어 있음을
웹사이트 검색엔진에게 전달해 줍니다.

다음은 아래 코드입니다.

<head>
   <title>Hello!!</title>
</head>

<head> </head>안에 있는 <title>Hello!!</title>은 이 웹페이지의 title이 Hello 임을 나타냅니다.

head는 웹사이트의 전체 모습을 표시하는 내용을 담고 있지는 않지만

web site에 대한 정보들을 가지고 있습니다.

예를들면? 위에 적혀 있는 title과 같은 웹사이트의 이름이겠지요.

이어서 나오는 것은 body입니다 .

<body>
   Hello HTML World!
</body>

<body>와 </body> 사이에는 웹사이트에 시각적으로 표시되는 내용들이 담기게 됩니다.

그럼 이제 전체 코드를 구조화 해서 보겠습니다.

이렇게 tree형태로 구조화 된 문서모델을 DOM(Document Object Model)이라고 합니다.

DOM을 보면 웹사이트의 구조를 파악하기 매우 유용합니다.

이제 HTML에서 상용되는 매우 기본적인 tag 들을 알아보겠습니다.

먼저 heading tag인 <h1>~<h6> tag 입니다.

앞서 작성한 코드를 가져다가 body부분에 <h1>Hello</h1>를 추가해보겠습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body>
        <h1>Hello</h1>        
    </body>
</html>

위 코드를 chrome으로 열어보면 아래와 같이 보여집니다.

이제 <h2>, <h3>, <h4>, <h5>, <h6>를 직접 추가해보시면 작게 나타나는지를 보실 수 있습니다.

다음은 ordered list/ unordered list 입니다.

ordered list는 말그대로 순서가 있는 list입니다.

unordered list는 말그대로 순서가 없는 list입니다.

ordered list의 tag는 <ol>입니다.

unorederd list의 tag는 <ul> 입니다.

실제로 추가를 해볼까요?

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body>
        <h3>ordered list</h3>
        <ol>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ol>
        <h3>unordered list</h3>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
        
    </body>
</html>

위 코드에 따라

ordered list는 숫자가 표시되고

unoredered list는 검은 동그라미가 표시됩니다.

이번에는 image 입니다.

web site안에 사진이나 그림을 넣고 싶을때 사용합니다.

아래와 같이 작성하시면 됩니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body>
        <h3>img</h3>
        <img src="cat.jpg" alt="cat">
    </body>
</html>

<img> tag의 경우 별도의 닫힘을 위한 </img>와 같은 tag가 필요하지 않습니다.

<img src=파일경로 alt=파일이 표시되지 않을때 나올 텍스트>

위와 같이 작성해 주시면 됩니다.

img tag는 추가적으로 이미지의 크기를 수정할 수 있습니다.

코드를 보시면

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body>
        <h3>img</h3>
        <img src="cat.jpg" alt="cat" width=100>
    </body>
</html>

위와 같이 width를 추가해서 가능합니다. height를 넣어줄 수도 있으며 width와 height 옆에 들어갈 숫자는 pixel 수를 의미 합니다.

이번에는 hyperlink 입니다.

hyperlink는 클릭하면 특정 링크로 이동시키는 기능입니다.

위와 같은 방법으로 만들 수 있습니다.

코드를 확인해보겠습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello!</title>
    </head>
    <body>
        <a href="https://www.google.com/">Google</a>
    </body>
</html>

아래 웹사이트에 있는 Google을 클릭하면 Google로 이동하게 되어 있습니다.

물론 아래 웹사이트 그림은 캡쳐본이기에 클릭이 되지는 않습니다.

이번에는 table입니다.

html에서는 표를 만들 수 있습니다.

아래와 같은 방법을 통해 가능합니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Table</title>
    </head>
    <body>
        <table>
            <thead>
                <th>name</th>
                <th>age</th>
            </thead>
            <tbody>
                <tr>
                    <td>SoC</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>man</td>
                    <td>20</td>
                </tr>
            </tbody>            
        </table>
    </body>
</html>

<table>로 table tag을 열고

<thead>를 열어서 head를 작성할 준비를 합니다.

그 안에 table head에 해당하는 <th> tag으로 첫번째 줄에 들어갈 말을 결정해 줍니다.

<thead>에 2개의 th를 만들었습니다.

따라서 아래 <tbody>를 만들고

그 안에 table row값에 해당하는 <tr>을 열면

그 곳에는 table data에 해당하는 2개의 값을 <td>를 통해 넣을 수 있습니다.

이번에는 Form입니다.

Form을 통해서는 다양한 입력을 수행 할 수 있습니다.

제공하는 기능이 위와 같이 많은데

여기서는 아래와 같이 간단한 것 부터 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Table</title>
    </head>
    <body>
        <form>
            <input type="text" placeholder="Full Name" name="name">
            <input type="submit">
        </form>
    </body>
</html>

이제 다른 기능을 수행하는 것도 만들어 볼 수 있습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Form</title>
    </head>
    <body>
        <form>
            <div>
                <input name="name" type="text" placeholder="Name" >
                <input name="password" type="password" placeholder="Password" >
            </div>

            <div>
                Favorite color?
                <input name="color" type="radio" value="red"> Red
                <input name="color" type="radio" value="green"> Green
                <input name="color" type="radio" value="blue"> Blue
                <input name="color" type="radio" value="other"> Other
            </div>

            <div>
                <input name="country" list="countries" placeholder="Country">
                <datalist id="countries">
                    <option value="South Korea">
                    <option value="Japan">
                    <option value="China">
                </datalist>
            </div>

        </form>
    </body>
</html>

위 코드는 꼭 직접수행해보시면 도움이 많이 될것 같습니다.

<input> tag에서 type을 password로 넣으면 자동으로 문자가 가려집니다.

이어서 다루게 될 내용은 웹사이트의 색깔이나 전체적인 구조등을 다루게 될텐데 여기서 CSS를 사용하게 됩니다.

CSS는 웹브라우저가 HTML을 받아서 어떻게 꾸며야 하는지에 대한 정보를 담고 있습니다.

여기서 부터는 다음시간에 다루도록 하겠습니다!

저작자표시 비영리 변경금지

'SW > html' 카테고리의 다른 글

CSS (Cascading Style Sheets) 시작하기 (0)	2020.10.11