HTML | HTML에 대하여 — ✨HELLO, YEOJIN WORLD✨

수업 내용 정리

Tag(Element)의 기본 요소

엘리먼트 : 우리가 태그라고 부르는 것의 정식명칭은 엘리먼트로 한국말로 요소라고 함
태그 : 엘리먼트의 종류를 기술할 때 <>안에 적는 것을 의미함, 즉 엘리먼트의 이름
컨텐츠 : 내용으로 여는 태그와 닫는 태그 사이에 기술 됨, 안에 다른 엘리먼트가 들어갈 수도 있는데 이 경우 해당 엘리먼트는 children(자식)이 됨
속성 : 엘리먼트의 속성(Attribute)을 나타냄, 값이 없을 수도 있고 있을 수도 있는데 있다면 반드시 ="값" 형태로 적어줘야 함

void tag와 self closing tag

<p></p>같은 형태가 아니라 <input/>혹은 <input>같이 닫는 태그가 없거나 본체에 포함된 경우가 있음

이런 태그의 정식 명칭은 void tag이며 self closing tag라는 명칭과 혼용되고 있음

(<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source> 등등..)

<input> - void tag
<input/> - self closing tag

다만, self closing tag는 html 스펙 상에서 존재치 않음

HTML4의 잔재이며, 현재 HTML5의 브라우저에서는 호환되서 남고 있음

<!-- 원본 소스 코드 -->
<input/>
<div/>hihi

<!-- HTML 반영 코드 -->
<input>
<div>hihi</div>

self closing tag의 동작을 조금 더 살펴보면 HTML에서는 맨 마지막에 오는 /를 무시함

따라서 void tag는 원래 /가 안와도 되므로 정상적인 동작을 함

만약 void tag가 아니라면 <div/>는 <div></div>가 아니라 <div>로 인식하고 닫는 태그를 누락한걸로 인식하게 됨

React나 Vue에서 self closing tag를 자주 사용하는데 이는 html문법이 아닌 React,Vue 문법임

=> self closing tag를 쓰려면 반드시 void tag에만 써야함!!

HTML의 기본 Tag (Element)

Hello World

Html 파일에 태그 없이 단순 hello world를 입력한 뒤 브라우저에 띄워보면 글자가 그대로 나오는 것을 확인 할 수 있다

그리고 F12(개발자 도구) > Elements 탭을 선택하여 보면 내가 작성하지 않은 태그 html, head, body가 존재한다

이러한 태그를 기본태르가 부르며 없다면 만들어서라도 제공하며, 이 작업을 에러복구(Error Recovery)라 부름

또한 Doctype도 기술하지 않았는데 이 경우 호환모드(Quirks Mode)로 동작하게 된다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>My Site</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>

DOCTYPE : 현재 문서가 어떤 타입인지 알려줌, 현재는 사실상 html(html5)만 쓰이며 누락 될 경우 호환모드로 동작하는데 기본 모드와 차이가 있으므로 누락하지 않는 것을 권장함
html : 사실상 모든 내용을 감싸는 태그, lang속성은 해당 html이 어떤 언어 베이스로 사용됐는지를 알림
head : html내부에서 보여지는 부분 외의 데이터들을 선언하는 태그
meta : 다양한 메타정보들을 넣음. 위의 코드에서는 charset을 넣었는데 viewport도 선언할 수 있는데 없을 경우 브라우저가 알아서하기 때문에 명확한걸 원한다면 선언해야함
title : 탭에 표시될 제목, 없을 경우 주소창에 입력한 주소가 뜸
body : 화면에 보여질 본체가 들어갈 태그

html파일에 태그 없이 단순 내용만을 입력했을 때 파일 내용을 수정 후 자동 반영이 안됐던 이유는 body태그가 누락되었기 때문이다

body안에 명시적으로 넣어주면 자동으로 변화를 감지해서 업데이트 내용을 자동 반영해준다!!

br태그와  

Html에서는 일반적인 강제개행(줄바꿈)이 먹히지 않는다

왜냐하면 Html에서 기본적으로 space와 enter같은 공백 문자는 일괄적으로 space로 바꾸기 때문이다

이는 텍스트를 좀 더 유연하게 쓸 수 있게 해주지만 처음 배우는 입장에서는 당황스러움을 맛 볼 수 있다..!

이때 <br>을 사용하면 줄 바꿈을 표시해 줄 수 있다

br은 void 태그이기에 닫는 태그를 쓸 수 없고 self closing이 가능하지만 일반적으로 <br/> 형태를 사용하지는 않는다!

또 아무리 space가 많아도 한 개로 처리하는데 이는 붙어 있는 공백 문자는 한 개로 처리하기 때문이다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>My Site</title>
  </head>
  <body>
    동해물과      백두산이<br>
    마르고 닳도록<br/>
    하느님이 보우하사<br>
    우리나라&nbsp;&nbsp;&nbsp;만세
  </body>
</html>

My Site 동해물과 백두산이
마르고 닳도록
하느님이 보우하사
우리나라 만세

공백을 여러개 주기 위해서는  를 사용할 수 있다. (non-breaking space의 줄임말)

  같이 &으로 시작해서 ;으로 끝나는 것을 HTML엔티티(HTML Entities) 혹은 Character Reference라고 하며,

일반적인 역할은 예약 문자들을 회피하기 위해서 사용한다

