padding
padding-top
padding-right
padding-bottom
padding-left
border
border-top
border-right
border-bottom
border-left
display
display : none
display : block (블록형태로 표시)
display : inline-block(인라인 블록 형태로 표시)
display : inline(인라인 형태 표시)
visiblility - 선택된 요소의 가시성
visiblility : visible(표시함)
visiblility : hidden(숨김)
- display:none 와 visibility:hidden이 모두 화면상에서 선택된 요소를 숨기지만 visibility는 요소가 있던 자리를 그대로 차지합니다.
- display는 해당요소가 차지하고 있던 화면 영역까지 모두 사라짐
position
position:static(기본위치) : html 구성에 따른 기본위치
position:relative(상대위치) : 원래위치에서 상대적으로 이동거리를 지정
position:absolute(절대위치) : 명시적으로 지정된 요소를 기준으로 절대 위치
position:fixed(고정위치) : 화면에 표시되는 영역에 대하여 고정적인 위치
top: 30px
right:30px
bottom:30px
left:30px
위의 top, right, bottom, left는 position 속성값에 따라 달라짐
position:absolute - 해당요소의 부모 요소중 position 속성이 명시적으로 지정된 요소의 좌측 상단이 기준점이 됨
position:relative - 해당요소가 static 상태인 원래위치의 기준점을 원점으로 함.
position:fixed - 화면에 표시되는 영역의 좌측 상담을 원점으로 하기 때문에 화면에 스크롤되어도 일정한 영역에 표시됨.
float - 선택된 요소와 그 다음에 오는 요소간의 문서 흐름을 지정.
float:left - 왼쪽으로 흐름
float:right - 오른쪽으로 흐름
float:none
min- width, min-height - 컨텐츠의 최소 폭과 높이를 지정합니다.
컨텐츠의 내용이 지정된 크기보다 작더라도 지정된 크기를 유지합니다.
웹브라우저 에서 계산된 컨텐츠 내용의 크기가 지정된 크기보다 크면 해당요소의 크기를 자동적으로 확장합니다.
overflow - 지정된 크기보다 컨텐츠의 내용이 크기가 더 클 경우 어떻게 처리할지 지정하는 속성
overflow:visible(표시) - 요소밖으로 넘어선 컨텐츠의 내용은 높이를 가지 않으므로 주의합니다.
overflow:hidden(숨김) - 지정된 크기를 넘어서는 컨텐츠를 표시하지 않음
overflow:scroll(스크롤) - 지정된 크기의 스크롤를 생성하여 컨텐츠 내용을 볼수 있도록 함.
background: url('alert.png') 10px 10px no-repeat;url : 배경 주소, position : 이미지 위치, repeat : 배경 반복
백그라운드 반복(repeat)은 repeat, repeat-x, repeat-y, no-repeat의 네 가지 값을 갖는다.
no-repeat는 백그라운드 이미지를 한번반복 한다.
background: url('alert.png') 50% 10px no-repeat;50% 값을 이용하면 백그라운드 이미지를 중앙에 정렬할 수 있다.엘리먼트의 상단에 백그라운드 이미지를 중양 정렬하려면 50% 0 값을 사용하면 된다.