CSS3 box-sizing 속성없이
CSS3 box-sizing 속성없이
기본적으로 요소의 너비와 높이는 다음과 같이 계산됩니다.
width + padding + border = 요소
높이 의 실제 폭 + 채우기 + 테두리 = 요소의 실제 높이
즉, 요소의 너비 / 높이를 설정하면 요소의 테두리와 채우기가 요소의 지정된 너비 / 높이에 추가되므로 요소가 설정 한 것보다 자주 표시됩니다.
다음 그림은 폭과 높이가 지정된 두 개의 <div> 요소를 보여줍니다.
위의 두 <div> 요소는 결과에서 다른 크기로 끝납니다 (div2에 패딩이 지정되었으므로).
예
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
그래서 오랫동안 웹 개발자는 패딩과 테두리를 빼야하기 때문에 원하는 것보다 더 작은 너비 값을 지정했습니다.
CSS3를 사용하면이 box-sizing속성이이 문제를 해결합니다.
게시판 목록
퍼블리셔팁
퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 857 | HTML | 8년 전 | 1390 | ||
| 856 | HTML | 8년 전 | 1847 | ||
| 855 | HTML | 8년 전 | 2086 | ||
| 854 | HTML | 8년 전 | 1503 | ||
| 853 | HTML | 8년 전 | 2196 | ||
| 852 | HTML | 8년 전 | 3274 | ||
| 851 | HTML | 8년 전 | 3246 | ||
| 850 | HTML | 8년 전 | 2087 | ||
| 849 | HTML | 8년 전 | 1667 | ||
| 848 | HTML | 8년 전 | 1825 | ||
| 847 | HTML | 8년 전 | 1721 | ||
| 846 | HTML | 8년 전 | 1912 | ||
| 845 | HTML | 8년 전 | 2039 | ||
| 844 | HTML | 8년 전 | 1985 | ||
| 843 | HTML | 8년 전 | 2204 | ||
| 842 | HTML | 8년 전 | 2049 | ||
| 841 | HTML | 8년 전 | 1967 | ||
| 840 | HTML | 8년 전 | 2327 | ||
| 839 | HTML | 8년 전 | 1910 | ||
| 838 | HTML | 8년 전 | 2177 | ||
| 837 | HTML | 8년 전 | 2015 | ||
| 836 | HTML | 8년 전 | 2039 | ||
| 835 | HTML | 8년 전 | 2202 | ||
| 834 | HTML | 8년 전 | 1544 | ||
| 833 | HTML | 8년 전 | 1902 | ||
| 832 | HTML | 8년 전 | 1380 | ||
| 831 | HTML | 8년 전 | 2440 | ||
| 830 | HTML | 8년 전 | 1655 | ||
| 829 | HTML | 8년 전 | 1260 | ||
| 828 | HTML | 8년 전 | 2481 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기