[HTML] Text-level Tag 모음

1.  <span>

 

- <div>같이 아무 의미 없는 태그이다. 쓸만한 태그가 없을 때 쓰는 최후의 수단.

See the Pen Tag <address> by Hun-Se (@hun-se) on CodePen.

 

2.  <sub>, <sup>

 

화학기호나 수학공식같은 첨자를 이용할때 사용 글자로 특정 글자를  작아지게 하기 위해서는 사용하지 않는다.

- <sub>: 문자 하단에 첨자

- <sup>: 문자 상단에 첨자

See the Pen Tag <span> by Hun-Se (@hun-se) on CodePen.

3.  <abbr>, <dl>, <dt>, <dfn>, <dd>

 

- <abbr> : 준말, 약자를 나타내고 싶을 때 사용하는 태그이다. 속성 값으로 title="원하는 단어"를 사용하고, 해당 태그로 감싸면 문자 하단에 점선이 생기고 그곳에 커서를 올려두면 title에 써놓은 단어가 표시된다. 보통 단독으로 쓰이지만, <dfn> 태그에도 사용된다.

 

- <dfn>: 현재 문맥에서 정의하고 있는 용어를 나타낸다. dfn의 가장 가까운 부모가 <p> 혹은 <dt><dd> 쌍, <section> 요소일 경우 그 콘텐츠를 dfn의 정의에 대한 설명으로 간주합니다. 문서에서 최초로 나타났을 때 사용합니다.

 

See the Pen Tag <span> by Hun-Se (@hun-se) on CodePen.

 

4.  <a>

- 하이퍼링크를 걸어 줄 수 있는 태그로, href = "https://naver.com"과 같이 속성 값을 지정해줘서 특정 사이트로 이동해 줄 수 있다.

- href = "index.html"과 같이 원하는 페이지로도 이동할 수 있게 할 수 있다.

- 속성 값으로target="_blank"을 입력하면 현재 탭이 아닌 새로운 탭으로 랜더링 해준다.

- 속성 값으로  href="#id"을 입력하면 해쉬 태그 페이지 내의 태그로 이동할 수 있다. 이때 이동하고 싶은 태그에는 id 값을 입력해 주어야 한다.

- 속성 값으로 download="a.pdf"를 입력하면 해당 하이퍼텍스트를 클릭했을 때 a라는 이름의 pdf파일을 다운로드할 수 있다.(다른 확장자를 가진 파일도 다운로드 가능하다) / href에 원하는 페이지 입력 후 download만 입력하면 입력한 링크의 페이지를 다운로드 가능하다.

 

See the Pen Tag <span> by Hun-Se (@hun-se) on CodePen.

 

 

5. <strong>, <b>

- <strong>: 폰트 굵기를 굵게 하고 강조해준다.

- strong 태그는 중첩은 잘 사용하지 않는다.

- <b>: 굵은 글씨로 표현해준다. 둘 다 잘 쓰이지 않는 코드이다.

 

 

See the Pen Tag <span> by Hun-Se (@hun-se) on CodePen.

 

6. <br>, <wbr>

- <br>: 줄 바꿈 해주는 태그이다.

- <wbr>: 글이 한 줄로 표시가 안될 때 줄 넘김을 해준다.

- <wbr>태그는 한글에 사용할 때는 랜더링 차이로 style="word-break: keep-all;”으로 css 설정해주면 영어처럼 단어로 줄바꿈이 된다.

 

See the Pen Tag <strong>,<b> by Hun-Se (@hun-se) on CodePen.

 

+ white-space를 이용한 줄 바꿈 공백 처리하기

 

css를 이용하여 줄 바꿈에 대한 공백 처리를 다양하게 설정할 수 있다.

- normal: 연속 공백을 하나로 합친다. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.(초기값)

 

- nowrap: 연속 공백을 하나로 합침. 줄 바꿈은 <br> 요소에서만 일어난다.

 

- pre: 연속 공백 유지한다. 줄 바꿈은 개행 문자와 <br> 요소에서만 일어난다.

 

- pre-wrap: 연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.

 

 

- pre-line: 연속 공백을 하나로 합친다. 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.

 

- break-spaces: 다음 차이점을 제외하면 pre-wrap과 동일하다.

• 연속 공백이 줄의 끝에 위치하더라도 공간을 차지한다.
• 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있다.
• 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(min-content, max-content)에 영향을 준다.

 

참고사이트: https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN