'HTML, CSS' 카테고리의 글 목록

HTML, CSS

[HTML] HTML란? 2025.06.22

[HTML] HTML란?

음악하는 개발자 라쿤 2025. 6. 22. 21:40

2025. 6. 22. 21:40

HTML란??

HTML(Hypertext Markup Language, 하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 웹 페이지가 어떤 구조로 구성되어 있는 지 브라우저가 알 수 있도록 하는 마크업 언어이다.

단순하게 말해서 Word처럼 문서 작성을 한다고 생각하면 된다.

HTML은 Element로 구성되어 있으며 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분을 감싸고 마크업합니다.

Tags는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나 단어를 강조하는 역할등을 합니다.

여는 태그(Opening tag): 이것은 요소의 이름과, 열고 닫는 꺽쇠 괄호(<, >)로 구성됩니다. 요소가 시작부터 효과가 적용되기 시작합니다.
닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같습니다. 이것은 요소의 끝에 위치합니다. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다.
내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트이다.
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 한다.

HTML의 태그 종류

HTML의 형태

 <!DOCTYPE HTML>
 <!-- 웹 페이지의 여러 정보를 작성 -->
 <html lang="en">
    <head>
        <!-- 웹 페이지에서 글자를 어떤 방식으로 인코딩 할 것인가 -->
        <meta charset="UTF-8">
        <!-- 클라이언트의 기기, 장치를 인식할 때 사용 -->
        <meta name="veiwport" content="width=device-width, initial-scale=1.0">
        <!-- 탭에 표시될 내용 -->
        <title> Document</title>
        <!-- CSS 파일을 다운받을 수 있는 주소 작성 -->
        <!-- CSS 코드 -->
    </head>
    <!-- 웹 브라우저 화면에 나올 내용을 작성 -->
    <body>
         <!-- 여기에 Element를 작성한다. -->
         <!-- JS 파일을 다운 받을 수 있는 주소 -->
         <!-- JS 코드 -->
    </body>
 </html>

위의 코드처럼 HTML은 크게 Header와 Body로 구성되어 있다.

Header에는 각종 설정 정보가 들어가 있다. (예를 들어, 클라이언트 기기 정보 혹은 CSS 코드 및 파일 위치 등)

그에 반해 Body에는 데이터를 어떻게 보여줄 것인지에 대해서 작성하는 공간이다.

즉, HTML을 공부하는 것은 태그를 공부하여 작성하는 것이다.

제목 달기

제목은 h1, h2처럼 태그를 달아주면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>글씨가 크게</h1> <!-- 제목 태크는 h1, h2 등으로 구성되어 있다. -->
</body></html>

링크 달기

링크는 href라는 태그를 달면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="http://www.naver.com">링크를 만들어요</a>
</body></html>

이미지 파일 달기

이미지 파일은 img라는 태그를 단 후, 파일 주소를 입력하면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="ubuntu.jpg">
</body></html>

테이블 달기

테이블을 달기 위해서는 table이라는 태그를 연 후 내부에 tr(행을 의미한다. / 가로) th(열을 의미한다. / 세로) 태그를 달아서 작성한다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <tbody><tr>
            <th>열1</th>
            <th>열2</th>
        </tr>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
        </tr>
    </tbody></table>
</body></html>

비정렬 목록 태그

비정렬하는 태그는 ul이라는 태그를 사용한다.

목록 내부의 태그는 li라는 태그를 사용한다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>리스트 아이템1</li>
        <li>리스트 아이템2</li>
        <li>리스트 아이템3</li>
    </ul>
</body></html>

정렬 목록 태그

정렬 목록 태그는 ol를 사용한다.

목록 내부 태그는 위와 같이 li를 사용한다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>리스트 아이템1</li>
        <li>리스트 아이템2</li>
        <li>리스트 아이템3</li>
    </ol>
</body></html>

문단 구분 태그

문단을 구분하는 태그는 p를 사용한다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>글쓸 때 문단 구분</p>
</body></html>

단어 구분 태그

단어를 구분하는 태그는 span을 사용한다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <span>단어 구분</span>
</body></html>

박스 생성 태그

박스를 생성하는 태그는 div를 사용한다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>박스를 만들어요</div>
</body></html>

독립적인 화면 태그

다른 홈페이지를 독립적으로 보여주고 싶을 때 iframe라는 태그를 사용한다.

그러나 이 태그를 악용하는 사례가 많아 이 태그를 사용하는 것을 권장하지 않는다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <iframe width="100" height="100" src="http://192.0.0.100:10000"></iframe>
</body></html>

정보를 전송하는 태그

유저가 작성한 정보를 다른 URL로 보내주는 태그는 form을 사용한다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <input>
        <button></button>
    </form>
</body></html>

이 밑에 나오는 내용들은 모두 Form 태그 안에서 작성해야 한다.

또한 여기서 보내는 이름들은 서버와 동일해야 한다.

txt 데이터 전송

Input 태그 안에 type를 text라 작성하면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 서버랑 통신할 때 사용하는 HTML -->
    <!-- <form> 태그
        method 속성 : HTTP 요청 메소드(get, post)
        action 속송 : 데이터를 보낼 서버의 주소 
    -->
    <form method="post" action="http://localhost:8080/test/data">
        <!-- <input> 태그
            type 속성 : 사용자가 입력할 데이터의 형식을 지정
                        date, password, file, radio, checkbox, date, tel, email 등 
                        <input type="tel">
            name 속성 : 보내는 쪽과 받는 쪽이 맞춰야하는 설정
        -->
        이메일 : <input type="text" name="email"> <br>
</body></html>

비밀번호 전송

Input 태그 안에 type을 password라 작성하면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form method="post" action="http://localhost:8080/test/data">
        비밀번호 : <input type="password" name="pw"> <br>
</body></html>

파일 전송하기

Input 태그 안에 type을 file라 작성하면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form method="post" action="http://localhost:8080/test/data">
        사진 : <input type="file" multiple="" accept="image/*" name="files"> <br>
    </form>
</body></html>

라디오 체크

하나만 체크할 수 있도록 할려면 Input 태그 안에 type을 radio라 작성하면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form method="post" action="http://localhost:8080/test/data">\
        개인정보 제공 :
        <input type="radio" name="accept" value="동의"> 동의
        <input type="radio" name="accept" value="비동의"> 비동의
        <br>
    </form>
</body></html>

체크 박스

여러개를 동시에 체크할 수 있도록 할려면 Input 태그 안에 type을 checkbox라 작성하면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form method="post" action="http://localhost:8080/test/data">
        점심 메뉴 :
        <input type="checkbox" name="lunch" value="치킨"> 치킨
        <input type="checkbox" name="lunch" value="피자"> 피자
        <input type="checkbox" name="lunch" value="삼겹살"> 삼겹살
        <br>
    </form>
</body></html>

날짜 입력하기

날짜를 입력하고 싶으면 Input 태그 안에 type을 date라 작성하면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form method="post" action="http://localhost:8080/test/data">
        예약 날짜 : <input type="date" name="date">
        <br>
    </form>
</body></html>

초기화 버튼

체크한 모든 박스를 초기화하고 싶으면 Input 태그 안에 type을 reset라 작성하면 된다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form method="post" action="http://localhost:8080/test/data">
        <input type="reset" value="초기화버튼">
        <br>
    </form>
</body></html>

전송하기 버튼

지금까지 입력한 데이터를 서버에 보내고 싶으면 Input 태그 안에 type을 submit라 작성하면 된다.

혹은 그냥 전송하기 버튼이라고 작성해도 tpye submit이 자동으로 붙는다.

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form method="post" action="http://localhost:8080/test/data">
        <!-- submit 버튼을 누르면 input 태그들에 입력한 내용을 form 태그에 지정한 서버로 전송 -->
        <input type="submit" value="전송하기버튼">
        <br>
        <button>전송하기버튼</button>
    </form>
</body></html>