전체 글 (33) 썸네일형 리스트형 [CSS] CSS border, padding 사용할 때 요소 크기 유지 크기 계산 (box-sizing) box의 사이즈를 150px로 지정하였는데 border과 padding을 적용하고 나니 개발자 도구에서 Box1은 270px로 출력된다. i.e. Box1 가로 : 150px(기본가로값) + 10px(border좌) + 10px(border우) + 50px(padding좌) + 50px(padding우) = 270px Box2 세로 : 150px(기본가로값) + 10px(border좌) + 10px(border우) + 50px(padding좌) + 50px(padding우) = 270px 아래 이미지 처럼 box1과 box2의 크기를 맞추려 수동으로 셋팅하는 것에는 한계가 보인다. 여기서 box1에 box-sizing : border-box;를 추가하면 자동으로 box2.. [CSS] Margin 외부 여백 외부 여백(margin) margin : 30px(상하) 80px(좌우); .box{ width: 300px; height: 300px; margin: 30px 80px; background-color: brown; } .box2{ width: 300px; height: 300px; background-color: brown; } margin : 10px(상) 30px(좌우) 80px(하); .box{ width: 300px; height: 300px; margin: 10px 30px 80px; background-color: brown; } .box2{ width: 300px; height: 300px; background-color: brown; } margin 음수값 적용 (자주 쓰지 않지만 유용할.. [CSS] CSS 속성 단위(Units) font-size px vs. em 그리고 rem .parent { width: 300px; height: 200px; background-color:lightcoral; } .child{ width: 50%; height: 50%; background-color:royalblue; } 기본적으로 font-size는 16px 만큼의 크기가 들어가 있다. (위 사진 참조) 단위 em 폰트 사이즈(16px) 만큼의 1em으로 사용으로 한다. 주변 상황에 따라 상대적으로 폰트 크리가 달라벼 관리가 필요한 단점이 있다. 여기서 Css child width값을 10em으로 바꾸면 16px 곱하기 10으로 160px i.e.160em으로 환산된다. 동일하게 20em으로 값을 바꾸면 아래와 같이 3.. 이전 1 2 3 4 5 6 ··· 11 다음
