Written by php-style
on 2021-09-20

HTML 태그

※ 카테고리 [TIL 치즈 조각]은 제가 공부하면서 얻은 (작은) 정보들을 정리하는 공간입니다.

후에 조각들을 모아 깔끔하게 정리해서 글을 쓰는 것이 목표지만, 지금은 개인적인 메모에 가깝습니다.

따라서 [TIL 치즈 조각] 게시물은 수정되거나, 잘못된 정보가 있을 수 있다는 점 유의하시기 바랍니다.

(잘못된 부분에 대해서는 피드백 주신다면 감사하겠습니다^^)

HTML (Hyper Text Markup Language)

웹페이지의 기본적인 뼈대를 만들어주는 기초적인 마크업 언어 .

Tag

각 태그에 관한 내용은 대부분 MDN Web Docs의 내용을 참고했습니다.

웹 브라우저에서 글이나 이미지 등의 콘텐츠를 표시하기 위해 사용되는 구성 요소.

위와 같은 형식으로 '여는 태그', '닫는 태그'를 사용한다. (태그가 하나 뿐인 경우도 있다.)

'내용'

꺽쇠 안의 태그 이름은 대소문자를 구분하지 않는다.

Tag List

▲ 웹 페이지에서 가장 많이 사용되는 태그들

제목

~ 태그를 사용한다. 숫자가 커질수록 글자 크기는 작아진다.

제목을 표시합니다. 제목을 표시합니다. 제목을 표시합니다. 제목을 표시합니다. 제목을 표시합니다. 제목을 표시합니다.

줄바꿈

로 줄바꿈을 할 수 있다. 태그를 따로 열고 닫지 않고 하나만 사용한다.

이렇게 그냥 엔터를 누르면, 브라우저에서는 줄이 안 바뀌지 않지만. 줄바꿈 태그를 사용해서 다음 줄로 넘어 갈 수 있다. 여러 번 사용하면, 한번에 여러 줄도 건너 뛸 수 있다.

다만, 태그는 줄바꿈이라는 하나의 목적을 위한 것으로, 문단 사이의 여백 등이 필요한 경우에는 태그나

CSS의 속성 이용이 권장된다.

스타일

강조

1. 굵은 글자를 표현합니다. 2. 굵은 글자를 표현합니다. 3. 기울어진 글자를 표현합니다. 4. 기울어진 글자를 표현합니다.

표면적으로 봤을 때, 와 , 과 는 같은 역할을 하는 것처럼 보인다.

겉으로 볼 때는 똑같지만 '의미'에 차이가 존재한다.

는 bold를 뜻하며 우리가 알고 있는대로 글자를 굵게 표시할 때 사용한다.

다만 말그대로 '굵게' 표시할 뿐이지 강조의 의미는 없다.

역시 굵은 글자를 표시하지만 '긴급'하거나 '강한 강조'를 나타낼 때 사용한다.

아래에 설명할 보다도 강한 강조를 의미한다.

은 emphasis를 뜻하며, 대부분의 브라우저에서 기울어진 글자를 표시한다.

단순히 기울어진 글자를 표시할 뿐만 아니라, 강조의 의미도 가지고 있다.

위의 보다는 약한 강조의 의미를 가지고 있다.

는 기울어진 글자를 표시하지만, 와 같이 강조의 의미는 없다.

여기서 은 대화할 때 특정 의미를 강조하기 위해 강하게 말하는 것과 비슷한 의미인 듯 하다.

태그로 작성된 문장을 음성으로 읽게 하면, 볼륨이나 톤을 강하게 읽게 할 수 있다고 한다.

추가로, 스타일을 위해 나 를 사용하기보다는 CSS의 font-weight, font-size를 사용하는 걸 권장한다.

1. 글을 하이라이트합니다. 2. 밑줄을 긋습니다. 3. 취소선을 긋습니다.

는 사용자의 행동과 연관성이 있거나, 주의깊게 봐야할 부분을 표시하는데 사용할 수 있다.

