헤더
headheadhead 박스(구역) 구분 태그
boxboxboxboxbox
박스(구역">
헤더
headheadhead 박스(구역) 구분 태그
boxboxboxboxbox
박스(구역">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href = "5.css_divspan.css" rel ="stylesheet">
</head>
<body>
<!--
layout : 특정 공간안에서 효과적으로 배치
<div> : division
1. 한줄 차지 적용 [같은 줄에 다른 요소 배치 X]
2. display : block
<span> :
1. 같은 줄에 적용
2. display : inline
display 속성 [같은 줄에 다른 요소 배치 O] -> 기본값은 바꿀 수 있다!
display : none 표시X -> 화면에 안나옴
display : block 한줄 차지 [width, height 적용 O] -> 해당 줄에 다른 요소가 들어갈 수 없게 하는 것
-> 기본으로 사용하는 태그들 : div, h1, p, ul, li, ol 등
display : inline 같은 줄에 적용 [width, height 적용 X] -> 해당 줄에 다른 요소가 들어갈 수 있음
-> 기본으로 사용하는 태그들 : span, a
display : inlien-block inline + block -> 해당 줄에 다른 요소가 들어갈 수 있으면서 width, height 적용 가능
-> 기본으로 사용하는 태그들 : button, input, select 등
태그들의 display 기본 값은 바꿀 수 있다.
-->
<h3>헤더</h3> headheadhead
<div> 박스(구역) 구분 태그 </div> boxboxboxboxbox
<span> 박스(구역) 구분 태그 </span> boxboxboxboxbox
<!-- 1. div안에 span inline(기본 값) 있는 경우-->
<div>글자1 <span class = "s1">안녕하세요.</span> 글자2</div>
<!-- 2. div안에 span block 있는 경우-->
<div>글자1 <span class = "s2">안녕하세요.</span> 글자2</div>
<!-- 3. div안에 span inlien-block 있는 경우-->
<div>글자1 <span class = "s3">안녕하세요.</span> 글자2</div>
<!-- 4. div안에 span none 있는 경우 -->
<div>글자1 <span class = "s4">안녕하세요.</span> 글자2</div>
<!-- 1. div inline인 경우 -->
글자1 <div class = "d1"> 안녕하세요. </div> 글자2
<!-- 2. div block인 경우 -->
글자1 <div class = "d2"> 안녕하세요. </div> 글자2
<!-- 3. div inline-block인 경우 -->
글자1 <div class = "d3"> 안녕하세요. </div> 글자2
<!-- 4. div none인 경우 -->
글자1 <div class = "d4"> 안녕하세요. </div> 글자2
</body>
</html>
@charset "UTF-8";
div{
border : solid 1px red;
margin : 20px;
}
span{
border : solid 1px orange;
}
.s1{ /* s1이라는 클래스에 적용 */
display : inline;
width : 200px;
height : 100px;
}
.s2{
display : block;
width : 200px;
height : 100px;
}
.s3{
display: inline-block;
width :200px;
height: 100px
}
.s4{
display : none;
width :200px;
height: 100px
}
.d1{
display: inline;
width :200px;
height: 100px
}
.d2{
display: block;
width :200px;
height: 100px
}
.d3{
display: inline-block;
width :200px;
height: 100px
}
.d4{
display: none;
width :200px;
height: 100px
}
