html, css

[html/css] div와 span의 차이

상똥프 2023. 10. 15. 14:24

div는 가능한 모든 가로 면적을 100%활용하는 반면,

span은 최소한의 필요한 면적만 차지한다.

 

예시를 들어 확인해보면

width값을 지정하지 않았을 때, div와 span은 아래와 같이 나타난다.

코드(접은 글)

더보기

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<div clsaa="box">div</div>
    <span class="box">span</span>
</body>
</html>

css

.box{
    /*design*/
    background-color: pink;
}
div span

 

div는 알아서 자리를 채워줘야 할 때 유용하고

span은 내용에 적합한 자리만 필요할 때 유용할 것이다