컨텐츠 영역에 border까지를 포함시키는 box-sizing속성
css box model을 계산할때 보통 width + (padding2) + (border2) + (margin*2)
이런 공식으로 계산을 하지만, box-sizing속성을 이용하면
padding영역과 border영역을 컨텐츠 영역 (width/height)안에 포함시켜준다.
<속성값>
-box-sizing : content-box;
:기본값으로 padding과 border를 컨텐츠 영역에 포함시키지 않음.
-box-sizing : border-box;
:컨텐츠 영역안에 padding과 border를 포함시킴.
위의 사진과 같이 콘텐츠 영역안에 보더값과 패딩값이 들어가면서 실질적인 콘텐츠 영역이 줄어든다.
*이미지 태그는 기본 인라인 속성을 띄고 있는데 dislplay로 blcok 속성으로 변경할 수있다.
스타일 상속
div아래 h3와 p에는 div의 스타일 속성을 지정하진 않았지만 자식이 부모속성을 따르는 것을
스타일 상속이라고 한다. 따라서 다른 속성을 지정해주고 싶을 때는 추가적으로 지정해주어야 한다.
부모속성을 따르는 auto기능
속성값에 auto를 입력하면 부모속성의 속성값을 그대로 따른다.
스타일 상속과 div태그를 이용한 카드 만들기
카드뉴스는 크게 제목명과 사진, 두가지로 나뉘기때문에 큰 카테고리 안에
두가지 파트를 만들어준다.
html파일에 div태그를 하나 만든 후, 클래스명 "con"과 img태그를 하나 만든다.
con이라는 클래스 아래로 자식 속성들을 만드는데 h4,h2,p태그를 이용해 문구를 작성해준다.
*태그를 시작했으면 반드시 단독태그가 아닌이상 꼭 닫아주어야한다.
css파일을 만든 뒤 전체선택자(*)을 이용해 마진값과 패딩값을 0으로 초기화시킨다.
그후에 html파일에서 만들어진 클래스명과 태그들에 속성값을 부여해준다.
.con은 가장 큰 부모태그로 자식에서 스타일 속성을 상속해줄 수있다.
전체 너비와 배경색상, 테두리 기울기를 설정해준다.
추가적으로 자식태그에도 추가적으로 속성값을 부여해준다.
자식속성값에 100%는 부모의 속성값을 따른다는 의미이다.