(참고) HTML Entities의 종류들을 알아보고 싶다면?

엔터티 (Entity) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

HTML **엔터티(Entity)**는 앰퍼샌드(&)로 시작하고 세미콜론(;)으로 끝나는 텍스트 조각('문자열')입니다. 엔터티는 예약된 문자(HTML 코드로 해석됨)와 보이지 않는 문자(예, 줄바꿈 없는 공백)를 표시

developer.mozilla.org

Character reference - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

An HTML character reference is a formatted pattern of characters that is used to represent another character in the rendered web page.

developer.mozilla.org

기초적인 Text 태그

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
  </head>
  <body>
    <b>굵게표시</b> &nbsp;&nbsp;
    <strong>굵게표시</strong><br>
    <i>기울임표시</i> &nbsp;&nbsp;
    <em>기울임표시</em><br>
    <u>밑줄표시</u> &nbsp;&nbsp;
    <ins>밑줄표시</ins><br>
    <del>취소선표시</del> &nbsp;&nbsp;
    <mark>형광펜표시</mark><br>
  </body>
</html>

Document 굵게표시    굵게표시
기울임표시    기울임표시
밑줄표시    밑줄표시
~~취소선표시~~    형광펜표시

[b, strong], [i, em], [u, ins] 왜 같은 효과인데 두개가 존재하는가?

html에서는 의미론적(시멘틱)인게 중요, 누군가 html코드를 봤을 때 이 사람이 어떤 의미에서 이걸 썼는지가 중요하기 때문이다
일반적으로 b(bold), i(italic), u(underline)은 의미보단 기능에 초점을 맞춘다. 그리고 그 기능에 초점을 맞춘다면 의미론적으로는 사용이 적절치 않다
strong, em(emphasize:강조), ins(inserted:추가)는 의미에 초점을 맞추므로 이쪽을 사용하는게 권장 된다

HTML의 대부분의 태그들은 Style(CSS)를 수정함으로써 다른 태그들을 대체 할 수 있다

i태그를 b태그와 똑같은 역할을 수행하게 할 수 있으며, 몇 개는 브라우저에서 제공하는 기능들이 있는데 이는 흉내낼 수 없지만 이런 태그의 종류는 또 많지 않다

그래서 html태그는 의미론적인 것이 중요하다!!

b태그는 단순히 굵게라는 뜻이지만, strong태그는 강조했다는 뜻을 가지기 때문!

Container 태그

컨텐츠나 레이아웃에 영향을 주지 않는 태그 (span, div)

`span` 태그

텍스트를 묶어줄 때 사용, 정확히는 inline태그들을 묶어주는 용도로 사용
인라인 요소 (줄 바꿈이 되지않고 옆으로 나열 됨)
중첩 가능

그냥 텍스트를 묶어준다고 생각하면 된다!

`div` 태그

텍스트 형태의 태그가 아니더라도 여러 종류의 태그를 묶어줄 때 사용
일종의 구역을 가지는 태그 (박스형태, 자동 줄 바꿈)
블록 레벨 요소
중첩 가능

`p` 태그 (문단 태그)

택스트를 묶어줄 때 사용
p는 paragraph의 약자
일종의 구역을 가지는 태그
block태그라고 하며 결과는 block으로 나옴
중첩 가능
p태그를 설정하면 위 아래에 여백(margin)이 생김

전역 속성

속성은 여러 종류가 있으며, 위 사진의 class가 속성의 예시 중 하나이다

그 중에서 어떤 태그도 모두 공유하는 속성을 전역속성(Global Atrribute)라고 한다

(참고) 전역 속성들을 알아보고 싶다면?

전역 특성 - HTML: Hypertext Markup Language | MDN

전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.

developer.mozilla.org

id

해당 태그를 구별하는 식별자로 모든 html에 한 개로 유일
유일하지 않다고 에러가 나는 것은 아니지만 권장하지 않음
#(해시)뒤에 붙을 경우 해당 tag로 이동함
css selector에서 # 으로 검색

class

유일하지 않지만 개념적으로 묶을 수 있는 것들을 묶는 식별자
css selector에서 . 으로 검색

나머지 속성들은 css selector에서 [속성명=속성값]으로 검색함

[type="text"]

style

해당 요소에 css 지정
스타일은 정말 많은 종류가 있고 일일히 외울 수 없음, 그러므로 작업하기 전에 있는지 인터넷에 검색하고 사용하는 것 추천
ex) <div style="height:50px; background-color:red;">스타일 적용</div>

'FE > HTML & CSS' 카테고리의 다른 글

HTML \| 자주 쓰이는 HTML 요소들 (0)	2024.10.13
HTML \| 시맨틱 마크업 (Semantic Markup) (0)	2024.10.09
CSS \| CSS를 적용하는 방법 및 우선순위 (0)	2024.09.26

Tag(Element)의 기본 요소

void tag와 self closing tag

HTML의 기본 Tag (Element)

br태그와 &nbsp;

기초적인 Text 태그

[b, strong], [i, em], [u, ins] 왜 같은 효과인데 두개가 존재하는가?

Container 태그

span 태그

div 태그

p 태그 (문단 태그)

전역 속성

id

class

style

'FE > HTML & CSS' 카테고리의 다른 글

티스토리툴바

br태그와

`span` 태그

`div` 태그

`p` 태그 (문단 태그)