<pre>, <span>,<hn>,<p>,<br태그

Seulyi Yoo·2022년 6월 29일
0

html, css grammer

목록 보기
1/27
post-thumbnail

<pre>태그

-Preformat

기본형 <pre>텍스트</pre>

  • HTML에서 엔터(Enter), 탭(Tab), 스페이스바(Space)를 써도 Pre를 사용하지 않는 다면 무조건 공백 하나로 인식 소스에 표시한 공백이 브라우저에 그대로 표시됨
  • 웹접근성 고려: 웹문서를 소리로 읽어주는 기계나 점자로 표시해주는 기계는 <pre>태그가 적용된 부분을 만나면 건너뛰어 버리기 때문에 그 부분의 내용을 알 수 있도록 대체 텍스트를 추가하는 것이 좋음.

<span>태그

-텍스트를 한 줄로 표시하는 태그

기본형 <span>내용</span>

  • 단락 안에서 줄 바꿈 없이 일부만 묶어 스타일을 적용할 때 사용

    <span><div>의 차이
    <span> : 한 태그를 나눠 여러 css를 적용하는 태그 (inline tag), 너비나 높이 조절이 불가능.
    <div> : 여러 태그를 묶어 css를 한 번에 적용하는 태그(block tag), 너비나 높이 조절이 가능.

<span>의 기본 속성

titledesc
display디스플레이 요소 변경
width가로 크기 지정
height세로 크기 지정
background-color배경색 지정
color글자색 지정
font-style글자 폰트 지정
margin외부 공백 크기 설정
padding내부 공백 크기 설정
border테두리 설정

<hn>태그

-제목 태그

기본형 <hn>내용</hn>

일반 텍스트 보다 굵고 진하게 표시
Heading의 줄임말인 "h"와 제목의 크기를 나타내는 숫자 1~6까지 사용
<h1> ~ <h6> 까지 표현하며, 숫자가 작을수록 텍스트의 크기가 큼.

<p>태그

-Paragraph

기본형 <p>텍스트</p>

텍스트의 단락을 만듦
<p> 태그와</p> 태그 사이에 위치하는 내용이 하나의 문단을 구성
텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 자동으로 줄 바꿈


<br>태그

-Break

기본형 <br>
닫는 태그 없음

웹브라우저 창에서 줄 바꿈 하려면 줄 바꿈할 위치에 <br>태그 사용

profile
성장하는 개발자 유슬이 입니다!

0개의 댓글