Amazing Story

(6) 박스모델 정리 1) width - 입력한 크기만큼만 적용됨- 부모요소의 width값을 그대로 사용2) 배경색 : 콘텐츠 영역(width, height) + padding + 테두리※ margin, padding, border를 각 크기를 주지 않을 경우에는 배경색을 주었을 때, 모두를 포함해서 배경색으로 나타납니다. ■ 예시1 1234567891011121314151617박스모델 정리 *{margin:0; padding:0;} .test1{background-color:#f00;} .test2{background-color:#0f0; width:300px;} width 콘텐츠 width값 입력한 경우 ■ 실행결과1 3) 자식요소는 부모요소의 width값을 사용함. 상속받음. 4) 자식의 넓이가 부..

(5) 패딩(padding)과 마진(margin) 1) padding- 테두리와 콘텐츠 사이의 여백을 표현- 패딩은 top, right, bottom, left 네방향을 설정 2) margin- 테두리 바깥쪽 여백을 표현- 요소와 요소사이의 여백을 표현- 마진은 top, right, bottom, left 네방향을 설정 3)마진과 패딩은 작성법이 동일 margin:10px; → 모든방향이 마진 10px; margin:10px 20px; → 상하, 좌우 동일 margin:10px 20px 30px; → 상, 좌우, 하 margin:10px 20px 30px 40px; → 상, 우, 하, 좌 margin-top: margin-right: margin-bottom: margin-left: ■ 예시1 12345..

4. Box model(박스모델) - CSS가 HTML문서를 제어할 때 사용하는 기본단위는 Element이며 이때 요소를 네모상자(box)로 취급하여 모든 스타일의 기본 속성(1) 박스모델의 종류1) width, height → content 크기2) padding → 테두리와 콘텐츠와의 여백3) margin → 테두리 바깥쪽 여백4) border → 요소의 테두리5) background (2) 모든 브라우저는 사용자가 스타일을 적용하지 않더라도 기본값(초기값)이 적용된 상태- 여백을 최소화(0으로 셋팅)- margin, padding → 0으로 셋팅- border → 일부요소를 제외하고 테두리값은 없음 (참고1) 크롬(chrome) 브라우저 이용하기- 해당요소에서 마우스 우클릭(또는 F12)하여 검사-..