.png)
HTML이란?
HyperText Markup Language의 약어로서 HyperText 기능(웹페이지에서 다른 페이지로 이동하도록 하는 것)을 가진 문서를 만드는 언어이다.
다시 말하면, 모든 웹페이지의 뼈대가 되는 구조를 설계할 때 사용되면서 hyperlink 기능을 가지고 있는 웹페이지를 위한 마크업 언어로서, 이미지, 텍스트 또는 비디오와 같은 구조를 제공한다.
HTML 요소(Element)
HTML은 엘리먼트로 구성되어있다. 이러한 엘리먼트들은 웹페이지를 구성하고 컨텐츠를 정의한다.
다음은 엘리먼트 작성 방법이다.
<p> Hello World </p>앞,뒤로 여는 태그와 닫는 태그를 가지며 그 안에 입력하고자 하는 컨텐츠(텍스트 or 또 다른 HTML 엘리먼트)를 넣는다.
<html>
<head>
<meta name="viewport" content="width=device-width, initial- scale=1" />
</head>
<body>
<p>Hello World!</p>
</body>
</html>HTML은 크게 <html> 엘리먼트를 시작으로 내부에 두 가지의 태그로 구성되는데, 바로 <head> 엘리먼트와 <body> 엘리먼트이다.
이 중 <head>는 해당 HTML document의 구성에 대한 정보(metadata)를 담고 있으며, 오직 <body> 안의 컨텐츠만이 실제 스크린 화면에 출력된다.
위의 예시처럼 엘리먼트 안에 내부 엘리먼트가 있는 경우 내부 엘리먼트를 자식 엘리먼트, 외부 엘리먼트를 부모 엘리먼트라고 한다.
여기서 <p>태그는 <body>태그의 자식 엘리먼트이며 <body>태그는 부모 엘리먼트이다.
주요 엘리먼트들
<h1>...<h6>: 주로 제목에 사용되는 태그. 숫자가 작을수록 폰트 크기가 크다.<div>: division의 약자로 페이지를 섹션으로 나누는 역할을 하는 컨테이너이다. 엘리먼트들을 그룹핑할 때 유용한 태그. 시각적으로 보이는 역할은 없지만 예를 들어 CSS로 서로 다른 두개의 엘리먼트에 똑같은 스타일링을 주고 싶을 때 이 태그로 묶어 그룹핑하여 스타일링을 주고자 할 때 사용한다.<span>: 짤막한 text를 표시할 때 사용한다.<p>: 문단 형식의 text를 표시할 때 사용한다.<ul>,<ol>,<li>: 순서대로 unordered list, ordered list, list 태그로서 순서가 정해져있지 않은 리스트는<ul>로, 순서가 정해지는 리스트는<ol>로 표기하며 내부의 각 아이템을<li>태그로 작성한다.<img />: 이미지를 첨부할 때 사용한다.<em>: text를 italic체로 표시함으로써 강조한다.<strong>: text를 bold체로 표시함으로써 강조한다.<br>: break의 약자로 줄바꿈을 할때 사용되는 태그이다. 닫는 태그가 없이<br>단일로만 사용되며 입력된 갯수만큼 줄바꿈이 실행된다.<pre>: 입력한 문장 형태 그대로 브라우저에 표현되는 태그.<br>태그나<p>태그가 아니더라도 tab과 enter로 표현한 줄바꿈이 그대로 반영된다.
이외에도 다양한 엘리먼트가 있으니 MDN) HTML 엘리먼트 레퍼런스 참고 사이트를 참고하면 좋다.
Block level vs Inline level ?
대부분의 HTML 요소는 해당 요소가 브라우저에서 어떻게 보이는가를 결정짓는 display 속성을 가지는데, 대부분은 다음 두가지 값 중 하나를 가지게 된다.
1. 블록(block) : 언제나 새로운 라인(new line)에서 시작되며 해당 라인의 모든 너비(width)를 차지한다.
대표적인 예)<p>,<div>,<ul>,<ol>,<form>등
2. 인라인(inline) : 새로운 라인이 아닌 이전 코드와 같은 라인에서 시작되며 요소의 너비 또한 해당 라인 전체가 아닌 사용되는 content 만큼만 차지한다.
대표적인 예)<span>,<a>,<img>등
HTML 속성(Attributes)
엘리먼트의 태그를 확장하여 이용하고 싶다면 attribute(속성)를 이용해볼 수 있다. attributes는 아래와 같이 엘리먼트의 여는 태그에 이름(name)과 값(value)을 작성하여 사용한다.
<div id="intro">
<h1>Introduction</h1>
</div>여기서 <div> 태그는 id라는 이름으로 intro라는 값을 가지는 attribute을 가지는데, 이러한 attribute들은 주로 CSS로 스타일링, JavaScript로 동적인 코드를 작성할 때 불려지는 용도로 사용된다.
<img src="image-location.jpg" alt="white rabbit" />
<img src="http://url" alt="white rabbit" />image태그는 src라는 이름의 attribute를 필수적으로 포함하며 그 값은 이미지의 주소나 URL이 된다.
image 태그에서의 alt 속성의 목적 ?
또 다른 속성인 alt라는 이름의 attribute는 주어진 이미지의 설명을 담는다. 만약 이미지가 로드되는 것이 실패했을 때 이미지에 마우스 오버할 경우 alt의 값이 대신 보여진다. 또한 검색엔진 최적화(SEO)에서도 이미지 대신 중요한 역할을 한다.
<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>video태그 또한 사용 가능하며 image 태그와 마찬가지로 src attribute와 그 값으로 영상의 소스를가진다. 그러나 self-closing tag인 image 태그와는 다르게 여는 태그, 닫는 태그 모두 사용하니 주의하도록 하자.
또다른 attributes인 width,height은 비디오의 가로, 세로 크기를 정할 수 있으며 controls는 비디오 플레이어가 기본적인 컨트롤(pause, play and skip) 기능을 가지게 한다.
내부 text인 Video not supported는 만약 브라우저가 비디오를 로드하지 못했을 경우 나타나는 문구이다.
만약 youtube 영상을 가져오고싶다면
<iframe>태그를 이용해야한다!
이외 참고할 만한 사항은 MDN) HTML 속성 레퍼런스 참고 사이트를 확인하면 좋다.
참고한 자료
