[css] width, height

width : 가로길이 설정

height : 세로길이 설정

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

<!-- html -->
<p>Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh voluptua deserunt.</p>

 

width

• min-width : 최소 가로길이
• max-width : 최대 가로길이

/* 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;
}

<!-- 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>

 

height

• min-height : 최소 세로길이
• max-height : 최대 세로길이

/* 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;
}

<!-- 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>