다연이네

[days02] 블럭 요소와 인라인 요소 본문

Web/HTML

[days02] 블럭 요소와 인라인 요소

　다연　 2020. 12. 1. 23:34
반응형

html 모든 요소는 요소 유형에 따라 블록/인라인 모드를 가진 요소로 나뉜다. 
블럭 요소 ? 항상 새로운 줄에 시작, div태그  (앞뒤로 줄바꿈 됨)
인라인 요소 ? 새 줄에서 시작하지 않고 필요한 너비 만큼만 차지한다. span태그 (앞뒤로 줄바꿈되지 않음)

 

display: inline-block ? 요소는 inline인데 내부는 block처럼 표시 (박스 모양이 inline처럼 옆으로 늘어섬)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
div{
	border: 1px solid gray;
	width: 200px;
}

span{
	border: 1px solid green;
	
	display: inline-block; /* 인라인모드+블럭모드로 해야 200px가 먹힌다 */
	width: 200px; /* 인라인모드라면 200px잡아도 해당 글자수 너비만큼만 잡힌다. */
}
</style>
</head>
<body>
<h3>html 블럭 요소와 인라인 요소</h3>
<pre>
html 모든 요소는 요소 유형에 따라 블록/인라인 모드를 가진 요소로 나뉜다. 
블럭 요소 ? 항상 새로운 줄에 시작 
인라인 요소 ? 새 줄에서 시작하지 않고 필요한 너비 만큼만 차지한다.
</pre>


<!-- span 태그 = 인라인모드, 텍스트 또는 문서의 일부분을 표시하는데 사용되는 컨테이너 -->
<span>홍길동1</span>
<span>홍길동2</span>
<span>홍길동3</span>

<hr>

<!-- div 태그 = 블럭모드, 다른 html요소에 대한 컨테이너로 사용된다. 레이아웃 사용 -->
<div>홍길동1</div>
<div>홍길동2</div>
<div>홍길동3</div>



</body>
</html>

 

반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days03] emmit 설치  (0) 2020.12.02
[days02] 테이블 - 셀 병합, 체크할 수 있는 표 만들기  (0) 2020.12.02
[days02] 간단한 페이지 만들기+반응형 웹  (0) 2020.12.01
[days02] HTML 목록  (0) 2020.12.01
[days02] picture 태그  (0) 2020.12.01
'Web/HTML' Related Articles more
Comments