GIF 출처 : https://giphy.com/gifs/HostGator-webhosting-hostgator-webhost-fuJPZBIIqzbt1kAYVc
🖥 Contents
1 ) HTML이란 무엇인가?
2 ) HTML 구성요소
1 ) HTML이란 무엇인가?
- HTML이란?
: WWW ( World - Wide Web ) 문서를 작성하는 마크업 언어로 여러 태그 ( Tag )들로 구성되어 있으며 , 각 태그들을 사용하여 원하는 형태의 문서를 만들 수 있다. HTML은 프론트엔드 개발의 기초중 기초이며 HTML과 CSS , JS ( JavaScript ) 3개가 서로 어우러질 때 비로소 웹 프로그래밍의 시작이라고 할 수 있겠다.
다음은 HTML 문서의 기본형식이다.- HTML 문서의 기본 형식
기본적으로 HTML 에서는 <>단위로 쪼개지며 블록을 닫을때는 </>가 포함된다. 헤드 ( Head ) 부분과 본문 ( Body ) 부분으로 크게 나뉘어지며 태그에 따라서 추가적으로 구성이 바뀌기도 한다. 태그에 대한 부분을 이야기해보자.
- HTML 문서의 기본 형식
2 ) HTML의 구성요소
- HTML의 구성요소
: HTML은 여러가지 태그 단위로 다양한 구성요소가 존재한다. 먼저 기본적인 태그가 있다.- HTML 문서 기본 태그
< html > : 시작
< head > : 헤드
< title > : 타이틀
< body > : 본문
< h1 > ... < h6 > : 제목 ( Headings )
< p > : 단락 ( Paragraph )-> 이때 , < p align = " center " >의 경우 가운데로 정렬한 문단 < /p > 와 같은 형태로 사용할 수 있다.
< hr > : 수평줄 ( Horizontal rule )
< br > : 줄 바꾸기 ( Line break )
- HTML 문서 기본 태그
방금 나열한 것들이 가장 기본적인 태그들이다. 이에 더해 HTML의 텍스트에 효과를 부여하는 태그들에 대해 알아보자.
- HTML 텍스트 효과 태그
< b > , < strong > : 진하게 ( Bold Text Formatting )
< i > , < em > : 이탤릭 ( Italics Text Formatting )
< small > : 한 단계 작은 문자
< sup > , < sub > : 윗/아래 첨자 ( Super / Subscript Text Formatting )
< mark > : 하이라이팅
다음은 HTML의 미디어 태그에 관한 것이다. 미디어 태그란 이미지 , 비디오 , 오디오등 웹 페이지에 삽입되는 외부 컨텐츠의 크기나 볼륨 등에 관한 설정에 대한 태그들이다.
- HTML 미디어 태그
< img > : 이미지
< video > : 비디오
< audio > : 오디오 ( 볼륨 )
미디어 태그를 사용할 때는 다음과 같은 형식과 같이 사용하면 된다.
ex )< img src = " src.jpg " , width = "100" , height = " 200 " >
HTML에서 미디어 태그를 사용할 때 외부 컨텐츠를 불러온다는 점을 언급했다. 또한 외부 컨텐츠를 불러올 때 웹 페이지의 공간 분할에 있어 사용자의 시각에서 안정적인 구도 즉 , 시각적 구조화를 위해 구성의 표현을 달리할 필요가 있다. 이때 블록과 링크 태그가 대표적으로 사용된다.
- HTML 블록 태그
< pre > : 포맷 그대로 출력
< div > : 블록 형식으로 공간 분할 ( Division )
< section > : 독립적인 섹션 ( Section )
< article > : 내용이 완전히 독립적으로 구성할 수 있는 요소 정의
< span > : 인라인 형식으로 공간 분할
< a > : 하이퍼 링크 ( Link / Anchor ) - 현재 HTML 페이지에서 다른 HTML 을 연결하는 링크를 만들고자 할 때 사용
하이퍼 링크를 사용하고자 할 때는 다음과 같은 형식과 같이 사용하면 된다.
ex )< a href = " http://www.naver.com " target = " _ blank " 네이버 < /a >< iframe > : 인라인 프레임 - 현재 HTML 페이지 내에 내장 윈도우를 만들고 다른 HTML 페이지를 출력할 때 사용한다
- 인라인 프레임 태그
< src > : 출력할 웹 페이지의 URL 주소
< srcdoc > : HTML 문서 텍스트
< name > : 윈도우 이름 - 다른 웹 페이지에서 target 속성 값으로 사용
< width > : 프레임 폭
< height > : 프레임의 높이
이와 같은 외부 미디어를 가져다 쓰는 태그도 존재하지만 내부적으로 목록과 같은 문서 형식을 만들수 도 있는데 이때 리스트 태그를 통해 문서에서 목록을 만들 수 있다.
- 리스트 태그
① < ul > : 순서화 되지 않은 리스트
② < ol > : 순서화된 리스트
③ < li > : 리스트 구성요소
리스트 태그의 경우 다음과 같은 구조와 같이 사용하면 된다.
ex )# Unordered list 구조 <ul> <li> data1 </li> <li> data2 </li> </ul># Ordered list 구조 <ol> <li> data1 </li> <li> data2 </li> </ol>
리스트 태그가 목록을 나타내기 위한 태그라면 도표나 행렬처럼 구조화된 데이터 표현을 위해 테이블 태그가 존재한다.
- 테이블 태그
< table > : 테이블
< th > : 테이블 헤드
< tr > : 테이블 행
< td > : 테이블 셀
< thead > : 헤드 셀 그룹 - 테이블의 헤더 역할
< tbody > : 데이터 셀 그룹 - 테이블의 본문 부분
< tfoot > : 풋 셀 그룹 - 테이블의 바닥글 부분
다음은 테이블 태그를 이용한 HTML 예시이다. 위 예시를 통해 테이블 태그의 구조를 익혀보자.<table border="1"> <thead> <tr> <th>이름</th> <th>나이</th> <th>성별</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>30</td> <td>남성</td> </tr> <tr> <td>Jane</td> <td>25</td> <td>여성</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">총 인원: 2명</td> </tr> </tfoot> </table>
아까 언급한 블록 태그는 주로 문단 , 제목 , 목록 등 콘텐츠를 묶어주는 용도로 사용한다. 이를 통해서는 전체적인 사용자의 시각에서 프레임의 분리에 어려움이 있기에 이 때 프레임 태그를 사용한다.
- 프레임 태그
< framset > : 프레임 셋
< frame > : 프레임
다음은 프레임 태그를 이용한 예시이다. 위 예시를 통해 프레임 태그의 구조를 익혀보자.<frameset row ="100,*"> <frame src="top_menu.html"> <frameset cols="200,*"> <frame src="left_menu.html"> <frame src="contents.html"> </frameset> </frameset>
마지막으로 웹 페이지의 메타 데이터를 다루기 위한 메타 태그가 존재한다. 여기서 메타 데이터란 브라우저, 검색 엔진 및 다른 웹 서비스에 웹 페이지에 대한 정보를 의미한다. 또한 CSS의 스타일 시트와 자바스크립트의 코드를 담는 태그 또한 존재한다. 결국 프론트 엔드 작업에서 사용되는 HTML , CSS , JS 중 HTML이 가장 기초이자 기본적으로 깔리는 마크업이며 그 위에 CSS 와 JS를 통해 채우는 형식을 지닌다. 이런 구조를 이해한 후 CSS 와 JS에 대해 알아보자.
