p, span, em, strong
예제 코드
<p>텍스트 태그</p>
<span>텍스트</span>
<span>태그</span>
<p><b>텍스트 태그</b></p>
<p><strong>텍스트</strong> 태그</p>
<p>텍<i>스</i>트 <em>태그</em></p>실행 결과
- p (paragraph) : 하나의 문단을 만드는 태그이다.
- span (폭, 범위) : lnline text container 이다.
- p와 span의 차이
p는 블록 레벨 태그, 문단을 나누는 태그이고 span은 인라인 레벨 태그이다.
p는 자동 줄바꿈, span은 줄이 바뀌지 않고, 자신에게 주어진 영역만 사용한다. - i와 em의 차이
화면에 표시되는 결과는 같지만,
em은 브라우저에 강조한다는 정보를 전달하고, 이로 인해 화면 낭독기에서 강조를 읽어들일 수 있다. - b와 strong의 차이
위와 마찬가지이다. 화면은 같지만,
storng은 브라우저에 중요, 긴급이라는 정보를 전달한다. 화면 낭독기에서도 읽어들일 수 있다. - 블록 레벨 요소
혼자 한 줄을 차지하는 요소이다.
ex) div, p - 인라인 레벨 요소
줄을 차지하지 않는 요소이다. 화면에 표시되는 만큼만 영역을 차지한다.
ex) img, strong
-> 현재는 em과 strong을 많이 쓰는 추세이다.
h 태그 (제목 태그)
예제 코드
<h1>h1 tag</h1>
<h2>h2 tag</h2>
<h3>h3 tag</h3>
<h4>h4 tag</h4>
<h5>h5 tag</h5>
<h6>h6 tag</h6>실행 결과
- h1~h6까지 있다.
br
예제 코드
<span>줄바꿈 <br>예시</span>실행 결과
줄바꿈
예시
- br : 줄바꿈 태그이다.
blockquote
예제 코드
<blockquote>인용문</blockquote>실행 결과
인용문
- blockquote : 인용문으로 표시하는 태그이다.
위 코드를 html로 작성해보았다. 마크다운과 혼용은 안 되는 것 같다.
안녕하세요.