css 박스모델

생활코딩_web2_8.박스모델_필기노트

/* block level element */ h1 { border-width:5px; border-color:red; border-style:solid; display:inline }

/* inline element */ a { display:none }

참고: /**/ : css

중복을 줄이자

<style> h1, a{ border:5px red solid } </style>

박스

padding:200px;	박스와 박스내부의 컨텐츠 사이의 간격 inline으로 적용해봤을 땐 윗부분이 짤려서(?) 나옴... margin 값 조정해도 짤림
width:10px;	padding값이 우선이고(순서바꿔서해봄), 박스 오른쪽 부분이 마지막 글자로부터 10px 떨어짐
margin:100px;	박스와 박스 외부의 컨텐츠 사이의 간격

페이지에서 오른쪽버튼 - 요소점검 - element에서 어떤 줄 클릭하면 그 줄에 해당하는 내용?부분?이 블록으로 선택됨

• border-top/bottom/left/right 별로 스타일 다르게 설정 가능(추가함으로써)
• 컬러 rgb로 설정 가능  ex) rgb(250, 70, 0)
• 박스 투명도 설정 rgba(250, 70, 0, 0.5)