HTML 기본 정리

HTML은 웹 사이트를 만드는데 사용되는 언어이다. 웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용한다.

그럼 이 웹사이트를 구성하는 가장 기본적인 요소는 무엇일까? 그 구성 요소들과 간단한 설명을 하자면 다음과 같다.

HTML : 정보 또는 설계도 / 건물 설계도
CSS : 디자인 또는 스타일링 / 인테리어 디자인
JavaScript : 기능과 효과

웹 사이트 제작 시 고려 사항

웹 표준

웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격을 의미한다.
반드시 따라야한다는 강제성을 띄지는 않지만 표준 규격을 맞췄을 경우 google과 같은 검색엔진에서 제작된 사이트가 노출될 가능성이 높아진다.
다음과 같은 표준 권고가 있다.
- 디자인은 CSS 파일로 제작한다.
- 절댓값보다는 상대값을 사용한다. (ex_ px보다 em, rem 등을 사용)
- 의미 있는 태그를 사용해서 구조화한다(시맨틱 태그)
- 크로스 브라우징을 신경쓴다.

웹 접근성

눈으로 보거나 들을 수 있는 모든 정보의 대체 표현 수단을 제공하고 UX의 제한을 두지 않는 것을 의미한다.
자바스크립트가 실행되지 않는 환경도 고려한다.

크로스 브라우징

여러 브라우저에서 이미지가 깨진다는 등의 애로사항없 개발자가 의도한 대로 올바르게 작동하도록 제작

HTML 기본 구조

<!DOCTYPE html> <!-- HTML5에서 생긴 것으로 html 형식의 문서를 작성하겠다는 선언 태그이다. -->
<html> <!-- HTML 문서의 시작과 끝을 의미한다. 모든 HTML 태그들은 <html> 태그 안쪽에 입력해야 한다. -->
  <head> <!-- html 문서의 요약 정보로 실제 사용자들에게는 보이지 않는 내용이다. -->
    <meta charset="UTF-8" /> <!-- character setting의 약자, 모든 문자를 웹 브라우저에서 깨짐없이 표시하기 위한 태그이다. -->
    <title>Document</title> <!-- 브라우저 상단 탭에 표시되는 텍스트로서 제목이라고 보면 되겠다. -->
  </head>
  <body> <!-- 실제 사용자가 보는 화면이 이곳에 존재하는 태그들로 구성된다. -->
  </body>
</html>

HTML 구성 요소

태그명 : HTML이 갖고 있는 고유의 기능이다.
- 기본적으로 열린 태그 = <p> , 닫힌 태그 = </p> 와 같은 형태로 이루어진다. 일부 태그는 닫힌 태그가 존재하지 않는다. (ex_ <img> 태그)
콘텐츠 : 열린 태그와 닫힌 태그 사이에 있는 내용물이다.
속성 : HTML 태그가 갖고 있는 추가 정보
속성값 : 어떤 역할을 수행할지 구체적인 명령을 진행하는 것이다.

<h1 style="color:navy">안녕 세상!</h1>

위 예시로 다시 보면

태그명 : <h1>
콘텐츠 : 안녕 세상!
속성 : style
속서값 : color:navy 이다.

추가로

<body>
	<h1 style="color:navy">안녕 세상!</h1>
</body>

위와 같이 태그가 부모자식 관계로 있을 경우 body 태그 내부에 h1태그는 콘텐츠가 된다. 즉 콘텐츠란 태그 내에 적힌 텍스트만을 의미하는 것이 아니라 태그 내에 존재하는 구성 요소(내용물)을 의미한다.

HTML 태그는 어떤 것이 있을까

HTML 문서를 구성하는 태그

<meta charset="UTF-8">

<meta> 태그의 charset 속성은 해당 HTML문서의 문자 인코딩 방식을 알려준다. 즉 브라우저가 어떤 형식으로 문자(text)를 화면에 보여줄 것인지를 나타낸다.
만약 인코딩을 명확하게 명시하지 않을 경우 웹 브라우저 설정에 따라 자동으로 인코딩을 추정해서 처리하는데, 처리가 정확하면 다행이지만 그렇지 않을 수도 있기 때문에 가능하다면 meta charset 태그는 반드시 코드에 넣어 주는 편이 좋다.
정확한 내용은 우리의 교과서 MDN을 살펴보자 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta

<a>

HTML의 a태그는 <앵커 요소>로 아마 자주 쓰게 될 태그일 것이다.
이 친구가 갖고 있는 속성 중 href를 통해 '다른 페이지로 이동'과 같은 다른 url로 연결할 수 있는 하이퍼링크를 만들 수 있다.
<a> 의 콘텐츠는 링크 목적지에 대한 설명을 적는다. a태그 사용 방법을 예시로 보면 다음과 같다.

