블록레벨 혼자 한줄을 차지하는 요소
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 콘텐츠 영역과 테두리 사이 여백 설정