[세 번째 지식] 이제는 제대로 알자, HTML

인터넷을 사용하면서 어디선가 수도없이 보고 들었던 HTML

그러나 "이게 뭐지?'라는 생각만 하고 "우선 지나가자!"라고 한 적 있지 않으신가요?

이제 더이상 모르고 지나치지 맙시다 우리!

차근차근 하나씩 이해하고, 나중에 어디선가 이 단어를 알았을 때는

"요녀석, 넌 이런 의미고 이런 역할을 하고있지?" 라고 아는 척 할 수 있도록 해요!

그럼 본격적으로 HTML에 대해서 알아볼까요?

HTML이란 HyperText Mark Language의 약어로 ' 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류' 입니다.

웹 페이지는 HTML 문서라고도 불리며, 여러 HTML 태그들로 구성이 되는데요.

각각의 HTML 태그는 웹 페이지의 기능이나 디자인들을 결정하는데 사용된다고 할 수 있습니다.

실제 html태그들이 어떻게 작성되는지 구조에 대해 살펴볼까요?

우선 html 태그는 태그 이름을 꺾쇠 괄호로 '<>'로 표현합니다.

위 사진을 보시면 모두 <> 안에 태그가 들어가있는 것을 확인하실 수 있죠?

또한 html 태그는 보통 시작 태그와 종료 태그가 짝지어서 구성되는데요

<태그이름> 이 시작태그

</태그이름> 이 종료태그가 됩니다

html문서의 시작을 나타내는 <html>과 문서의 마침을 나타내는</html>

문서의 제목과 부가적인 정보를 나타내는 <head>태그와 마침의 </head>태그

그리고 문서의 내용, 즉 본문을 나타내는 <body>태그와 내용이 끝났다는 표시의</body>태그처럼

서로 짝지어져 문서의 전체적인 구조를 완성하게 되는 것이죠!

( **위 사진에서 <img>같은 태그처럼 시작 태그만 가지는 태그도 있습니다!)

그리고 이런 태그 사이에는 문서의 제목이나, 내용 (텍스트 및 이미지)을 나타내는 태그들이 또 삽입되게 됩니다!

이렇게 되면 html문서가 완성되고 우리는 <body>부분의 내용을 실제로 사이트에서 볼 수 있게되는데요

어디까지나 html은 앞서 말씀드린 것처럼 페이지의 제목, 문단, 이미지를 표현하여 '전체적인 틀, 구조'를 담당하기 때문에 html을 통해서 문서를 시각적으로 예쁘게 꾸미는 것(색상,크기 등)은 어렵답니다!

하지만 "나는 더 시각적인 표현을 주고 싶다!"라고 한다면 CSS와 JS를 통해서 visual적인 부분을 더 표현하고 콘텐츠를 움직이는 등의 동적인 변화를 줄 수 있습니다!

이런 HTML 문서는 다양한 에디터, 심지어 윈도우의 메모장으로도 작성가능하며 모든 HTML 문서의 작성을 완료한 후에는 확장자를 .html로 저장하면 웹 브라우저에서 바로 확인하실 수 있습니다

앞서 살펴본 문서의 구조를 담당하는 HTML 외에도 CSS와 JS에 대해 더 자세히 알아보고싶다면

아래 페이지를 통해 확인하시면 좋을 것 같습니다!

입문자에게 추천하는 HTML, CSS 첫걸음

개요HTML, CSS 그리고 JavaScript웹 표준크로스 브라우징웹 접근성정보 통신 보조기기웹 접근성 품질인증 마크웹 개발을 위한 에디터Sublime TextAtomBr ...

heropy.blog

ITistory