TIL 21.08.29 HTML and JavaScript

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:[email protected]:>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를 통해 표현이 가능하다

&lt; // <
&gt; // > 
&quot; // "
&apos; // '
&amp; // &
&nbsp; // space

<pre>&lt;p&gt;&lt;/p&gt;</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) 형변환

Bool(input) 형변환