-border를 기준으로 내부는 padding, 외부는 margin이다->padding이 좌우 20, 콘텐츠가 400일때 내용의 총 width는 440
box-sizing: content-box;/*기본값*/
box-sizing: border-box;/*width값에 border, padding을 포함하여 계산*/
4. 내용 삽입하기
<p>태그: 단락을 나타냄
<body>
<div>
<imgsrc="cat.png">
<h1>CAT</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, error provident. Doloremque tempora maiores iste, facere deserunt ratione? Qui porro consequuntur laborum quod alias? Doloremque porro necessitatibus odio harum voluptatum?</p>
</div>
</body>
결과물은 3개의 컨텐츠로 구성되어 있으며 모든 컨텐츠들은 한 뭉덩이인 <div>태그안에 작성한다
-단락은 <p>태그로 표현한다
5. 내용의 속성 구체적으로 설정하기
article{
background-color: rgb(244, 238, 238);
width: 500px;
margin: 100pxauto; /*상하는 0*/
padding: 20px;
box-sizing: border-box;/*width값에 border, padding을 포함하여 계산*/
text-align: center;
border-width: 50px;/*테두리 두께*/
border-style: solid;/*스타일은 꽉차게*/
border-color: brown;/*테두리 색*/
}
-> article 테두리의 두께, 스타일, 테두리색 설정하기
border-width: 50px;/*테두리 두께*/
border-style: soliddashed;/*스타일은 꽉차게*/
border-color: brownrebeccapurple;/*테두리 색*/
border-bottom: 30pxsolidpurple;
-border는 너비, 스타일, 색을 따로 설정할 수도 있지만 한번에 한줄로 설정할 수도 있다.
-상하좌우 등 border의 일부분만을 설정할 수도 있다.
-테두리인 border은 덩어리인 article뿐만 아니라 h1등에도 적용할 수 있다.
-컨테이닝 블럭만큼 가득 채움 이때 자신이 가지고 있는 마진을 포함해 부모기준으로 가득채움 따라서 마진이 좌우 각 80일 때 이를 기준으로 부모기준으로 가득 채움
display block
-블럭레벨요소
-디스플레이 블럭레벨의 성질을 가진경우
-이때 h1안의 내용만 가운데 정렬된것일 뿐 h1은 중앙정렬된것이 아니라 이동없이 왼쪽정렬되어 있는 상태이다
