티스토리 뷰
HTML이란 무엇인가?
웹 페이지에서 HTML은 정보를 나타냅니다. 크롬을 사용 중 이시라면 키보드에 F12를 눌러보세요.
그럼 개발자 모드가 열립니다.
개발자 모드에서 Elements를 누르면 그 페이지의 HTML 요소들을 알 수 있습니다. 그림에서도 보이듯 많은 정보들이 HTML로 표현되고 있습니다. 위에 <>으로 표현된 것들을 HTML 태그라고 합니다.
그럼 이번 시간에는 HTML로 작은 문서를 하나만들어 보도록 하겠습니다.
우선 HTML에 관해 우선 알아두셔야 할 것은 닫는 태그가 있는 형태와 스스로 닫는 형태가 있다는 것입니다.
닫는 태그가 있는 형태는 <p>...</p>, <span>...</span>처럼 여는 태그가 시작되고, 사이에 표현할 정보가 들어간 다음 닫는 태그를 사용합니다. 그리고 스스로 닫는 형태는 <img /> 처럼 하나의 태그 안에 모든게 다 담겨집니다. 보통 태그 사이에 다른 정보가 들어갈 필요가 없는 태그들이 스스로 닫을 수 있습니다. 띄어쓰기를 하는 <br />태그나 이미지를 나타내는 <img />태그, 구분선을 나타내는 <hr />태그가 그 예라고 할 수 있지요.
닫는 태그가 있는 형태 => <p>.....</p> 스스로 닫는 형태 => <br />, <img />
그리고 또 알아야 할 것은 HTML 태그는 속성을 갖는다는 것입니다. 속성은 태그 사이에 표현했던 정보와 함께 새로운 의미나 컨텍스트를 제공하는 것이라고 할 수 있습니다. 간단한 예를 들어볼까요?
<p id="special">.....</p>에서 id의 형태로 들어간 것이 속성입니다. <p>태그 사이에 표현할 정보만 주는 것이 아니라 "special"이라는 id를 부여해서 따로 컨트롤 할 수 있게 만들었습니다. <p>태그라는 기존 이름에 더해서 "special"이라는 새로운 이름을 준 것이죠.
짝 있는 태그에 속성주기 => <span id="first">...</span> 짝 없는 태그에 속성주기 => <img id="second" />
HTML은 아주 간단합니다. 나머지는 여러 역할을 하는 태그를 그저 외우기만 하면 됩니다. 지금 많이 쓰이는 태그들을 모아 놓고 그저 외우면 흥미가 떨어질 수도 있으니 하나씩 만들어가며 자주 쓰이는 태그들을 자연스럽게 외워봅시다.
지난 시간에 저장했던 HTML 문서를 불러오세요.(연결프로그램(H) => 메모장을 통해서 여시면 됩니다. )
아래의 소스코드를 복사해서 붙여넣기하고 저장해주세요.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>예시 1번</title> </head> <body> <h1>좋아하는 연예인은 누구입니까 ?</h1> <hr> <img src="http://bimage.interpark.com/milti/contents/upload/33093812_20141020170426_L2.jpg" /> <p>fighting! girls day!</p> </body> </html>
크롬이나 익스플로어 같은 웹 브라우저로 여시면 아래와 같은 페이지가 열립니다.
위의 이미지와 다르게 나타나거나 궁금한 점이 있으시면 댓글 달아주세요.
사용한 태그들의 설명은 다음 포스트에 계속 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| <div>태그와 <span>태그에 id와 class 속성 주기 (0) | 2017.12.14 |
|---|---|
| <input>태그, <a>태그, <ul>태그를 활용한 예시 (1) | 2017.12.13 |
| 기본 태그 설명 및 속성값 바꾸기 (0) | 2017.12.12 |
| HTML태그 보충 설명 (6) | 2017.12.07 |
| 파일 확장명을 표시합시다.(윈도우10) (1) | 2017.12.03 |