HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display속성을 가진다.
대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 중 하나를 가지게 된다.
1.블록(block)
2.인라인(inline)
블록(block)타입의 요소
display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며,
해당 라인의 모든 너비를 차지한다.
1
2
3
4
5
|
<p style="border: 3px solid red">
p요소는 display 속성값이 블록인 요소입니다.
</p>
|
cs |
display 속성값이 블록(block)인 대표적인 요소
: <p> , <div> , <h> , <ul> , <ol> , <form>
<div> 요소
<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block)요소.
주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다.
1
2
3
4
5
6
7
8
9
|
<div style="background-color:lightgrey; color:green; text-align:center">
<h1>div요소를 이용한 스타일 적용</h1>
<p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
한 번에 스타일을 적용할 수 있습니다.</p>
</div>
|
cs |
인라인(inline)타입의 요소
display 속성값이 인라인(inline)인 요소는 새로운 라인에서 시작하지 않는다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지한다.
1
2
3
4
5
|
<p>
<span style="background-color:grey; color:orange">span요소</span>는 display 속성값이 인라인인 요소
</p>
|
cs |
display 속성값이 인라인(inline)인 대표적인 요소
: <span> , <a> , <img>
<span>요소
<span>요소는 텍스트의 특정 부분을 묶는 데 자주 사용되는 인라인(inline)요소
<span>요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용된다.
1
2
3
4
5
|
<p>이렇게
<span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.</p>
|
cs |
'HTML' 카테고리의 다른 글
HTML input 요소 (0) | 2020.04.06 |
---|---|
HTML iframe요소 (0) | 2020.04.05 |
HTML 리스트,테이블 (0) | 2020.04.05 |
HTML 링크 , 이미지 (0) | 2020.04.04 |
HTML 스타일(색,글꼴,배경) (0) | 2020.04.03 |