하이라이트 표시만을 위한 용도로 사용할 때는, 과 CSS를 사용하라고 권장한다.

는 철자 오류 강조, 중국어의 고유명사 표시 등에 사용할 수 있다.

단순히 스타일로써 밑줄을 추가하고 싶은 경우, CSS의 text-decoration을 사용하라고 권장한다.

는 더 이상 관계없거나 정확하지 않는 부분을 나타낼 때, 사용한다.

문서의 편집기록, 수정사항을 나타내고 싶을 때는 나 을 사용한다.

링크

웹페이지 이름

태그의 속성 중 target은 해당 URL을 어디에 표시할지 결정합니다.

_self : 현재 창에 URL을 표시합니다.

_blank : 새 탭 또는 새 창을 열어 URL을 표시합니다.

_parent : 현재 창의 부모 창에 해당 URL을 표시합니다.

예를 들어, 팝업 창에서 링크를 누르는 경우, 팝업을 띄우기 전 창에서 URL을 표시합니다.

_top : 현재 창의 부모이면서, 부모 창이 존재하지 않는 (제일 높은) 창에서 URL을 표시합니다.

문단

문단을 나타냅니다. 브라우저에서는 한 줄 간격으로, 문단을 구분합니다. 단, 여분의 공간이 필요하다면 빈 태그보다는 CSS의 margin을 사용하는 것이 낫습니다.

리스트

HTML CSS JavaScript 아이언맨 캡틴 아메리카 토르 헐크 Java Python GO PHP

는 반드시 이나 또는 내부에 있어야 한다.

은 순서가 없는 리스트이고, 은 순서가 있는 리스트다.

의 속성 value는 해당 목차의 번호를 지정하고

의 속성 start는 해당 리스트가 몇 번부터 시작할지 지정한다.

이미지

이미지를 삽입합니다.

수정 요소

이 내용이 새로 추가 되었습니다. 이 내용이 제거되었습니다.

표현이 , 와 똑같다.

문서에서 새로 추가된 내용이나 삭제된 내용을 나타낼 수 있고 cite, datetime과 같은 속성을 포함한다.

양식

이름을 입력하세요 : e-mail을 입력하세요 :

은 정보 제출을 위한 영역을 나타낸다. 은 사용자 인터페이스의 이름 또는 설명을 붙여줄 수 있고,

은 사용자의 입력을 받을 수 있는 '대화형 컨트롤'인데 HTML에서 가장 복잡한 요소 중 하나라고 한다.

구역

HTML의 구역 Tag Contact me Phone : 1234-5678 E-mail : abcde@abcde

는 웹 페이지 상단의 제목, 타이틀 등을 나타내는데 사용한다.

는 연락처에 대한 정보를 담는데 어떤 형태/정보라도 포함할 수 있다. 다만 연락처가 가리키는 개인/단체의 이름은 필수라고 한다. 어떤 부분을 로 감싸면 글자가 아주 약간 기울어진다.

의 유무에 대해 내부적으로 어떤 차이가 있는지는 아직 잘 모르겠다.

메타데이터

HTML Tag

HTML:5를 입력하면 위의 코드가 자동으로 입력된다. (

는 기계가 식별가능한 메타데이터를 담는다. 내부에 , 등이 있는 걸 볼 수 있다.

는 다른 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.

은 제목 표시줄 또는 탭의 제목(이름)을 입력할 수 있다.

+++ 추가할 태그들

강의를 들으며 가볍게 따라 배울 때만 해도 쉽고 재밌었는데 뭐든 파고들기 시작하면 쉽지 않은 것 같다.

참고자료

https://developer.mozilla.org/ko/docs/Web/HTML

https://blog.acronym.co.kr/358

https://www.advancedwebranking.com/html/

from http://ok-cheese-repository.tistory.com/3 by ccl(A) rewrite - 2021-09-20 18:27:07

Top