HTML 기본 (中)

1. 주석(Comment)

<!-- 한 줄의 주석 —>

<!--
  여러 줄의
  주석입니다.
—>

HTML 주석은 브라우저에 표시되지 않지만 소스코드를 구성하는데 도움을 줍니다. 위와 같은 문법으로 주석을 표시하며, <!— 와 —> 사이는 무엇이든 화면에 표시되지 않습니다. HTML 코드 가운데에, 즉 inline 으로도 사용이 가능합니다.

2. HTML과 CSS

CSS는 HTML에 3가지 방식으로 추가될 수 있습니다. 첫 번째는 Inline 스타일로, HTML 태그의 style 속성에 추가하는 방식입니다. 두 번째는 Internal 스타일로, <head>섹션의 <style>태그를 사용해서 추가하는 방식입니다. 세 번째는 External 스타일로, <head>섹션의 <link>태그를 통해 외부 CSS 파일을 링크해서 추가하는 방식입니다.

HTML은 또한 140여개의 "색상 이름"을 지원합니다. Orange, mediumSeaGreen, SlateBlue 등이 그 예시입니다. 색상 이름 뿐만 아니라 RGB, HEX, HSL(Hue - 색조 / Saturation - 채도 / Lightness - 밝기), RGBA, HSLA 값도 물론 사용 가능합니다.

3. Block 요소와 Inline 요소

Block 요소는 항상 새로운 줄에서 시작합니다. 항상 가능한 최대의 너비를 가지며 Inline 요소를 포함할 수 있습니다. 브라우저가 자동적으로 요소 앞뒤로 마진 추가합니다. <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>~<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> 등이 Block 요소에 해당합니다.

Inline 요소는 새로운 줄에서 시작하지 않습니다. 필요한 만큼만 너비를 차지하며 Block 요소를 포함할 수 없습니다. <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <I> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> 등이 Inline 요소에 해당합니다.

4. Class 속성

<head>
<style>
.person {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="person">
  <h2>동동</h2>
  <p>쿠크다스를 먹고 있는 동동</p>
</div>

</body>

HTML 요소에 클래스를 특정하기 위해 사용되는 속성입니다. 어떠한 HTML 요소에서든 클래스 속성을 추가할 수 있습니다. 보통은 스타일시트에서 클래스를 가리키기 위해서 많이 사용하고, 특정한 클래스 이름을 가진 요소들을 제어하기 위해 Javascript에서도 사용합니다. 여러 HTML 요소가 같은 클래스를 공유할 수도 있습니다. 대소문자를 구분하며, 스타일시트 등에서 점(.) 문자에 클래스 이름을 이어붙여 사용합니다. 한 HTML요소가 여러 클래스를 가질 수 있는데 이를 위해선 공백으로 구분합니다. 자바스크립트에선 getElementsByClassName() 메소드를 통해 특정 클래스에 접근 가능합니다.

5. Id 속성

<head>
<style>
#firstHeading {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="firstHeading">첫 번째 제목</h1>

</body>

HTML 요소를 unique한 id로 특정하기 위해 사용되는 속성입니다. 그렇기에 한 HTML 문서에서 부여되는 id값은 모두 유일해야합니다. class 속성과 마찬가지로 스타일시트와 자바스크립트에서 이를 통해 특정 요소에 접근 가능합니다. 대소문자를 구분하며 스타일시트 등에서 샾(#) 문자에 아이디 이름을 이어붙여 사용합니다. 숫자로 시작할 수 없으며 반드시 하나 이상의 character를 가져야하고 공백을 가질 수 없습니다. 북마크에 활용 가능합니다. 자바스크립트에선 getElementById() 메소드를 통해 특정 요소에 접근 가능합니다.

6. Iframe

<iframe src="url" title="description"></iframe>

Iframe이란 웹페이지 안의 웹페이지를 보여주기 위해 사용되는 요소입니다. <iframe>태그를 사용해 inline frame을 특정합니다.
<iframe>태그는 title 속성을 가져야 스크린 리더가 iframe의 콘텐츠를 읽을 수 있습니다. 기본적으로 border를 가지는데, 이를 제거하기 위해선 css의 border: none; 속성을 이용하면 됩니다. 링크를 위한 타겟 프레임으로도 이용 가능합니다(링크 클릭시 아이프레임안에 해당 페이지 보여줌). 단, iframe의 name 속성과 링크의 target 속성이 일치해야합니다.

(자세한 예시는 다음 링크 참조 : https://www.w3schools.com/html/html_iframe.asp )

7. <script> 태그

<script>
document.getElementById("demo").innerHTML = "자바스크립트다!!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

8. 파일 경로

HTML에 기술할 수 있는 경로는 절대경로와 상대경로가 존재합니다. 가능하면 되도록 상대경로를 쓰는 것이 현재 베이스 URL에 영향을 받지 않기 때문에, 개발환경과 추후 배포 환경에서의 도메인에 따라서 변경될 일이 없어 좋습니다.

9. 컴퓨터 코드를 위한 태그들

<kbd> 태그는 키보드 입력값을 정의하기 위해 사용됩니다. 이 태그 안의 콘텐츠는 브라우저의 기본 monospace 폰트로 나타납니다.

<samp> 태그는 컴퓨터 프로그램의 예시 출력 값을 정의하기 위해 사용됩니다. 이 태그 안의 콘텐츠는 브라우저의 기본 monospace 폰트로 나타납니다.

<code> 태그는 컴퓨터 코드의 조각을 정의하기 위해 사용됩니다. 이 태그 안의 콘텐츠는 브라우저의 기본 monospace 폰트로 나타납니다. 참고로 <code>태그는 태그 내용의 추가적인 공백이나 line-break를 나타내지 않습니다. 이를 나타내기 위해선 <pre> 태그 안에 <code>태그를 중첩 형식으로 넣어야 합니다.

<var> 태그는 수학이나 프로그램의 변수 표현을 정의하기 위해 사용됩니다. 이 태그 안의 콘텐츠는 보통 이탤릭체로 나타납니다.

10. 문자 예약어

HTML에서 자주 쓰이는 문자 예약어는 다음과 같습니다.

나타내는 것	예약어(이름)	예약어(번호)
<	<	<
>	>	>
&	&	&
"	"	"
'	'	'
(non-breaking space)
€	€	€
©	©	©
®	®	®

11. 이모지(Emoji)

HTML에서 이모지는 UTF-8 캐릭터셋의 일련의 숫자들로 나타낼 수 있습니다. 예를들어 😄는 128516, 😍는 128525, 💗는 128151입니다. HTML내에서 나타낼 때에는 다음과 같이 나타냅니다.

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

참고로 HTML5에서는 세상 대부분의 문자와 심볼들을 커버하는 UTF-8 캐릭터셋을 사용하도록 권장하고 있습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

HTML Best Practice (0)	2023.03.20
HTML Forms (0)	2022.12.13
Semantic HTML 작성하기 (0)	2022.10.31
HTML 기본 (下) (0)	2022.10.20
HTML 기본 (上) (0)	2022.10.19