[ITWILL : WEB]`<pre>`태그, html특수문자입력, `<b>태그` 와 `<strong>태그`의 차이점

ITWILL학원 : 1강 WEB(HTML, CSS) BY 김영희

1강 HTML 기초

WEB(HTML, CSS)을 담당하며 일주일에 1번 4시간 수업

HTML은 웹페이지를 만들어 주는 프로그래밍 언어이며 웹페이지의 구조를 담당한다
enter나 space bar(2칸 이상)는 명령으로 해결한다.

1. tag는 원칙상 대소문자의 구별이 없으나 소문자로 입력한다

2. !DOCTYPE html의 의미는 html5 문서임을 선언

3. <pre>태그

<pre>태그는 html문서안에서 <p>나 <br>를 쓰지않아도 html상의 Enter나 Tab, Space를 다 표현할 수 있기때문에 긴 문장등을 표현할때 굉장히 효율적으로 사용할 수 있다.
더불어서 자동적으로 모든 문자의 width 간격을 일치시켜준다
ex) i와 w의 크기가 같다

만날 수 없어
만나고 싶은데
이런 슬픔처음인걸

말할 수 없어
말하고 싶은데
속마음만 들키는 걸

위 내용을 html상에 적고 브라우저로 열어보면

만날 수 없어만나고 싶은데이런 슬픔처음인걸말할 수 없어말하고 싶은데속마음만 들키는 걸

우리가 원하는 건 이게 아니다!
<p>와<br>태그를 이용할 수 있으나 여간 귀찮은 일이아니다.
이때 사용하는 것이 <pre>태그이다

<pre>
만날 수 없어
만나고 싶은데
이런 슬픔처음인걸

말할 수 없어
말하고 싶은데
속마음만 들키는 걸
</pre>
``` 

위의 내용을 출력하면 아래와 같이 편~안하게 우리가 원하는대로 나타낼 수 있다

```html
만날 수 없어
만나고 싶은데
이런 슬픔처음인걸

말할 수 없어
말하고 싶은데
속마음만 들키는 걸

4. 특수문자(기호태그)

특수문자(기호)표현을 위한 특수문자 태그들.

• <는 < 를 나타내고 >는 > 를 나타낸다.
  위의 태그들을 사용하면 html이 자신의 태그로 인식하지않고 특수문자로 인식해서 그대로 표현해준다

이것은 <br> 태그입니다
이것은 &lt;br&gt; 태그입니다

각 두 줄의 코드를 동일한 값이 나오길 기대하며 브라우저 출력물해보자
아래와 같이 표시된다

이것은 
태그입니다이것은 <br>태그입니다

띠용~ 그래서 이럴때 특수문자를 사용해준다

자주 사용하는 특수문자는 result 1번부터 5번까지는 기본으로 암기해야한다

이것은 <br> 태그입니다

// 출력물은 아래와 같다

이것은 <br>태그입니다

•  는 space bar를 넣는 태그이고 자주 사용 하지만 css를 사용하면 굳이 사용할 필요없기도 한 모호한 녀석이다.

• &#9977를 하면 운동하는 사람 아이콘이 나온다. 컬러풀하고 귀여운 symbols를 확인하고 사용할 수 있다

• &는 &를 나타낸다

운동하는 사람 &#9977이  &#9748가 와서 운동을 그만하고  &#9749를 마셨다

출력값은 아래 이미지처럼 짜잔!

5. <b>태그 와 <strong>태그의 차이점

• b태그 : 단순히 굵게 표시

• strong태그 : 굵게와 중요한 내용이라는 표시가 내포되고있고 더불어 스크린 리더를 사용하는 경우, 음성으로도 강조해서 알려주니까 b태그보단 strong태그 이용할 것.

이와 동일하게 작용하는 것이 기울임태그이다

• i태그는 단순히 기울이게 표시
• em태그는 기울임과 강조하는 애용이라는 표시가 내포되어있고 더불어 스크린 리더를 이용할 경우, 음성으로 강조해서 알려준다.

참고링크

6. <center>태그는 더이상 사용하지않으며 대신 CSS로 text-align:center를 이용한다

7 .<hr>태그는 구분선을 그어준다