반응형
<최종 화면>
min-width 속성을 주기 위해 임의의 긴 글을 써보자.
브라우저 창 크기에 따라서 자동 줄바꿈이 된다.
그러나 min 최소 크기를 주면, 그 크기까지는 자동 줄바꿈이 안된다. 아래 결과 사진을 보면 줄바꿈 대신 스크롤이 생기는 것을 알 수 있다.
<복붙용 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
min-width: 800px; /* 원래 브라우저 만큼 사이즈가 변경되지만 800보다 작아지면 스크롤됨*/
min-height: 200px;
background: yellowgreen;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius harum quos corporis minus dolorem blanditiis error commodi cum qui eveniet, eligendi asperiores aliquid natus rerum voluptatum provident quibusdam velit accusamus.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid modi laborum accusantium ipsum necessitatibus sed nobis tempora, dolorum iure dolores unde officia atque suscipit beatae explicabo sequi, velit, quibusdam repellat!
</p>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글
| HTML+CSS (기초) float, clear 속성 (옆으로 배치하기 위해 float 사용) (0) | 2019.12.09 |
|---|---|
| HTML+CSS (기초) overflow 속성 사용 ( 테두리 넘친 내용에게 적용) (0) | 2019.12.09 |
| HTML+CSS (기초) index 속성 이용하기. (0) | 2019.12.09 |
| HTML+CSS ( 기초) float 속성 [이미지 배치해보기] (0) | 2019.12.09 |
| HTML+CSS (기초) float 속성 사용하기. (1) | 2019.12.09 |
댓글