1. 크기 및 한계 설정
- height
- width
- max-width
- min-width
- max-height
- min-height
1-1 height, width
<style>
p {border: solid 1px; width: 10rem; height: 10rem;}
</style>
- p단락에 실선의 테두리를 만든 후 너비와 높이를 10rem 설정한 코드다.
- width : 너비 / height : 높이
1-2 max-width / min width, max-height / min height
<style>
p {
border: solid 1px; width: 10rem; height: 10rem;
max-width: 9rem; min-width: 5rem;
max-height: 9rem; min-height: 5rem;
}
</style>
- max-width: 최대 너비 설정 / min-width: 최소 너비 설정
max-height: 최대 높이 설정 / min-height: 최소 높이 설정
- 테두리에 너비랑 높이를 각각 10rem으로 설정해주었으나, 최대 너비와 최대 높이를 각각 9rem으로 지정해주었으므로 조건에 따라 해당 코드는 너비와 높이가 9rem인 테두리가 만들어진다.
'FrontEnd > Css' 카테고리의 다른 글
[CSS] 테두리(border) (0) | 2021.07.27 |
---|---|
[CSS] 패딩(padding) (0) | 2021.07.27 |
[CSS] 링크(link), 리스트(list), 테이블(table) (0) | 2021.07.24 |
[CSS] 글꼴 (0) | 2021.07.24 |
[CSS] 텍스트(text) 속성 (0) | 2021.07.24 |