HTML 기초
우선, 여러가지 html 태그들에 대해서 공부하기 전에 html에 대해서 기본적으로 기억하고 있어야할 것들을 정리해보도록 하겠습니다.
기본적으로 기억할 것
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
1. 모든 html 문서는 반드시 문서형식(타입)에 대한 선언으로 시작해야 한다.(<!DOCTYPE html> 부분해당)
2. html 문서는 <html> 태그로 시작해서 </html> 태그로 끝난다.
3. html 문서에서 <body> </body> 사이의 내용이 실제 시각적으로 나타나는 부분이다.
<!DOCTYPE> 선언
html은 버전별로 지원하는 태그가 조금씩 다릅니다. html이 버전업을 지속해오면서 각 버전별로 추가되는 태그, 삭제되는 태그들이 존재하다보니 주어진 html 문서를 올바르게 해석하기 위해서는 해당 문서가 어떤 버전의 html로 작성됬는 지를 알아야할 필요성이 있습니다. 그렇기 때문에 html 문서를 읽어들이는 웹브라우져 입장에서는 해당 html 문서가 어떤 버전의 html로 작성된 것인지를 알아야 올바르게 html 문서의 내용을 페이지에 표시해줄 수 있습니다.
그래서 html이 어떤 버전으로 작성되었는 지를 미리 html 문서의 시작에 미리 선언함으로서 웹브라우져가 올바르게 문서의 내용을 표시해줄 수 있도록 하는 것이 바로 이 <!DOCTYPE> 선언입니다. DOCTYPE 선언은 html 문서내에서 오직 1번만 사용되어야 하며 대소문자를 구분하지 않습니다(non-case sensitive). 대소문자를 구분하진 않지만 DOCTYPE의 경우 강조를 위해서 대문자로 사용하는 경우가 많으니 기억하시기 바랍니다.
정리해보면,
1. <!DOCTYPE> 선언은 문서의 형식을 나타내고, 웹 브라우져가 페이지를 잘 나타낼 수 있도록 돕는다.
2. <!DOCTYPE> 선언은 문서 내에서 오직 1번만 사용해야하며, 페이지의 가장 위쪽에 위치한다.(html 태그가 나타나기 이전)
3. <!DOCTYPE> 선언은 대소문자를 구분하지 않는다. (하지만 강조를 위해서 대문자만을 사용하는 경향이 있다.)
대표적인 예시를 들면, html5를 사용한 경우 아래와 같이 선언합니다.
<!DOCTYPE html>(다른 버전의 html인 경우 !DOCTYPE 뒤에 오는 키워드가 달라집니다.)
다른버전의 html의 경우 어떻게 선언하는 지에 대해서는 여기서 따로 다루지 않겠습니다.
태그를 중첩하여 사용할 수 있는 가?
html의 경우 태그들이 중첩되어 사용될 수 있습니다. 즉, 특정 html 요소가 다른 요소를 포함할 수 있다는 뜻으로 해석 됩니다.
다음과 같이 간단하게 작성된 html 문서의 경우에도 <html> 이라는 루트태그가 <body>, <h1>, <p> 태그들을 포함하고 있는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
시작태그(Start Tag), 종료태그(End Tag)는 생략될 수 없다.
html 문서에서 기술되는 대부분의 문장들은 시작태그와 종료태그로 구성됩니다. 시작태그와 종료태그는 서로 항상 동일한 set으로 함께 작성되어야 하며 하나가 누락되는 경우 웹 브라우져가 html 문서를 제대로 해석할 수 없기 때문에 항상 태그를 빠뜨리지 않고 언급할 수 있도록 주의 해야 합니다.
<h1> Hello World!
<p> Why not change the world?즉, 위와 같이 html 문서를 작성한 경우 이는 오류를 일으키며 문서의 내용이 제대로 해석되지 않습니다.
하지만, 예외의 경우가 존재한다.
하지만, 위의 진술에 대한 예외가 존재합니다. 대표적으로 <br> 태그의 경우 종료태그와 자신이 가지는 내용이 존재하지 않으며 그냥 태그 자체가 "개행" 이라는 의미를 가지는 태그 입니다. 그래서 우리는 이를 빈 태그(Empty Tag) 라고 부르기도 합니다.(내용을 가지지 않기 때문에). 즉, 위에서 이야기한 것처럼 종료태그가 존재하지 않지만 html 문서에서 다음 문장은 문법적으로 옳은 문장입니다.
<p> Hello Wolrd! <br> Why not change the world? </p>그리고 html5로 넘어오면서는 <br> 태그와 같은 빈 태그들을 작성할 때 해당 태그가 시작이면서 종료라는 의미를 내포하도록 다음과 같이 작성할 것을 권장하고 있습니다.
<br />
앞으로 우리가 공부할 html 버전은 5이고, 현재 웹 개발에서 html5가 지배적으로 많이 사용되고 있기 때문에 이 규칙을 준수해서 코드를 작성하는 것이 좋을 것 입니다.
HTML 태그는 대소문자를 구분하지 않는다.(non-case sensitive)
html 태그는 대소문자를 구분하지 않습니다. 그렇기 때문에 <h1>이나 <H1> 모두 동일한 태그로 해석됨을 의미합니다. html 표준에서는 태그에 어떤 형식(대문자 or 소문자)을 사용할 지 따로 명확하게 명시하고 있지 않습니다. 하지만 W3C에서는 html 태그에 소문자를 사용할 것을 권장하고 있습니다. 그리고 XHTML과 같은 엄격한 문서에는 태그에 소문자를 사용할 것을 더욱 강력히 권고하고 있습니다. 그렇기 때문에 우리는 html 태그에 대해서 다음과 같이 정리해볼 수 있습니다.
"HTML 태그는 대소문자를 구분하지 않으므로 둘 중에 무엇을 사용하던 지 그것이 문제가 되지는 않지만, 소문자를 사용할 것을 권장한다."
HTML 태그 속성(attributes)
이번에는 html 태그가 가질 수 있는 "속성"에 대한 이야기를 해보고자 합니다. html태그는 속성을 가질 수 있습니다. 이 속성을 통해서 우리는 html 태그에 부가적인 정보를 제공할 수 있게됩니다. html 태그에 대한 속성은 항상 시작태그에 명시하며, 종료태그에 명시하는 경우는 없습니다. 아래와 같이 태그 내에서 속성을 사용할 때에는 해당 속성에 대한 이름과 그 속성에 대한 속성값을 할당하게 됩니다.
<htmlTag name="value"> Contents </ htmlTag>그렇다면 html 태그에 속성과 속성값을 부여해서 어떠한 일들을 할 수 있는 지 간단한 예시들을 살펴볼 수 있도록 하겠습니다.
(지금은 해당 속성에 대해서 공부한다기 보다 이런식으로 사용할 수 있구나 정도를 느끼는 정도로 진행하시는 것이 좋을 것 같습니다.)
이번 글에서는 다음과 같은 속성들을 다뤄보고자 합니다.
| 속성 | 내용 |
| herf | <a> 태그에 부여 시 하이퍼링크 생성 |
| src | <img> 태그에 부여 시 출력할 이미지가 존재하는 경로 지정 |
| width / height | <img> 태그에 부여 시 출력할 이미지의 크기를 지정 |
| alt | <img> 태그에 부여 시 출력이미지의 경로가 잘못된 경우 대신 출력할 텍스트를 지정 |
| style | 해당 태그의 contents에 적용할 스타일을 지정 |
| lang | <html> 태그에 사용하며 해당 문서에 사용할 언어를 지정 |
| title | html 태그에 대한 추가적인 정보를 제공 |
href 속성
우리는 이 href 속성을 사용함으로서 하이퍼링크를 걸 수 있게 됩니다.
<a href="https://store.kakaofriends.com/kr/index?tab=home"> KakaoFirends Store </a>
src 속성
<img src="test_img.png" alt="kakaoFriendsRyan"/>다음과 같이 작성한 경우 웹 페이지에서는 <img> 태그가 삽입된 위치에 대해서 해당 html 문서와 동일한 폴더에 존재하는 test_img.png 파일을 불러와서 화면에 출력하게 됩니다. src 속성의 속성값으로는 절대경로 또는 상대경로를 사용해서 해당 html 문서와 서로 다른 위치에 위치해있는 파일을 불러오는 것이 가능해집니다.
width & height 속성
우리는 <img> 태그에 width와 height를 지정함으로서 화면에 출력하고자 하는 이미지의 크기를 픽셀단위로 지정할 수 있습니다.
<img src="test_img.png" width="300px" height="200px" />다음과 같이 <img> 태그에 width, height 속성의 속성값을 할당한 경우 출력하려고 하는 test_img.png 파일은 화면 상에 가로 300px, 세로 200px 의 크기로 화면에 출력되게 됩니다. 이와 관련된 자세한 예시는 뒤에서 다룰 것이니 가볍게 넘어가도록 하겠습니다.
alt 속성
<img> 태그에 src 속성과 속성값을 할당하여 이미지를 출력하려 할 때 src로 전달된 경로가 잘못되어 해당 이미지를 정상적으로 출력할 수 없는 경우가 없습니다. 이러한 경우 우리는 <img> 태그에 alt 속성과 그 속성값을 할당함으로서 해당 이미지를 대체하는 텍스트를 지정할 수있습니다.
<img src="test_img.png" alt="Ryan" />그리고 이는 실제로 해당 이미지를 표현하는 텍스트로 쓰이기도 하며 검색엔진으로 해당이미지를 검색할 때 활용된다고도 알려져 있습니다.
위와 같이 코드를 작성하는 경우 우리가 화면에 출력하려는 test_img.png 파일은 Ryan이라는 대체 텍스트를 가지게 되며 또한 어떠한 오류나 경로지정 등의 오류로 인하여 해당 이미지를 출력할 수 없는 경우 대체 텍스트인 Ryan이 해당 이미지가 출력되어야할 위치에 나타나게 됩니다.
style 속성
<h1>, <p> 태그와 같은 태그들에 style 속성을 사용함으로서 우리는 스타일을 부여할 수 있습니다. 차후에 CSS에 대해서 공부하면서 좀 더 자세히 다루겠지만 간단한 예시를 통해서 이를 한번 살펴보도록 하겠습니다.
<h1>Hello World? </h1>
<p> Why not change the world? </p>위와 같이 코드가 작성된 경우 우리는 아래와 같은 출력결과를 확인할 수 있습니다. 해당 출력결과는 단순 태그에 의한 출력이지 그 어떠한 디자인도 부여되지 않은 상태입니다.
그렇다면 다음과 같이 style 속성을 이용해서 스타일을 부여해보도록 하겠습니다. 물론 style에 사용되는 속성과 그 속성값들에 대해서는 추후에 정확하게 다룰 것이니 현재는 그 의미에 대해서 너무 걱정하거나 고민하실 필요가 없습니다. 단, 다음과 같이 style 속성을 이용해서 디자인을 부여할 수 있다는 점을 기억하시기 바랍니다.
<h1 style="color: tomato; background-color: gold;">Hello World? </h1>
<p style="color: blue; font-weight: bold; background-color: lightgreen;">
Why not change the world? </p>
다음과 같이 style 속성을 이용하여 html 태그의 내용에 디자인을 부여할 수 있게 됩니다.
lang 속성
<html> 문서를 작성할 때 lang 속성을 사용하는 것은 대단히 중요합니다. lang은 기본적으로 해당 웹페이지가 어떤 언어를 사용하는 지를 지정하기 위함인데 이는 단순한 언어에 대한 지정 뿐만 아니라 검색엔진 및 브라우져를 지원하기 위해서 필요한 속성입니다.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>또한 우리는 lang 속성에 대한 속성값에 국가를 추가할 수도 있습니다. 그래서 첫번째 두문자는 언어, 마지막 두 문자는 국가를 표시합니다. lang 속성의 속성값으로 언어와 국가를 지정하는 것은 미리정의되어 있는 표준이 존재하며 이 표준을 참고하여 사용하시면 됩니다.
해당 표준에 대한 구체적인 내용은 추후에 다루도록 하겠습니다.
title 속성
title 속성은 여러종류의 html 태그들에 대한 부가적인 정보를 전달 할 때 사용합니다. title 속성을 통해서 부여한 속성값을 나중에 웹 페이지에서 해당 요소위에 커서가 올라간 경우 tooltip의 형식으로 표시되게 됩니다.
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph,
to display the title attribute as a tooltip.</p>다음과 같이 코드를 작성함으로서 평소에는 해당 요소에 대한 정보를 제공하지 않다가 커서가 해당 요소 위로 올라가면 부가적인 정보를 표시하게 되는 것입니다. 이를 통해서 나중에 사용자들에게 부가적인 유용한 정보를 전달하는 데 사용할 수 있습니다.
속성(attribute)를 사용할 때 지키면 좋은 몇가지 권장사항
1. 속성명을 사용할 때 소문자(lowercase)를 사용하자
html 표준에서는 속성명에 어떤 형태(소문자 or 대문자)를 사용해야할 지 언급하고 있지 않습니다. 하지만 W3C에서는 html의 속성명을 사용할 때 소문자를 사용할 것을 권장하고 있습니다.(XHTML의 경우 더욱 강력하게 권하고 있습니다.) 따라서, 별다른 제약은 없지만 권장사항을 준수해서 항상 속성명을 소문자로 사용하는 습관을 들이는 것이 좋습니다.
2. 속성값을 할당할 때 항상 Quote로 감싸주자
html 표준에서는 속성에 속성값을 할당할 때 이를 Quote로 감싸는 것에 대한 언급이 없습니다. 즉, 다음과 같이 작성해도 문제가 되지 않는다는 것입니다.
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>하지만, W3C에서는 Quote를 사용할 것을 권장하고 있습니다. 즉, 다음과 같이 작성할 것을 권장합니다.
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>그리고 Quote로 감싸지 않는 경우 아래와 같이 속성값에 공백이 포함될 수 없기 때문에 이러한 이유 때문에도 속성값 할당 시 Quote를 사용해주는 것이 좋습니다.
<p title=About W3Schools>
Single Quote vs Double Quote
보통 html에서는 속성값을 감쌀 때 Double Quote를 사용하는 것이 일반적입니다. 하지만 Single Quote를 사용한다고 해서 문제가 되는 것은 아닙니다. 즉, 아래의 두 가지 코드가 모두 문제가 없는 유효한 코드 입니다.
<p title="Kakao Friends Ryan!"><p title='Kakao Friends Ryan!'>그리고 만약 속성값 안에 Double Quote를 포함해야하는 경우 다음과 같이 작성할 수 있습니다.
<p title='Kakao Friends "Ryan"!'>
이로서 html에 대한 기초적인 내용에 대해서 살펴보았습니다. 다음부터는 다양한 종류의 html5의 태그들에 대해서 공부해보도록 하겠습니다. 긴글 읽어주셔서 감사합니다!
'Web Basic > HTML' 카테고리의 다른 글
| HTML Quotation & Comments (인용구 & 주석) (0) | 2020.07.20 |
|---|---|
| HTML Formatting(서식) (0) | 2020.07.20 |
| HTML Styles (0) | 2020.07.20 |
| Heading(제목) & Paragraphs(단락) (0) | 2020.07.20 |
| HTML 개요 (0) | 2020.07.20 |