속성: 어떤 항목을 제어할 것인지
값: 어떻게 제어할 것인지
한 선택자에 여러 속성과 값을 사용할 수 있다.
- html태그에 속성과 값을 적는다.=> 인라인 스타일 방식. 너무 길어져서 가독성 좋지 않음.
<style>태그에 입력하는 방법.
태그에 body의 자식을 선택자를 사용해 연결하기.
선택자: class선택자, id선택자, 전체 선택자- 이 스타일을 다른 파일로 분리해서 사용하는 방법.
그리고 link태그로 연결해줌.
border-box는 테두리 기준으로 안에 padding을 주면 박스 크기는 그대로인채 내부의 contents 크기만 변화함.
content-box는 contents크기가 기준이 되어 padding을 주어도 contents크기는 변화하지 않고 전체크기(테두리크기(길이))가 변화한다.
먼저 테두리의 크기를 정한뒤 내용물을 넣는것이 낫다.
(조절편함)
다만 css기본 속성이 content-box이기때문에 border-box로 추가 지정 해주어야한다.
정리하자면 -
- content-box:
내용물의 크기는 그대로야. 그런데 padding을 사용한다고? 그럼 내용물 공간외에 공간이 더 필요하겠네? => 전체 크기 증가.
=> default값 - border-box:
padding이 있다고? 그럼 내용물 우리가 공간을 만들어줘야겠네. 모여!!
