Text-level semantics

📍<br>, <wbr> 태그

• 줄바꿈 태그
• 기본적으로 코드는 공백 병합의 특징을 갖는다 -> 아무리 엔터, 스페이스를 눌러서 공간을 만들어도 적용이 안됨

1. <br> 태그 특징

• semantic한 태그 X
• 오직 줄바꿈을 위한 태그

2. <wbr> 태그 특징

• 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 태그
• 화면의 끝과 화이트 스페이스(띄어쓰기, 공백)가 만났을 때 공백을 어떻게 처리할 지 지정할 수 있음

Style 종류	설명
white-space:nowrap	끊기지 않고 화면 밖을 뚫고 나감
white-space:normal	화면 끝을 만나면 다음 줄로 바꿔줌
work-break: keep-all	단어 단위로 떨어지게 함

(1). white-space: nowrap

<p style="white-space: nowrap;">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos sint qui est quidem esse non vitae molestias
        excepturi iure voluptate accusantium facere omnis, exercitationem praesentium unde ducimus debitis? Unde,
        suscipit!

    </p>

줄이 안끊기고 화면 밖으로 뚫고 나간 것을 확인할 수 있다.

(2). white-space : normal & word-break : keep-all

<p style="word-break: keep-all;">
        1. 동해물과 백두산이 마르고 닳도록
        하느님이 보우하사 우리나라 만세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

        2. 남산 위에 저 소나무 철갑을 두른 듯
        바람 서리 불변함은 우리 기상일세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

        3. 가을 하늘 공활한데 높고 구름 없이
        밝은 달은 우리 가슴 일편단심일세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

        4. 이 기상과 이 맘으로 충성을 다하여
        괴로우나 즐거우나 나라 사랑하세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

    </p>

    <p style="white-space: normal;">
        1. 동해물과 백두산이 마르고 닳도록
        하느님이 보우하사 우리나라 만세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

        2. 남산 위에 저 소나무 철갑을 두른 듯
        바람 서리 불변함은 우리 기상일세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

        3. 가을 하늘 공활한데 높고 구름 없이
        밝은 달은 우리 가슴 일편단심일세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

        4. 이 기상과 이 맘으로 충성을 다하여
        괴로우나 즐거우나 나라 사랑하세
        무궁화 삼천리 화려 강산
        대한 사람 대한으로 길이 보전하세

    </p>

white-space : normal : 화면 끝을 만나면 다음 줄로 바꾸어 주는 기능
work-break : keep-all : 단어 단위로 떨어져 다음 줄로 바꾸어 주는 기능

영어 단어일 때는 두가지 태그가 거의 차이가 없다. 하지만, 한글에 사용하게 되면 그 차이는 매우 크다. white-space : normal을 사용하게 되면 위 사진과 같이 소나무 철갑을 두른 듯~ 이 부분에서 소(다음 줄)나무 이렇게 단어 하나가 잘리게 된다.

이와 같은 현상이 발생하게 되는 이유는 영어 같은 문자는 한 단어를 기준으로 떨어지게 되어있는데, 한글은 한 문자를 기준으로 떨어진다.(한글 뿐만 아니라 한자, 히라가나 등도 마찬가지 이다.)
.
이렇게 된다면 내용이 달라지는 것은 아니니 큰 위험 요소는 아니지만, 사용하는 사람들 입장에서 단어가 쪼개지면 읽기에 불편하다. 사용성을 고려하는 프론트엔드 개발자라면 이런 사소한 부분도 꼭 신경써서 코딩을 해야겠다는 생각이 든다.

한글 content로 긴 글이 담길 경우에 문단의 스타일로 work-break : keep-all 를 주는 것을 잊지말자!

📍<a href="경로"> 태그

• a 요소는 HTML의 핵심적인 요소로써 하이퍼 텍스트 즉, 링크를 만들 때 사용한다.
• html 문법상 sections, grouping content 요소들은 텍스트 레벨 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 sections, grouping content 요소를 자식으로 하는 것이 허용된다.

<a href="https://www.naver.com">click</a>
<a href="https://www.naver.com" target="_blank">click</a>  
<a href="./index.html">click</a>
<a href="#three">click</a> <!-- 해쉬 링크 -->
<a href="./index.html" download>click</a>
<a href="./hello.hwp">hwp click</a>
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
<a href="./hello.pdf">pdf click</a>
<a href="./hello.pdf" download="a.pdf">pdf download click</a>

다양한 a 태그의 활용

• blank는 새로운 창을 열어서 다음 링크로 이동하게끔 하는 요소이다.
• download는 클릭시 지정한 파일을 다운받을 수 있도록 하는 요소이다.

<a href="#one">click</a>
        <a href="#two">click</a>
        <a href="#three">click</a>

        <section id="one" style="height:600px">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsam eius aut voluptatibus eligendi ex
            consequatur debitis, eveniet, nihil reiciendis distinctio hic explicabo cum accusantium esse deserunt
            perferendis totam molestiae.
        </section>
        <section id="two" style="height:600px">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsam eius aut voluptatibus eligendi ex
            consequatur debitis, eveniet, nihil reiciendis distinctio hic explicabo cum accusantium esse deserunt
            perferendis totam molestiae.
        </section>
        <section id="three" style="height:600px">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ipsam eius aut voluptatibus eligendi ex
            consequatur debitis, eveniet, nihil reiciendis distinctio hic explicabo cum accusantium esse deserunt
            perferendis totam molestiae.
        </section>

• 페이지 안에서의 이동은 해쉬링크를 이용한다.
• javascript를 이용해서도 위와 같은 기능을 구현할 수 있다.

text-level 글씨 만큼만 창을 차지하고 있음
grouping-content 한 줄 자체를 차지하고 있음
❗inline 요소와 block level 요소 라고 함

📍<b> 태그, <strong> 태그

1. <br> 태그 특징

• 굵은 글씨 표현할 때 사용
• 의미는 없고 스타일의 변화를 줄 수 있음 → CSS가 나오기 전에 탄생한 코드

2. <strong> 태그 특징

• 굵은 글씨 표현하고 중요도를 더함
• 중첩 하지 않음
• strong 과 b 태그의 디자인적 차이는 없음. b는 의미 없지만 strong은 강조의 의미를 가짐

📍<i> 태그, <em> 태그

1. <i> 태그 특징

• 기울임 글꼴을 나타낼 때 사용
• CSS가 없었던 시절 스타일 주기 위한 태그

2. <em> 태그 특징

• 기울임 글꼴 표현되지만 강조의 의미가 있음
• emphasize 약자

📍<dfn> 태그

• 현재 문맥에서 정의하고 있는 용어

📍<abbr> 태그

• 약자를 나타내고 싶을 때 사용

📍<sup>, <sub> 태그

• <sup> 태그는 윗첨자
• <sub> 태그는 아랫첨자
• 화학 기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용

<p>H<sub>2</sub>0</p>
<p>x<sup>2</sup>=4</p>

📍<span> 태그

• 별다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도
• 여러 요소를 묶어 컨트롤하기 위한 영억으로 id를 주거나 클래스를 사용하기도 함
• div와 마찬가지로 최후 수단으로 사용