CSS

.box { margin: 20px; padding: 30px; width: 100px; background-color: aqua; } 이 때 그림에서도 볼 수 있듯이 이 박스의 실제 너비는 100px이 아니라, 오른쪽 왼쪽 패딩 크기를 합산한 100 + 30 + 30 = 160px이 된다. .box { margin: 20px; padding: 30px; width: 100px; box-sizing: border-box; } 만약 이 박스의 너비 자체가 100px이길 원한다면, box-sizing 속성을 바꿔 주면 된다. 기본 값인 content-box을 border-box로 바꾸어 설정해주면 된다. border-box는 border를 기준으로 크기를 맞춘다는 의미이다. 사실상 이게 너무 편하기 때문에 ..

반응형 웹 디자인이란? 브라우저 사이즈에 맞춰 레이아웃이 바뀌는 것 장점 따로 모바일이나 태블릿 버전을 만들 필요가 없다. 방법 #div1 { background-color: #ff0000; height: 60px; width: 100%; } #div2 { background-color: #ffa500; height: 350px; width: 100%; } @media(min-width : 768px) { div { float: left; } #div2 { height: 562px; } } @media(min-width : 768px)의 의미는 가로 길이가 768px 이상이면 아래의 스타일을 적용하라는 것이다. 여기서는 브라우져의 크기가 768px이 넘어가면 모든 div 태그에는 float:left를 d..