[비전공 개발자 훈 #3] ★p, div, span, output, fieldset★

개발자 훈·2022년 2월 19일
0

html

목록 보기
3/3

p: paragraph. 단락과 절을 설정해주는 태그이다

<p>용기가 그들의 불어 꽃이 있는가?</p>

p 태그의 응용방법(style 태그와 같이 쓸 수 있다)

<p style='background:#00ff66'>가나다라마바사</p>
<p style='background-color:#00ffff'>가나다라마바사</p>

div : html문서 분할, 레이아웃 계층 나누기 용도

<div>1. 용기가 그들의 불어 꽃이 있는가?</div>

div 태그의 응용방법(style 태그와 같이 쓸 수 있다)

코드<div style='background:#00ff66'>가나다라마바사</div>
<div style='background-color:#00ffff'>가나다라마바사</div>를 입력하세요

span : 특별한 기능은 없다

<div>1. 용기가 그들의 불어 꽃이 있는가?</div>

span 태그의 응용방법(style 태그와 같이 쓸 수 있다)

<span style='background:#00ff66'>가나다라마바사</span>
<span style='background:#00ffff'>가나다라마바사</span>

p, div, span의 공통점과 차이점과 특징

  1. p, div의 display 속성은 블록(block)요소이다. 줄바꿈이 가능하고
    태그의 영역이 브라우저 양끝을 모두 차지한다

  2. span 태그의 display 속성은 인라인(inline)요소이다. 줄바꿈이 불가능하다. 태그 안에 적힌 문자 정보의 길이만큼만 영역을 차지한다

  3. span은 div, p를 포함할 수 없다

  4. p는 div를 포함할 수 없다

  5. div는 p를 포함할 수 있다

profile
비전공 32살에 시작하는 나의 일기

0개의 댓글