HTML Tag 를 알아보자
tag
** element **
opening tag + content + closting tag //<p>내용</p>
tag 대소문자 구분하지 않지만 작성시 소문자로 작성하는 것을 권장
** Empty elements **
빈 태그는 내용이 없어 Empty elemnt라 불린다.
해당 태그는 닫는 태그가 없다. 명시적으로 작성할 경우 <br><br/>로 작성한다.
html5 이전 xhtml 당시 빈태그를 작성할 때의 작성법이기에 위 형식을 유지한다.
<br>, <hr>, <img> <meta>, <input> 등이 있다.<h1> ~ <h6>
위 태그를 작성 할 경우 목차를 만들 수 있다
위 태그를 사용 할 경우 역순으로 사용하는 것을 권장하지 않는다
위 태그를 통해 글자 크기를 조절하는 것은 지양하고 css를 통해 조절하는 것을 권장한다
위 태그를 통해 브라우저는 html code를 분석하여 client가 검색 할 때 반영한다<p>
위 태그는 본문에 내용을 입력할 때 쓰는 태그이다
태그와 태그 사이는 개행으로 구분된다
본문과 본문 사이의 간격은 css를 통해 조절하는 것을 권장 <p>로 조절X<br>
Enter 역할을 한다
html code는 Enter가 적용되지 않아 <br>태그를 사용한다.
많은 개행을 통해 여백을 주고 싶을 때에는 <br> 태그를 여러번 사용하는 것이 아니라 css
를 활용하여 문단 간 여백을 주는 것을 권장한다<blockquote></blockquote>
인용 문단을 사용 할 때에 <blockquote> 태그를 사용한다. 들어쓰기가 돼서 렌더링 된다
블록 요소이다
주의할 점으로 <p></p> 안에 <blockquote>를 사용하지 않는다
<q></q>
<q> 또한 <blockquote> 와 같이 인용 할 때 사용한다
들여쓰기가 되지 않고 쌍 따옴표로 인용 구문이 표현이 된다
inline 요소인 점이 위와 다른 점이다.<pre>
미리 서식을 지정한 텍스트를 나타낸다
HTML에 작성한 내용 그대로 표현한다
텍스트는 고정폭 글꼴을 사용에 렌더링 한다
요소 내 공백 문자를 그대로 유지한다.
위와 같은 특징으로 인해 특정 언어의 code를 작성하는데에 유용하다
글꼴을 유지할 수 있고 char의 폭이 일정하기 때문에 유용하다
글꼴의 폭이 일정 하다는 것은 A와 I의 폭이 동일하다는 의미이다<figure>
여러 문단이 있을 때 그 문단이 서로 남남이 아니라는 것을 나타내 주기 위해 <figure>
태그를 감싸서 사용한다.
사용시 blackquote 처럼 들여쓰기가 된다
<figcaption>
위 요소는 부모 <figure>요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타낸다
해당 태그 안에 내용을 쓸 때 내용에 가시적인 변화가 없어 대개 <cite>태그와 같이 사용
함으로써 작성한다<hr>
빈요소이다
오래된 태그이다
가로줄을 그을 때 사용한다
문단과 문단을 나눌 때 사용한다
단독으로 사용 할 경우 모양새가 좋지 않아 css를 통해 스타일링을 한다<abbr>
약어를 사용할 때 사용한다. 모든 태그에서 사용할 수 있는 전역 속성 중 하나인
title을 함께 사용한다.
<abbr title="World Wide Web">WWW</title>
마우스를 갖다 대고 시간이 조금 지나면 WWW 약어에 대한 full name을 볼 수 있다<address>
해당 태그 사용시 태그 안에 있는 내용이 주소를 갖고 있다는 의미를 갖고 있다
위 태그 안에 있는 내용은 크롬에서 이탤릭체로 기울어져 써지는 특징이 있다
이탤릭체를 사용하기 위해 위 태그를 사용하는 것은 권장하지 않는다<cite>
내용의 출처를 밝힐 때 사용하는 태그이다
blackquote 태그 안에 속성으로 사용할 수 있으나 웹 화면에 나타나지는 않는다
figcapion 태그 안에서 출저를 밝힐 때 사용한다.<bdo>
글자의 순서 방향을 설정하는 태그이다
속성 값 dir 을 ltr 으로 설정하면 왼쪽에서 오른쪽으로 내용이 작성되고
속성 값 dir을 rtl으로 설정하면 오른쪽에서 왼쪽으로 내용이 작성된다<b> and <strong>
b 태그와 strong 태그 모두 글씨체를 굵게 만들어 주고 코드를 보지 않으면 어떤
태그를 사용했는지 알지 못한다
둘 간 의미적으로 차이가 있다
b 태그의 경우 제품명, 요약 등에 사용하는데 중요도 보다는 시각적인 면에서 사용자에게 굵게 보여주고 싶을 때 사용한다
strong 태그의 경우 높은 중요도를 가지고 있는 부분에 strong 태그를 사용한다 <i>
기울임 꼴로 텍스트를 표기할 때 사용한다
단순 기울임을 위해 사용하는 태그가 아니다
<b>와 <strong> 태그 같이 i와 em은 다르다
기술용어, 외국어 구절, 등장인물의 생각 등을 표시하고 싶을 때 사용한다.
문장 중 톤이 바뀌는 뉘앙스를 가져다 준다<em>
emphasize라는 뜻이며 i와 같이 이탤릭체로 표시하는 동일한 기능을 하지만
무엇인가를 강조하고 싶을 때 사용하는 태그이다<mark>
하이라이트를 표시해주기 위한 태그이다
blockquote 태그 안에 mark 태그를 넣어 사용하기도 한다
<small>
덧붙이는 글, 저작권이나 법률을 표기하는데 사용되는 태그이다<sup>
위첨자를 나타낼 때 사용한다. 거듭제곱이나 지수를 표현할 때 유용하다
<sub>
아래첨자를 나타낼 때 사용한다. 각주나 화학식 등을 표현할 때 유용하다<del>
무엇인가 삭제된 것이 있을 때 del tag를 사용한다
위 태그를 사용했을 시 del 태그 안에 있는 내용에 취소선이 표시된다
<ins>
무엇인가 첨가한 것이 있다는 것을 나타낼 때 insert tag를 사용한다
위 태그를 사용했을 시 ins 태그 안에 있는 내용에 밑줄이 표시된다
<cite>
optional이며 del태그와 ins태그 안에 cite 태그를 사용했을 시
언제 무엇이 삭제되고 추가되었는지를 표시해주기 위해 사용한다
<datetime>
변경이 발생된 일시를 표현하기 위해 사용되는 태그이다
웹페이지에 나타나지는 않는다. 코드 내에서 정보를 알려준다<code>
pre tag가 block 요소라면 code tag는 inline 요소이다
pre tag와 마찬가지로 고정폭 글꼴을 사용한다.<kbd>
키보드에 있는 키를 표현하고 싶을 때 위 태그의 내용으로 표현하고자 하는 내용을 넣어준다<a>
meaning: anchor
특정한 위치에 닻을 내려서 특정한 링크로 연결해주기 위해 이용하는 태그이다
<a></a>
href(hyper text reference)를 사용하여 URL을 넣어준다
http, https기반 URL일 필요는 없다
a 태그 안 href에 절대경로와 상대경로를 넣어줄 수 있다
<a href="https://www.naver.com">절대경로</a>
상대경로는 현재의 위치(기준)으로 작성해주어야 한다
<a href= "./index.html">상대경로</a>
이메일/전화를 기입해줄 수도 있다. a태그 안에 아래와 같이 작성한다
<a href="mailto:myEmail@naver.com:>email</a>
<a href="010-XXXX-XXXX">phoeneNumber</a><target>
<a href="https://www.naver.com" target="_blank">naver</a>
링크한 url을 어디에 표시할지를 지정해주는 태그이다
기입하지 않을 경우 기본값은 _self이고 현재 창에 새로운 창을 연다는 의미이다
_blank로 설정 할 경우 새 탭에서 브라우저가 열린다는 의미이다Entity
html 예약어를 웹페이지에 표현해주기 위해 사용하는 것이 Entity이다
아래 외적인 특수문자도 Entity를 통해 표현이 가능하다
< // <
> // >
" // "
' // '
& // &
// space
<pre><p></p></pre> // <p></p>
<div>
특정 구역 다른 언어 표현
순수 컨테이너로서 아무 것도 표현하지 않는다.
의미 없는 태그 이므로 전역 속성만 사용 가능
block level로 작동 (가질 수 있는 width의 최대를 가짐 == 부모의 width 값을 가짐)<span>
순수 컨테이너로서 아무 것도 표현하지 않는다
inline level로 작동 (Content 크기 만큼 width를 갖는다)Semantic tag
의미를 가지고 있는 tag를 '시멘틱 태그'라고 한다
semantic tag 사용 이점
검색 엔진이 정보를 분석할 때 중요한 키워드로 간주한다
스크린리더로 페이지 탐색 시 의미론적 마크업을 푯말로 사용할 수 있음<header>
소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다
웹페이지에 하나만 작성하기를 권장한다
페이지 or 글제목을 나타낼 때 header를 사용하기도 함javascript (형 변환)
형변환의 특수 케이스
Number(input) 와 Bool(input) 형변환 중 일반적이지 않은 경우에 대해서 알아보자.
Number(input) 형변환
| Input | return |
|---|---|
| undefined | NaN |
| null | 0 |
| true and false | 1 or 0 |
| string | 문자열의 처음과 끝 공백 제거 후 남아 있는 문자열이 없으면 0, 그렇지 않으면 숫자열을 읽음. 변환 실패시 NaN 반환 |
Bool(input) 형변환
| Input | return |
|---|---|
| 0 | false |
| null | false |
| undefined | false |
| NaN | false |
| "" | false |
| etc | true |
