안녕하세요. 찰리입니다.
오늘은 HTML을 공부하는 날이에요. 지난 번에는 HTML이 무엇인지만 간단하게 이야기했는데 이제 HTML의 구성요소인 태그에 대해서 알아보고 작성방법에 대해 알아볼게요.
태그(Tag) - 태그는 HTML을 구성하는 것으로 <> 열기 태그, </> 닫기 태그로 되어있습니다.
예)
<head>내용</head>
<body>내용</body>
html의 모든 것은 태그로 이루어졌있습니다. 태그는 자신이 원하는 대로 만들어 사용하는 것이 아니라 웹표준기구에서 사용할 수 있는 태그들을 관리합니다. 현재는 html5버전에서 사용 가능한 태그들이 정리되어 있고 정보를 알고 싶으신 분들은 주소를 남겨놓을게요. W3C 해당 사이트에서는 태그 뿐만아니라 다양한 웹언어들의 정보와 교육이 가능하기 때문에 참고하시길 바랍니다. 영어 사이트이기 때문에 이 점 참고바랍니다.
예시에서 처럼 <>로 된 열기 태그와 </>닫기 태그를 하나의 세트로 사용하고 이 사이에 내용, 콘텐츠를 작성하는 것입니다.
예)
<html> -> 부모태그
<head></head> -> head / body 자녀 태그
<body>내용</body>
</html>
그리고 또 다른 예시를 보면 html 태그 속에 head 태그와 body 태그를 작성한 것을 볼 수 있습니다. 처음 예시에서처럼 단순히 쌓을 수도 있고 옆에 붙여서 작성할 수도 있지만 아래 예시처럼 태그 속에 태그를 넣을 수도 있고 이렇게 되면 감싸는 태그를 부모 태그, 속에 있는 태그를 자녀 태그라고 부릅니다. 부모 태그와 자녀 태그의 특별한 관계는 이후에 다시 이야기 하기로 하고 다음은 몇몇 기본 태그들을 알아볼게요.
html - html을 시작한다고 정의하는 태그. <html></html>
head - 해당 html 문서의 정보, 다른 문서와 연결, 링크 등을 담당하는 역할. 인간의 뇌에 비유. <head></head>
body - 브라우저 화면에서 직접적으로 보이는 내용들이 담기는 태그. 인간의 신체에 비유. <body></body>
!DOCTYPE html - html5 사용을 정의하는 태그. <!DOCTYPE html>
일단 오늘은 이 4개의 태그를 알아볼텐데요. 가장 먼저 html은 말 그대로 html. html을 사용하겠다고 선언하는 것으로 html문서의 시작을 알리는 것이겠죠? 모든 태그의 부모 태그라고 생각하시면 되겠습니다.
그 다음은 head와 body. head 태그는 내용물 보다는 문서 전체의 정보 영향을 미치는 외부 문서를 연결 시키고 속성적인 부분. 소프트웨어적인 부분입니다. 그래서 보통 사람의 뇌로 많이 비유합니다. 그 반대로 body는 직접적으로 화면에 보이는 부분들이죠. 그래서 신체로 많이 비유합니다. 이 head와 body는 html을 움직이는 두 축입니다. html 바로 아래에 작성되는 자녀 태그이자 앞으로 사용될 모든 태그의 부모 태그가 되는 태그들입니다.
그리고 마지막으로 알아볼 !DOCTYPE html 은 html의 버전들 중에서 html5 를 사용하겠다고 선언하는 태그입니다. 특이하게 닫기 태그없이 열기 태그만이 있고 후에 보면 가끔 이렇게 닫기 혹은 열기 태그 없이 사용되는 태그들이 있습니다. 이 !DOCTYPE html 은 문서의 가장 첫 줄에 작성됩니다. 지금까지 나온 4개의 태그 중 가장 길어보이지만 실제 다른 버전의 html들을 사용할 때는 어땠는지 찾아보시면 정말 효율적이다 라고 느끼실겁니다. 오늘도 간단하게 사용하는 방법 보고 끝낼게요.
<준비물>
에디터는 메모장 / 브라우저는 웨일을 사용하겠습니다.
#태그(html / head / body / !DOCTYPE html)
Step 1 - 우선 지난 시간에 만들었던 index.html 파일을 메모장에 불러올게요.
그리고 <html></html>을 작성하고 저장하겠습니다. 태그를 사용할 때 줄바꿈을 하는 것은 알아보기 쉽게 정리르 하기 위한 것입니다. 한 줄로 이어서 작성해도 되지만 여러가지 태그들이 섞이기 시작하면 알아보기 힘드니까요.
Step 2 - 그리고 브라우저에서 방금 저장한 파일을 열어보면
아무것도 나타나지 않습니다. 분명이 태그를 작성했지만 html문서안에 태그들은 겉으로 나타나지 않습니다.
Step 3 - 다시 head 태그와 body 태그도 html 태그안에 작성할게요.
저장하고 브라우저에서 열어볼게요. 이때 이미 브라우저에 파일이 열려있기 때문에 새로고침(F5)을 하시면 변겨된 내용을 보실 수 있습니다. 아무것도 없는 것은 보여줄 내용이 아직 없다는 것이죠.
Step 4 - 그러니까 글자라도 한 줄 적어서 다시 볼게요. 겉으로 드러나는 곳은 body 태그라고 했죠? body 태그 안에 아무글이나 넣어보겠습니다.
저장하고 브라우저에서 다시 새로고침을 해보면 이제 글자가 보입니다.
Step 5 - 오늘의 마지막 태그인 <!DOCTYPE html> 은 가장 첫줄에 작성합니다.
저장해서 브라우저에서 확인하면 역시나 body의 글자 외에는 보이지 않습니다.
지금 index.html 에 작성된 이 태그 4가지가 html5의 기본 태그고 기본 사용 형태라고 볼 수 있습니다. 모든 연습은 이 형태에서 시작하고 점점 발전해 나갈 것입니다. 바탕화면의 폴더에 고이 간직해둡시다.
#영상으로 보겠습니다.
html은 어려운 언어는 아닙니다. 물론 나중에는 배치나 다른 언어들과 함계 사용하는 부분에서 어려워질 수는 있겠지만 html 자체는 보이느대로 태그를 작성하기만 하면 되는 단순한 형태입니다. html의 첫 시작에서 느끼는 어려움이 있다면 아마도 이렇게 써도 되는 걸까 저렇게 쓰는 걸까 하고 모르는 상태에서 쓰기 전에 망설이는 시간들이라고 생각됩니다. 이곳은 제가 연습하는 공간이고 강의하는 공간은 아니지만 먼저 써본 입장에서 왠만큼 책을 보고 그대로 따라해도 html을 사용하는데 문제가 되는 부분은 없을 것입니다. 이후에 문제가 되는 것은 오히려 무엇을 만들지 몰라서 고민하는 시간들일 것입니다.
그전에 다음 시간부터는 주로 사용되는 그 중에서 제가 주로 사용하는 태그들을 하나씩 소개해볼게요. 다음 시간에 만나요.
'코딩(Coding) > 웹 코딩(Web coding)' 카테고리의 다른 글
| HTML 05 - 테이블 태그(Table Tag) (0) | 2021.12.29 |
|---|---|
| HTML 04 - 리스트 태그(List Tag) (0) | 2021.12.17 |
| HTML 03 - 기본 텍스트 태그(Basic Text Tag) (0) | 2021.11.08 |
| HTML 02 - 기본 태그(Basic Tag)(2) (0) | 2021.10.01 |
| HTML 00 - 시작하기(start HTML) (0) | 2021.08.13 |