HTML5 & CSS3 배워보자 (1화 : HTML)
많은 사람들이 웹 사이트를 만들거나 모바일 앱을 개발하기 위해 HTML이라는 용어를 자주 듣게 됩니다. 웹 브라우저 화면에 정보를 표시하기 위한 가장 기본적인 도구로서 HTML과 CSS가 필요하기 때문입니다. 특히 최근에는 모바일 기기가 중심이 되면서 웹 표준 기술인 HTML5가 더욱 중요해지고 있습니다.
이 과정에서는 HTML을 처음 접하는 사람들을 대상으로, 매우 기초적이고 기본적인 HTML의 개념부터 시작하여 기본 문서 구조를 이해하고, 필요한 소프트웨어를 설치하는 방법까지 알려드리겠습니다.
1.HTML의 이해
컴퓨터에서 사용하는 각 파일은 고유의 형식을 갖고 있습니다. 엑셀 프로그램으로 작성한 문서는 xlsx 확장자를 가지며, 한글로 작성한 문서는 hwp 확장자를 가지게 됩니다. 웹에서 사용되는 문서는 보통 html(또는 htm) 확장자로 구분됩니다.
하지만 웹 문서는 엑셀이나 한글과는 달리 작성한 내용 그대로 화면에 보여지지 않습니다. 이를 작성하는 프로그램을 '웹 편집기'라 하며, 웹 문서를 보는 프로그램을 '웹 브라우저'라고 합니다. 웹 편집기를 사용하여 작성된 웹 문서는 HTML로 저장되며, 웹 브라우저를 통해 열리면 화면에는 HTML에 정의된 내용이 그대로 표시됩니다.
HTML은 HyperText Markup Language의 줄임말로, 웹 페이지를 작성하기 위한 언어입니다. HTML은 태그(tag)를 사용하여 문서를 작성하고, 이를 통해 어느 부분이 사진이고, 어느 부분이 글자인지를 구분합니다.
HTML5와 CSS3는 웹의 최신 표준이며, 웹 개발자가 되기 위해 반드시 익혀야 하는 필수 기술입니다. 이를 통해 현대적이고 효율적인 웹 사이트 및 애플리케이션을 개발할 수 있습니다. 그러나 다른 프로그래밍 언어들에 비해 HTML5와 CSS3는 접근하기 쉽고 배우기 쉬운 편입니다. 이러한 점이 이들을 배우는 데 있어 장점으로 작용합니다.
2.HTML 기본 구조
앞에서 설명했듯이 HTML은 태그를 통해 웹 페이지의 각 요소를 구분합니다. 이러한 태그는 "<"와 ">"를 사용하여 표시됩니다. 이를 통해 어느 부분이 이미지이고, 어느 부분이 텍스트인지를 명확하게 구분할 수 있습니다.
HTML 문서는 일반 문서와는 다르게 특정한 형식을 준수하여 작성되어야 합니다. 이를 위해 모든 HTML 문서에는 특정한 구조가 필요합니다. 간단한 예시로, 기본 구조가 포함된 HTML 문서를 작성하고 살펴보겠습니다.
 |
| 1. 현재 페이지는 HTML5 언어로 된 문서라는 내용 2. <html> ~ </html> : 웹 문서의 시작과 끝을 표현하는 태그 3. <head> ~ </head> : 웹 문서의 분석을 위한 내용을 적는 부분. 여기에 적는 내용은 실제 브라우저에는 표시가 되지 않으며, 스타일과 스크립트가 포함되기도 함 4. <body> ~ </body> : 실제 웹 브라우저 화면에 표시될 내용을 적는 부분. 대부분의 태그는 여기에 적어주게 됨 |
3.HTML 기본 태그(tag)
텍스트 관련 태그
| <h1~6> | 제목을 적을때 사용하는 태그로 <h1>이 가장 크고 <h6>가 가장 작다 |
| <p> | 텍스트를 한 줄로 표시하는데, 브라우저 창의 넓이보다 텍스트의 길이가 길면 자동으로 줄바꿈이 됨 |
| <br> | 브라우저에서 강제 줄바꿈이 필요한 경우 해당 위치에서 <br>태그를 삽입하면 줄바꿈이 됨 |
| <hr> | 수평을로 된 줄을 삽입할때 사용하는 태그 |
| <blockquote>, <q> | 인용하고 싶은 글을 적을 때 사용하는 태그 |
| <pre> | 프로그램 소스에 작성한 그대로를 브라우저 화면에 표시하고 싶을 때 사용하는 태그 |
| <strong>, <b> | 텍스트를 굵게 표시할 때 사용. <strong>은 경고나 주의사항 등, <b>는 화면에서 단순히 굵게 표시할 때. |
| <em>, <i> | 텍스트를 이탤릭체로 표시할 때 사용 |
| <mark> | 선택한 부분의 배경색이 노란색이 되며 형광펜으로 그어놓은 듯한 효과를 보여줌 |
| <span> | 태그 자체는 아무 의미가 없으나 텍스트 단락 안에서 일부 텍스트만 묶어서 스타일 효과를 지정할 때 사용 |
| <ruby> | 글자들에 주석을 함께 표기하기 위한 용도. <rt>태그로 묶은 내용이 주석처럼 표시 |
*참고 : <pre>태그는 웹 문서를 소리로 읽어주는 기계나 점자로 표시해 주는 기계에서는 인식이 안되므로 접근성을 고려하여 대체 텍스트를 추가하는것이 좋음.
목록을 만드는 태그
| <ul> | 순서가 필요하지 않은 목록을 만들때 사용하는 태그 |
| <ol> | 순서가 필요한 목록을 만들때 사용하는 태그 |
| <dl> | 제목과 설명을 한 쌍으로 묶어주는 태그 |
표를 만드는 태그
| <table> | 행(tr)과 열(td)로 이루어진 표를 만드는 태그. 기본적으로 행을 작성 후 열을 추가하는 방식으로 구성. |
| <tr> | 행을 만들때 사용하는 태그. |
| <td> | 열을 만들때 사용하는 태그. |
| <th> | 표의 제목을 넣는 태그. 통상 <td>대신에 제목을 넣을때는 <th>를 사용한다. |
| <colspan> | 행의 셀을 합치는 태그 |
| <rowspan> | 열의 셀을 합치는 태그 |
| <caption> | 테이블의 제목을 표시하는 태그. <table>태그 다음에 사용. |
| <col>, <colgroup> | 한 열 또는 여러 열에 있는 셀에 같은 스타일을 적용하려 할 때 사용. |
*참고 : <col>태그는 <caption>태그 뒤, <tr><td>태그 전에 사용해야 함. 그리고 <col>태그의 갯수와 표의 열의 갯수가 동일해야 함.
※ 다음화에서는 이미지와 하이퍼링크 관련 태그에 대해서 공부하겠습니다!!
'HTML5 & CSS3' 카테고리의 다른 글
| HTML5 & CSS3 배워보자 (6화 : CSS 선택자) (0) | 2024.05.06 |
|---|---|
| HTML5 & CSS3 배워보자 (5화 : CSS 스타일 기초) (0) | 2024.05.04 |
| HTML5 & CSS3 배워보자 (4화 : Input, select) (0) | 2024.04.30 |
| HTML5 & CSS3 배워보자 (3화 : Form) (0) | 2024.04.29 |
| HTML5 & CSS3 배워보자 (2화 : Image, Link) (0) | 2024.04.18 |
댓글