width , heigth
display
border
margin
padding
border-radius
블록 레벨 요소인가 ? 인라인 레벨요소인가?
-블록레벨 - 혼자 한줄을 차지하는 요소 <div><p>가 대표적인 블록레벨요소를 만드는 태그이다.
-인라인레벨- 줄을차지하지않는다. 화면에표시되는 콘텐츠만큼만 영역을 차지하고 나머지공간에는 다른요소가 올수있다. <img><strong>태그등이 인라인레벨요소를 만드는 태그다.
박스모델
블록레벨요소들은 모두 박스형태다.
박스모델에서 콘텐츠 영역의 크기를 지정할때 사용한다.
witdh : 크기 | 백분율 | auto
height : 크기 | 백분율 | auto
블록요소와 인라인요소는 서로 변환이 될수 없을까?
display : none | contents | block | inline | inline-block| table | table-call . . .
inline-block 은 마진,패딩값도 적용이된다.
none 은 요소가 화면에 나오지 않는다.
visibility : hidden도 숨김역할을 하지만 , 자리를 차지한다는점에서 display : none과 차이가 있다.
테두리
테두리 스타일
border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid
테두리 두께
border-width : 크기 | thin | medium | thick
한쪽면만 바꿀 수도 있다. border - top,right,bottom,left-width :
border-width : 전체 | 상하,좌우 | 위 오른쪽 아래 왼쪽
테두리 색
border-color : 컬러
한쪽면만 바꿀 수도 있다. border-top,right,bottom,left-color:
border : 두께 | 색상 | 스타일
한번에 정할 수 있다. 물론 면마다 다르게 할수도있음
border-top,right,bottom,left : 두께|색상|스타일
박스 모서리 둥글게 만들기
border-radius : 크기px | 백분율
각각 모서리마다 다르게 해줄수도 있다. border-top,bottom-left,right-radius: 크기px | 백분율
타원형태로 둥글게 할 수도있다.
border-radius : 가로크기 / 세로크기 #원으로 둥글게하는게아니고 타원으로 둥글게 함으로서 구현됨. 가로크기 세로크기 다름
border-top,bottom-left,right-radius : 가로크기 세로크기
박스에 그림자효과내기
box-shadow : none | 그림자값
box - shadow : 수평거리 수직거리 흐림정도 번짐정도 색상 inset