목록border-box (2)
Yeonee's Story
안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> Document div{ box-sizing: border-box; /* 지금부터 지정하는 가로세로길이는 테두리까지 포함한 길이임을 의미 */ border: 1px solid blue; } /* 전체를 감싸는 div wrap */ .wrap{ width:1000px; height: 800px; margin:auto;/* 좌우로 가운데로 자동정렬 시켜줌*/ } /* 크게 3가지 영역에 스타일 부여*/ /* #header , #content , #footer*/ .wrap>div{ /* class 속성이 wrap이면서 자손태그중 div태그에만 스타일 부여하겠다 */ width: 100%; } #header, #footer{ heigh..
안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 영역관련스타일 * { box-sizing: border-box; /* 가로,세로길이를 border까지 포함해서 지정하겠다 라는 의미. 기본값은(content-box)*/ } .test{ background-color: yellow; border:10px solid black; /* div요소는 border영역 까지를 포함 */ width:100px; height:100px; /* width와 height는 content영역의 크기를 의미 */ } #test1{ padding:100px; } #test2{ padding-top:50px; padding-left : 50px; } #test3{ padding : 50px 20px 10..