css div와 span의 차이점은?
div와 span css 설정을 통해서 서로의 기능을 변경하는 방법도 있습니다.
하지만
처음 왜? 만들어 졌는지 알고 사용하는것이 중요합니다.
예전에 table를 통해서 와꾸(레이아웃)을 잡아 주었다가 변경 된것 처럼.
그럼 table이 없어졌나요? 그렇지 않습니다. 본래의 용도가 아니기 때문에 사용하지 않는것입니다.
span과 div도 그렇습니다.
span은 inline이고 div은 블럭 입니다.
보통 이렇게 말하는 경우가 많은데요.
더 쉽게 span과 div를 간단하게 표현하면 아래와 같습니다.
div는 세로 레이아웃을 위해서
span은 가로 레이아웃을 위해서 만들어진 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
.box1px {
border: solid 1px red;
text-align: center;
min-height: 100px;
}
.box1px_blue {
border: solid 1px blue;
}
</style>
</head>
<body>
<div class="box1px">
div는 block 입니다. - 세로
</div>
<div class="box1px">
div는 block 입니다. - 세로를 위해서 만들어졌습니다.
</div>
<div class="box1px">
<span>
span은 기본적으로 inline 입니다. - 가로
</span>
<span class="box1px_blue">가로2입니다.</span><span class="box1px_blue">가로3입니다.</span>
</div>
</body>
</html>
[ div와 span의 차이]