고정 헤더 영역
상세 컨텐츠
본문 제목
[HTML] 야 너도 웹페이지 만들 수 있어 | HTML Element 개념, HTML 기본 구조, 자주 사용하는 태그 모음
본문
지난 포스팅에서는 HTML이 무엇이고, 웹페이지에서 어떤 역할을 하는지 살펴보았다.
이번 포스팅에서는 HTML을 구성하는 Element와 HTML의 기본 구조에 대해 설명해보려 한다.
[HTML] 웹개발자 2년차가 되어서야 정리해보는 HTML이란 무엇인가 | 마크업 언어
문득 매일 보는 HTML 코드이지만 HTML에 대해 제대로 공부한 적이 없다는 생각이 들었다. 물론 학교에서도 배웠고, 실무하면서 필요한 정보만 쏙쏙 뽑아먹으며 공부했지만, 학교에서 배운건 시험
yooputer-devlog.tistory.com
우선 HMTL은 Element라는 것으로 구성되어 있다.
Element는 '요소'라는 뜻이다. (별 뜻은 없다. 그저 무언가를 구성하는 것이라는 뜻)
웹페이지에 있는 글자, 이미지, 버튼은 모두 Element이다.
눈에 보이지는 않지만 웹페이지의 구조를 만들어내기 위한 Element도 존재한다.
이 Element들에 대해서는 잠시후 살펴보기로 하자.
Element 작성법
Element를 만들기 위해서는 태그라는 것을 사용한다.
제목, 글자, 이미지, 링크 등을 표현하기 위해 각각 다른 태그를 사용한다.
태그는 그냥 Element의 종류를 표현하기 위한 이름표라고 생각하면 된다.
(옷에도 가격, 이름 등을 표시하기 위해 '택'을 붙이는 것과 같다. )
Element는 기본적으로 다음과 같이 표현한다.
Element의 내용물은 시작태그와 종료태그에 의해 감싸진다.
<태그명> 내용 </태그명>
내용물이 없는 태그의 경우 하나의 태그로만 표현하기도 한다.
<태그명/>
<태그명>
HTML 기본 구조
우리는 방금 하나의 'Element'를 표현하는 법에 대해 배웠다.
이번에는 하나의 '페이지'를 표현하는 법에 대해 알아보자.
우리가 매일 보는 다양한 웹 페이지들은 모두 다른 내용, 다른 Element들로 구성되어 있다.
하지만 기본적인 구조는 모두 똑같다.
Html 페이지의 기본적인 구조는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
페이지의 정보들
</head>
<body>
페이지 내용
</body>
</html>
굉장히 심플하지 않은가?
이 기본 구조에 사용되는 Element들에 대해 하나씩 알아보자.
우선 <!DOCTYPE html>는 이 문서가 HTML5 문서임을 명시한다.
이 문장은 태그가 아니다. declaration(선언문)이다.
(대충 HTML을 작성할때 무적권 써야하는 것일고 이해하면 된다. )
첫번째로 나오는 element인 html은 HTML 페이지의 가장 커다란 Element이다.
앞으로 나올 모든 태그들은 이 안에 들어간다.
root element라고도 부른다.
html element에는 head와 body element가 존재한다.
head element는 HTML 페이지의 이러저러한 정보들이 들어간다.
그리고 우리 눈에 보이는 모든 element들은 body element 안에 들어간다.
자주 사용하는 태그
자 HTML의 기본 구조와 Element 작성하는 법에 대해 알아보았다.
그럼 이제 나만의 웹페이지를 만들 준비가 끝났다!
우선 HTML 기본 코드를 작성하고
body 안에 세부적인 코드들을 작성하면 된다.
그러면 어떤 코드들을 작성할 수 있을까? 즉 어떤 태그를 사용할 수 있을까?
HTML에는 많은 태그들이 존재한다.
아래 사이트에서 HTML의 태그들을 확인할 수 있다.
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위에 사이트에 나오는 많고 많은 태그들을 모두 사용하는건 아니다.
자주 사용하는 태그들은 정해져 있다.
이 중 가장 많이 사용하는 태그는 단연코 div이다.
div태그는 영역을 나누고, 여러 element를 하나의 element로 묶기 위해 사용한다.
위에 링크에 해당하는 페이지도 수많은 div로 이루어져있는 것을 알 수 있다.
div를 css로 스타일링하여 페이지의 전체적인 레이아웃을 잡는다.
(css에 대해서는 이후 포스팅에서 다뤄보겠다.)
div 이외에 자주 사용하는 태그 목록을 정리해보겠다.
| 태그명 | 의미 | 설명 | 예시 |
| h1 - h6 | heading | 제목이나 부제목을 표현할 때 사용한다. | <h2>제목</h2> |
| p | paragraph | 하나의 문단을 표현할 때 사용한다 | <p>글</p> |
| br | break | 줄바꿈이 된다. | <p>엔터가 없어도<br>줄바꿈이 됩니다</p> |
| hr | horizontal rule | 가로선이 하나 생긴다. | <hr> |
| img | image | 이미지를 표현한다 | <img src="이미지 경로"> |
| a | anchor | 하이퍼링크를 표현한다 | <a href="하이퍼링크 경로">하이퍼링크 텍스트</a> |
| span | span | div와 마찬가지로 영역을 나누는데 사용한다. 근데 div와는 좀 쓰임새가 다르다. |
<p>옆에 나란히 <span>추가</span>.</p> |
목록 관련
| 태그명 | 의미 | 설명 | 예시 |
| ul | unordered list | 순서가 없는 리스트를 표현한다. | <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
| ol | ordered list | 순서가 있는 리스트를 표현한다. | <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> |
| li | list item | 리스트 아이템을 표현한다. | 위에 예시 참고 |
테이블(표) 관련
| 태그명 | 의미 | 설명 | 예시 |
| table | table | 테이블을 표현한다. | <table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> |
| th | table header cell | 하나의 헤더 cell을 표현한다. | |
| tr | table row | 하나의 행을 표현한다. | |
| td | table data | 하나의 cell을 표현한다. | |
| thead | table head | 테이블의 헤더 행을 묶는다 | |
| tbody | table body | 테이블의 일반 행들을 묶는다 |
form 관련
| 태그명 | 의미 | 설명 | 예시 |
| form | form | form을 표현한다. | <form action="요청url"> <label for="user_name">이름:</label> <input type="text" id="user_name" name="user_name"> <br> <label for="genders">성별:</label> <select name=" genders " id="genders"> <option value="m">남</option> <option value="w">여</option> <option value="n">선택안함</option> </select> <label for=" review ">리뷰:</label> <textarea id="review" name="review"> </textarea> <button type="button">완료</button> </form> |
| input | input | 하나의 입력란을 표현한다 | |
| textarea | text area | 여러줄의 문자를 입력받는다 | |
| button | button | 버튼을 표현한다. | |
| select | select | select box를 표현한다. | |
| option | option | select box의 옵션을 표현한다. | |
| label | label | input, textarea 등에 라벨을 표현한다. |
form은 사용자로부터 값을 입력받을 때 사용한다.
우리가 설문조사할 때 입력하는 값들을 표현할 때 위의 태그들을 사용한다.
앞서 설명한 태그 외에도 거의 항상 사용하는 태그가 있다.
바로 style 태그와 script 태그이다.
style태그는 우리가 만든 HTML을 더 예쁘게 만들어주는 css를 작성하는 태그이고
script 태그는 우리가 만든 페이지에 기능을 추가하기 위해 자바 스크립트를 작성하는 태그이다.
(이후 css와 자바스크립트에 대해서도 정리해보려고 한다. )
다음 포스팅에서는 웹페이지를 구현하는 구체적인 예시와 태그에 적용할 수 있는 속성에 대해 정리해보겠다.
참고문서
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'Development Study > HTML&CSS' 카테고리의 다른 글
| [HTML] 웹개발자 2년차가 되어서야 정리해보는 HTML이란 무엇인가 | 마크업 언어 (1) | 2025.05.15 |
|---|
