요소의 가로 길이(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; }
내용물이 넘치는 경우에만 스크롤바를 보여준다.

부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.
이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
'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 |