width, height

텍스트

요소의 가로 길이(width)와 세로 길이(height)를 설정해봅시다.

 

html

<p>Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut.</p>

 

css

p {
  border: 1px solid blue;
  width: 400px;
  height: 300px;
}

 

이미지

사진의 크기도 똑같이 css에서 설정할 수 있습니다.

 

html

<!-- css로 설정 -->
<img src="https://vignette.wikia.nocookie.net/heroism/images/8/84/Daniel-Craig-james-bond-BW.jpg" class="bond-img">

<!-- img 태그의 width, height 속성으로 설정 -->
<img src="https://vignette.wikia.nocookie.net/heroism/images/8/84/Daniel-Craig-james-bond-BW.jpg" width="400" height="300">

 

scs

.bond-img {
  width: 400px;
  height: 300px;
}

 

최소, 최대 가로 길이

min-width, max-width로 요소의 최소, 최대 가로 길이를 설정할 수 있습니다.

 

html

<!-- 가로 길이: 최대 1000px -->
<p class="p1">Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut.</p>

<!-- 가로 길이: 최대 200px -->
<p class="p2">Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut.</p>

<!-- 가로 길이: 최소 2000px -->
<p class="p3">Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut.</p>

<!-- 가로 길이: 최소 200px -->
<p class="p4">Lorem ipsum</p>

 

css

.p1 {
  border: 1px solid blue;
  max-width: 1000px;
}

.p2 {
  border: 1px solid red;
  max-width: 200px;
}

.p3 {
  border: 1px solid blue;
  min-width: 2000px;
}

.p4 {
  border: 1px solid red;
  min-width: 200px;
}

 

 

최소, 최대 세로 길이

min-height, max-height로 요소의 최소, 최대 세로 길이를 설정할 수 있습니다.

 

html

<!-- 세로 길이: 최소 400px -->
<p class="p1">Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut. Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut.</p>

<!-- 세로 길이: 최소 200px -->
<p class="p2">Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut. Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut.</p>

<!-- 세로 길이: 최대 1000px -->
<p class="p3">Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut. Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut.</p>

<!-- 세로 길이: 최대 50px -->
<p class="p4">Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut. Lorem ipsum dolor sit amet, wisi clita graeci his ne, rebum epicuri nec ex. Te facer veniam his, ei sit simul oblique vivendo, mundi definitionem te sit. Cum regione tamquam meliore te. Petentium consulatu eu pri, summo possit integre duo ut.</p>

 

css

.p1 {
  border: 1px solid blue;
  min-height: 400px;
}

.p2 {
  border: 1px solid red;
  min-height: 200px;
}

.p3 {
  border: 1px solid blue;
  max-height: 1000px;
}

.p4 {
  border: 1px solid red;
  max-height: 50px;
}