요소의 가로 길이(width)와 세로 길이(height)를 설정할 수 있다.

p {
	border : 3px solid red;
	width: 200px;
	height: 300px;
}

최소, 최대 길이

min-width, max-width, min-height, max-height 를 이용해서 가로, 세로의 최소, 최대 길이를 지정할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
   #p1 {
     border: 3px solid black;
    max-width: 300px;
   }

   #p2 {
     border: 3px solid rebeccapurple;
     min-width: 500px;
   }

   #p3 {
     border: 3px solid red;
     max-height: 400px;
   }

   #p4 {
     border: 3px solid yellow;
     min-height: 600px;
   }
  </style>
</head>
<body>
  <!-- 가로 최대 길이: 300px -->
  <p id="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates debitis pariatur omnis! Optio ipsa rem qui ratione natus, inventore illum sed minima, quibusdam aspernatur quia laboriosam reprehenderit dolores repellat nobis.</p>

  <!-- 가로 최소 길이 : 500px -->
  <p id="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet fugiat, alias blanditiis, illo ea dolore soluta consequuntur quo fugit suscipit sunt excepturi expedita dolor assumenda vel maiores architecto numquam modi.</p>

  <!-- 세로 최대 길이 : 400px -->
  <p id="p3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa impedit cumque repellat temporibus atque quod blanditiis deserunt est quibusdam vitae. Nihil voluptatem illum voluptates cupiditate. Voluptas illo provident veniam quos!</p>

  <!-- 세로 최소 길이 : 600px -->
  <p id="p4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis repellendus voluptates alias aspernatur accusamus, fugiat reprehenderit eveniet. Illo blanditiis cumque hic nihil alias dignissimos molestiae vel autem eligendi, similique quibusdam!</p>
</body>
</html>

이렇게 설정한 경우 내용물이 들어갈 공간이 부족한 경우가 있을 수 있다.

이때 사용할 수 있는 속성이 overflow이다.

overflow

visible

p {
	border: 3px solid red;
	max-width: 200px;
	overflow: visible;
}

내용물이 넘쳐도 그대로 보여준다.

hidden

p {
	border: 3px solid red;
	max-width: 200px;
	overflow: hidden;
}

넘치는 부분을 보이지 않게 한다.

scroll

p {
	border: 3px solid red;
	max-width: 200px;
	overflow: scroll;
}

항상 스크롤을 통해 볼 수 있게 한다.

auto

p {
	border: 3px solid red;
	max-width: 200px;
	overflow: auto;
}

내용물이 넘치는 경우에만 스크롤바를 보여준다.

https://www.instagram.com/p/CbG_LROJL-K/?utm_source=ig_web_copy_link

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.

이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.

저작자표시

'CS > HTML CSS' 카테고리의 다른 글

8. box-sizing (0)	2022.05.07
7. border-radius, background-color, box-shadow (0)	2022.05.07
5. border (0)	2022.05.07
4. Margin, Padding (0)	2022.05.07
3. Box Model 기초 (0)	2022.05.07

6. width, height, overflow