<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 에 대해서 알아봅니다.</title>
</head>
<body>
<h1>block 방식 - 세로로 떨어지는 방식</h1>
<h1>h1은 display의 기본값은 block 방식이다.</h1>
<h2>h2은 display의 기본값은 block 방식이다.</h2>
<h3>h3은 display의 기본값은 block 방식이다.</h3>
<h4>h4은 display의 기본값은 block 방식이다.</h4>
<h5>h5은 display의 기본값은 block 방식이다.</h5>
<h6>h6은 display의 기본값은 block 방식이다.</h6><h1> ~ <h6> 의 기본값은 아래로 떨어지는 block 방식이다.
<br><br><br><br><br><br> <!-- 줄바꿈 --><br> 은 줄바꿈
<div>div는 display가 block 방식이다.</div>
<div>div는 display가 block 방식이다.</div><div> 의 기본값은 아래로 떨어지는 block 방식이다.
<hr style="border: solid 1px yellow; height: 10px; background-color: yellow;"> <!-- 수평선 -->수평선 삽입
<label>레이블1 label 태그는 display가 inline 방식이다.</label>
<label>레이블2 label 태그는 display가 inline 방식이다.</label>
<label>레이블3 label 태그는 display가 inline 방식이다.</label><label> 의 기본값은 옆으로 이어지는 inline 방식이다.
<div>
inline 방식의 태그는 <label>, <a>, <span> 이 있다.
<!--
< 부등호(<) less than
> 부등호(>) greater than
" " 공백(스페이스)1개를 의미한다.
& 앰퍼샌드(&)기호
" 쌍따옴표(")
' 홑따옴표(')
# sharp(#)
-->
JSP&Servlet, "oracle", he's
<br> <!-- 줄바꿈 -->
<a href="http://www.naver.com">네이버</a>
<a href="http://www.daum.net">다음</a>
<a href="http://www.nate.com">네이트</a>href 링크 삽입
<span>스팬1 span 태그는 display가 inline 방식이다.</span>
<span>스팬2 span 태그는 display가 inline 방식이다.</span>
<span>스팬3 span 태그는 display가 inline 방식이다.</span><span> 의 기본값은 옆으로 이어지는 inline 방식이다.
<div style="border: solid 1px red; width:500px; height: 300px; ">DIV 1 블럭요소(block element)은 width 및 height 가 적용된다.</div>
<div style="border: solid 1px blue; width:50%; height: 500px; ">DIV 2 블럭요소(block element)은 width 및 height 가 적용된다.</div>DIV 블럭요소(block element)은 width 및 height 가 적용된다.
<br><br>
<span style="border: solid 1px red; height: 300px; ">span 1 인라인요소(inline element)은 width 및 height 가 적용이 안된다.</span>
<span style="border: solid 1px blue; height: 500px; ">span 2 인라인요소(inline element)은 width 및 height 가 적용이 안된다.</span>span 인라인요소(inline element)은 width 및 height 가 적용이 안된다.
그러나 inline element인 span 태그를 block 방식으로 변경하면 세로형태로 보여줄 수 있다.
<span style="display:block; border: solid 1px yellow; ">짜장면2</span>
<span style="display:block; border: solid 1px yellow; ">탕수육2</span>
<span style="display:block; border: solid 1px yellow; ">팔보채2</span>
<!-- inline element인 span 태그를 block 방식으로 변경함. 세로형태로 보여주는 것이다.
block 방식의 width 크기를 설정해주지 않으면 기본 width 크기는 화면 전체로 잡힌다. -->
또한 inline element인 span 태그를 display를 inline-block 방식으로 변경하면 가로형태로 보여주면서 width 및 height 를 부여할 수 있게 된다.
<span style="display:inline-block; border: solid 1px green; width: 150px; height: 100px">짜장면3</span>
<span style="display:inline-block; border: solid 1px green; width: 150px; height: 100px">탕수육3</span>
<span style="display:inline-block; border: solid 1px green; width: 150px; height: 100px">팔보채3</span>
<!-- inline element인 span 태그를 display를 inline-block 방식으로 변경함. 가로형태로 보여주면서 width 및 height 를 부여할 수 있게 된다. -->
</body>
</html>끝
'HTML,CSS' 카테고리의 다른 글
| ch02 _3 (0) | 2022.07.31 |
|---|---|
| ch02 - display (0) | 2022.07.31 |
| ch01 (0) | 2022.07.31 |