HTML
웹 개발자로서 알아야 할 첫 번째 언어,
웹페이지의 구조를 짤 수 있는
가장 기본적이고도 중요한 HTML을 배워보도록 합시다.
먼저 HTML이라는 용어의 정의부터 알아봐야겠죠.
HTML(HyperText Markup Language)
콘텐츠의 구조를 정의하는 마크업 언어
웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드
이러한 HTML은 일련의 요소로 이루어져 있습니다.
또한 태그로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있어요.
물론 그렇지 않은 것도 있지만
보통 요소는 여는 태그와 닫는 태그 그리고 콘텐츠로 이루어져 있는데요.
이때 태그는 여닫는 꺽쇠괄호(<>)로 감싸지게 됩니다.
ex)
<body>
<h2>안녕하세요</h2>
<ul>
<li>사과</li>
<li>바나나</li>
</ul>요소와 속성
HTML에서 요소는 여러 속성을 통해서 추가적인 기능을 가질 수 있기도 합니다.
<a href="https://www.google.com/" rel="구글">클릭</a>-> 클릭
이렇게 속성은 링크의 주소값 설정이나 id,class 와 같은 식별자를 지정하는 등의 실제 콘텐츠로 표시되길 원하지 않는 추가적인 정보를 담을 수 있습니다.
어떻게 생각해보면 이런 생각을 할 수도 있는데요.
"그럼 그 요소와 속성을 모두 외우면 되는 건가?"
그렇지 않습니다. 물론 자주 쓰는 건 외우면 편하겠지만 그것보다 적절한 요소를 찾기 위해 검색해 보아야 하고 요소를 암기하기 위해 노력하는 것보다는 상황에 맞는 적절한 요소를 찾아서 사용할 수 있는 능력을 기르는 것이 더 중요합니다.
의미
그리고 HTML은 콘텐츠에 의미를 더하기 위한 언어로써
콘텐츠를 설명하는 역할이 중요합니다.
그렇게 게시하고자 하는 콘텐츠, 구조 및 의미를 브라우저에 전달할 때 이렇게 의미를 가지고 있는 요소를 시멘틱 요소라고 합니다.
예를 들어 h1 태그는 이 콘텐츠가 웹사이트의 주요 제목이라는 걸 브라우저에 알려주는 태그입니다.
<h1>Hello World</h1>그러니까 위와 같은 h1 태그는 Hello World라는 콘텐츠와 그 콘텐츠 유형을 제목이라고 브라우저에 알리는 역할을 해요.
그렇기 때문에 보기 좋게 만드는 것도 물론 좋지만
무엇보다 사람과 컴퓨터가 읽기 쉬운 그리고 의미 있는(Sementic) HTML 문서를 작성하는 게 중요합니다.
지금까지 HTML에 대해서 간단하게 알아봤습니다.
조금이라도 도움이 되셨으면 좋겠습니다. 읽어주셔서 감사합니다.
또한 혹시라도 틀리거나 잘못된 부분이 있다면 말씀 부탁드립니다.