<a href="http://example.com">Website</a>
<a href="http://example2.com" target="_blank">Website2</a>
<!-- 위 a태그 내에 target 속성이 보이는데 이는 링크한 url을 표시할 위치를 나타낸다.
기본 target 속성의 값은 _self로 현재 브라우저 탭 즉, 현재 페이지의 url을 변환한다.
위에 작성한 _blank 값은 새 탭에 url을 여는 것으로 자주 사용된다. 
사용자 브라우저 설정에 따라 새창으로 바뀔 수 있다. -->

<img>

이미지를 나태는 태그다. 이 친구도 자주 쓰게 될 것이다.
img 태그의 src 속성은 필수이며, 포함하고자 하는 이미지의 경로를 지정한다. 이미지를 표시하는 태그인데 당연히 그 이미지 경로를 지정하지 않으면 뭐하러 쓰나
alt 속성은 이미지의 텍스트 설명이다. 이 속성을 쓰지 않아도 일반적인 사용에 문제는 없지만 스크린 리더가 alt에 지정된 속성 값을 읽어 사용자에게 이미지를 설명하므로 접근성 차원에서 볼 때 중요하다. 또한 일시적인 네트워크 오류나 이미지 링크가 잘 못 되었을 때와 같이 정상적으로 이미지를 표시할 수 없는 경우에도 이 속성의 값이 대신 화면에 표시됨으로 이미지를 못 보더라도 어떤 이미지를 사용했을지 유추가 가능하다.

<img src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">

<h1> ~ <h6>

h1 ~ h6 요소는 6단계의 구획(구역) 제목을 나타낸다. 구획 단계에서 1이 짱이고 6이 최약체다.

<h1>Beetles</h1>
    <h2>External morphology</h2>
        <h3>Head</h3>
            <h4>Mouthparts</h4>
        <h3>Thorax</h3>
            <h4>Prothorax</h4>
            <h4>Pterothorax</h4>

잠깐! 궁금한 것이있다.
왜 굳이 h1 과 같은 태그를 사용하는 것일까? 다른 요소와는 달리 제목 같은 것은 다른 텍스트를 나타는 태그를 이용해도 CSS를 통해서 충분히 제목과 같은 요소를 만들 수 있을텐데 말이다.
그 이유는 간단했다. 의미를 주기 위해서이다.
- 검색 엔진은 h1 요소 내의 콘텐츠를 웹 문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다고 한다.
다시 잠깐 인덱스?
-> "색인"은 책 속의 낱말이나 구절, 또는 이에 관련한 지시자를 찾아보기 쉽도록 일정한 순서로 나열한 목록을 가르킨다. 인덱스라고도 한다. 즉 색인 = 인덱스는 알아보기 쉽도록 표시해둔 목록이라는 것이고 검색 엔진에서 인덱스라는 것은 검색을 더 빠르게 하기 위해서 데이터를 저장하는 장소라고 이해하면 될것 같다.
- 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있다. 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.
- 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

공간을 만들 때 사용하는 태그

<header>

header 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.
제목, 로고, 검색 등의 요소도 포함할 수 있다.

<header>
    <a class="logo" href="#">Cute Puppies Express!</a>
</header>

<nav>

nav 요소는 문서의 부분 중 현재 페이지 내, 또는 따른 페이지로의 링크를 보여주는 구획을 나타낸다.
메뉴, 목차 등으로 자주 쓰인다.

<nav >
    <ol>
        <li><a href="#">Bikes</a></li>
        <li><a href="#">BMX</a></li>
        <li>Jump Bike 3000</li>
    </ol>
</nav>

<main>

main 요소는 문서 <body>의 주요 콘텐츠를 나타낸다.
주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다.
main은 요소 개요에 영향을 주지 않는다. <body> 등의 요소나 <h2>와 같은 제목 요소와 달리 <main>은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용이다.

<header>Gecko facts</header>

<main>
    <p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
 
    <p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>

<article>

article 요소는 문서, 페이지 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다.

<div>

div 요소는 플로우 콘텐츠를 위한 통용 콘테이너이다.

플로우 콘텐츠란?
위 main을 설명할 때도 잠깐 나왔지만 body 요소 안에서 사용하는 요소들을 나타낸다.
ex) <nav>, <span>

css로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.
div 요소는 순수 컨테이너로서 아무것도 표현하지 않는다. 대신 다른 요소를 묶어서 "class" 나 "id" 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang 속성 사용)하는 등의 용도로 사용한다.
div 요소는 JavaScript의 라이브러리 중 하나인 react를 사용할 때 자주 사용하게 된다.
div 요소는 의미를 가진 다른 요소(<article>, <nav> 등)가 적절하지 않을 때만 사용하는 것을 권장된다.

<div>
   <p>어떤 콘텐츠든 좋습니다.
   &lt;p&gt;, &lt;table&gt;같이 말이죠. 써보세요!</p>
</div>

저작자표시 (새창열림)