CSS 요소의 넓이(Width)/높이(height)

CSS 요소의 넓이(Width)/높이(height)

CSS Width / Height

  • 입력한 요소의 넓이(Width)와 높이(Height)를 설정할 수 있다.

Width/Height의 기본표기

Width : 크기;
Height : 크기;


#. 넓이(Width).높이(Height).

넓이(Width)속성은 요소의 넓이를 설정할 수 있도록 한다.
인라인 요소는 높이/넓이를 설정할 수 없다.

#.Width 예제 1.

<style>
.divWidth{
   background:pink;
   Width: 200px;
   height: 200px;
}
.spanWidth{
   background:tomato;
   width: 200px;
   height: 200px;
}
</style>
<div class="divWidth">Hello Div!</div>
<span class="spanWidth">Hello Span!</span>

📍출력물

Hello Div!

Hello Span!

⭐️위에서 언급한데로 div블록요소로 넓이/높이 모두 적용이 가능하나,
span인라인요소로서 넓이/높이 모두 설정이 불가능하다.

🌟 CSS의 기초적인 것부터 알아가고 있다. 인라인요소(Inline Elements)에도 넓이/높이 속성을 적용시키는 방법이 있지만 다른 포스팅에서 알아보도록 하겠다.

CSS 요소의 여백 - 마진/패딩
Older post

CSS 요소의 여백 - 마진/패딩

Newer post

CSS 문자와 관련된 속성들 - Font

CSS 문자와 관련된 속성들 - Font