css 가로 세로 설정하기 - width, height

width, height

블록 요소의 가로값과 세로값을 설정하는 속성입니다.

※인라인 요소에는 적용할 수 없습니다.

• 블록 요소: div, h1~6, p, ul, ol, li, table
• 인라인 요소: span, a, strong
• 인라인-블록 요소: form 관련 태그, img

예) div 태그의 가로를 500px, 세로를 60px로 적용하는 코드

div {
width: 500px;
height: 60px;
}

인라인 요소에 가로 세로 적용 방법

display: inline-block;

인라인 요소의 스타일에 위 코드를 추가하면 가로와 세로를 적용할 수 있습니다.

최대(최소) width, height 지정하기

최대(최소) 가로값과 세로값을 지정하는 속성입니다.

예) div 태그의 최대 가로값, 세로값을 980px, 200px로, 최소 가로값, 세로값을 800px, 170px로 설정하는 코드

div {
max-width: 980px;
max-height: 200px;

min-width: 800px;
min-height: 170px;
}