네이버클라우드 캠프 5기/학습내용 정리

23. HTML - 텍스트 관련 태그

박세류 2023. 5. 26. 11:08

1. 텍스트 관련 태그

1. 제목을 만들어주는 h1~h6

  1. h1~h6 태그는 제목을 표시하는 태그.
  2. h1이 가장 크고 진하게 표시되고 숫자가 커질수록 크기가 작아지고 연해지게 표시된다. h6가 가장 작으면서 가장 연하게 표시되는 태그.

2. 단락을 만들어 주는 p

  1. 텍스트를 표출할 때 가장 많이 사용되는 태그
  2. 텍스트의 단락을 만들어주는 태그로써 단락은 줄바꿈이 있는 텍스트 덩어리를 의미
  3. </p>를 만나기 전까지의 텍스트는 한 줄로 표시(브라우저 사이즈에 따라 여러줄로 표시).
  4. 블록태그의 속성으로 인해 단락처럼 보임.
  5. 블록태그는 브라우저의 한 줄을 다 차지하기 때문에 옆에 다른 태그가 올 수 없다.

3. 줄 바꿈 태그 br

  1. 텍스트 단락에 엔터값을 아무리 넣어도 한 줄로 표시가 되기 때문에 줄 바꿈을 원할 때는 br태그를 사용한다.

4. 수평줄을 넣어 주는 hr

  1. 텍스트 단라의 주제가 바뀌거나 분위기가 전환될 때 사용되는 가로줄을 표출해주는 태그
  2. 기본 가로줄은 css를 이용해서 스타일을 바꾸거나 삭제도 할 수 있다.

5. 입력한 내용을 그대로 표출하는 pre

  1. 입력한 공백이나 엔터값이 그대로 표출된다.
  2. code, samp 등의 태그들을 이용하여 프로그래밍 코드를 입력할 때 주로 사용.
  3. pre태그와 웹 접근성
    • 시각장애인들을 위한 웹페이지 읽어주는 기계에서 pre태그는 건너뛰기 때문에 img태그와 마찬가지로 대체텍스트를 항상 넣어줘야한다.

6. 텍스트를 굵게 표시하는 b, strong

  1. 경고나 주의사항처럼 중요한 내용은 strong 태그 사용
  2. 키워드처럼 단순한 내용을 굵게 표시할 때는 b 태그 사용

7. 이탤릭체로 표시되는 i, em

  1. 문장의 중요한 부분을 강조할 때는 em을 사용
  2. 키워드를 이탤릭체로 표시할 때는 i를 사용

8. 줄 바꿈없이 영역을 묶어주는 span

  1. span태그는 자체 의미는 가지고 있지 않지만 인라인태그라서 줄바꿈없이 영역을 묶을 수 있다.
  2. 텍스트한정이 아니고 다른 태그들의 영역을 묶을 때도 사용된다.
  3. 영역의 스타일을 별도로 지정할 때 주로 사용한다.
728x90