반응형
Block element
1. h1 , ol , ul ,div , p 같이 display : block 속성을 가진 태그들은
화면 구성이나 , 레이아웃을 구성할때 사용한다 .
2. 블록 속성은 한칸을 모두 차기하기때문에 세로로 나열된다 .
3. width, height , margin 속성을 사용할수있다
Inline element
a, em , img ,span 같은 display : inline 속성을 가진 태그들은 콘텐츠를 구성하는 공간만 차지합니다.
1. 가로로 나열된다
2. line-height 을 사용할 수 있다 , text-align을 사용할 수 없다 .
3. width , height 속성을 사용할 수 없다
같은 문장을
div 와 span 으로 감싼 코드를 작성하고 , 화면을 실행해보면
별 차이없어 보이는데
배경색을 넣어주면
div 로 감싼 영역은 컨텐츠가 끝나도 , 배경색이 있고
span 으로 감싼 영역은 컨텐츠가 끝난곳부터 끝까지 배경색이 없는것을 확인 할수있다
이로써 div 는 가로 영역을 다 차지해서 옆으로 들어갈 자리가없어서 세로로 배치됨을 알수있다
이번에는 가로 , 세로 border 속성을 추가하는 코드를 만들어보았다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
background: yellow;
width: 100px;
height: 100px;
border: 1px solid;
}
span {
background: pink;
width: 100px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<span>a</span>
<span>b</span>
<span>b</span>
</body>
</html>
이 이미지를 확인 해봤을때
블록 속성을 가진 div 태그에는 가로 세로 값이 적용된것을 볼수있고
인라인 속성을 가진 span 태그에는 가로 세로 값이 적용 안된것을 볼수있다
반응형
댓글