CSS 박스모델

블록레벨 혼자 한줄을 차지하는 요소
p,h,ol,ul,form,hr,table,fieldset,address

인라인 줄을 차지하지않는 요소
img object br sub sup span input textarea label button

 

박스모델 

-블록레벨요소

-콘텐츠 영역, 패딩,테두리(border) , margin

 

width,height : 콘텐츠영역의 크기  % px

 

 

display

• block: 인라인레벨 -> 블록레벨
• inline: 블록레벨->인라인레벨
• inline-block: inline(한줄로 배치)하면서 너비,높이,위아래,마진 float 값 적용할 수있음
• none: 화면에 보이지않고 공간조차 차지않음 (ex PC화면에는 표시하지만 모바일에 보이고싶지않은부분)

<style>
	div{
	width:100px;
        height:100px;
        margin:30px;
        display:inline-block;
	}
</style>

border-style 테투리스타일

• none:기본 값
• hidden: border-collapse:collpase 다른 테두리도 표시되지 않습니다.
• dashed: 테두리 짧은선으로 표시
• dotted 테두리를 점선으로 표시
• groove 
• inset
• outset
• ridge
• solid

border-width 테두리 굵기

border-color 테두리 색상 지정

 

border 스타일 묶어 지정

<style>
	div{
    border-top:/*두께 색상 스타일 */;
    border-left:5px;
    border:3px solid #ccc;  
	}
</style>

border-radius 박스 모서리 둥글게 만들기

border-top-left-radius
border-top-right-radius
border-bottom-rihgt-radius
border-bottom-left-radius
border-radius: 크기 | 백분율

box-shadow 수평 수직거리는 반드시 지정

<style>
	div{
		box-shadow:5px 5px 15px 5px gray; /* 수평 수직 흐림 번짐 색상 */
	}
</style>

 

margin 현재 요소 주변의 여백 , 한요소와 다른요소 사이의 간격조절

margin-top: 10px;
margint-right:
margin-bottom
margin-left
margin: 50px 네방향 모두 50px
             30px 50px 위아래 30 좌우 50
             30px 50px 30px 50px 시계방향
             30px 20px 50px 위 30 좌우 20 아래 50

마진을 사용해 화면가운데 배치

<style>
	.box{margin:0 auto;} /* 마진 -0 auto 0 auto */
</style>

마진중첩: 위 아래 만날경우 큰 마진값으로 합쳐짐 ,오른쪽 왼쪽 마진만날경우 중첩 X

 

padding 콘텐츠 영역과 테두리 사이 여백 설정