content 영역의 크기를 조절하는 속성 (width, height)
- width : 가로 길이 조정
- height : 세로 길이 조정
- px (고정크기) : 요소 크기가 변하지 않음
- % (가변크기) : 부모 요소 크기와 화면 크기에 따라 요소 크기가 달라짐
- vh : 현재 화면 높이 (현재 화면의 vh%만큼의 비율)
화면 배치 방법 변경 (display)
- 블럭요소와 인라인요소의 속성을 변경해서 배치 방식을 변경할 수 있음
- inline : 블럭 요소를 인라인 요소로 변경
- inline-block - 인라인 요소로 배치를 하나 width, weight 의 크기는 유지됨
- block - 기존 인라인 요소를 블럭 요소로 변경
- none - 화면에 안보임, 공간 차지X
선택자{
display:inline/inline-bolock/block;
}
배치 관련 스타일 (position)
- relative : 기준이 되는 요소에 기준점을 줘서 절대적인 배치가 가능하게함
- 만약 기준점을 바로 위의 부모요소에 지정하지 않는다면 기준점이 body로 잡힘
- 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되어줌
- 내부에 작성되는 후손요소에 absolute와 top, bottom, left, right 속성을 쓸 수가 있음
- absolute : 기존의 요소배치를 무시하고 지정된 절대위치에 요소 배치
- top, bottom, left, right을 이용하여 relative 로 지정한 요소와 거리 조정
- fixed : 고정위치
- 스크롤을 해도 같은 위치에 존재함
- 페이지 상단 베너 등에 사용
- top, bottom, left, right로 위치 조정
#second
position : absolute;
top: 50px;
left: 50px;
/* 부모요소를 기준으로 각각 위, 왼쪽으로부터 50px인 곳으로 옮겨버림*/
}
페이지 안의 요소들을 순서대로 위로 쌓는 속성 (z-index)
- 숫자가 더 높을수록 다른 요소들보다 더 위에 표시됨
- 값이 같으면 작성 순서상 마지막에 작성된 것이 저 위에 표시됨
#z3{
z-index: 400;
}
페이지에 특정요소를 보이지 않게 하는 속성 (visibility : hidden)
- 보이지 않지만 공간은 차지하고 있음
- 반면 display : none은 요소가 보이지 않는건 같지만 공간을 차지하지 않음
#vis{
visibility: hidden;
}
페이지 내의 요소들을 띄워서 왼쪽 또는 오른쪽으로 배치하는 속성 (float)
- 블럭요소들을 차례로 공중에서 띄워서 옆으로 배치되게끔 해줌
- float 속성을 쓰면 그 이후에 적힌 요소들이 공중에 뜨기 때문에 <br clear="both"> 태그로 속성을 해제해줘야함
.float-test{
float:left;
}
요소의 수직 정렬 (vertical-align)
- 인라인 요소에만 적용 가능, 블럭요소에서는 사용 불가
- baseline : 셀의 기준 선에 내용의 기준선을 맞춤 (기본값)
- top : 패딩의 위쪽에 내용의 기준선을 맞춤
- middle : 패딩의 중앙에 내용의 기준선을 맞춤
- bottom : 패딩의 아래쪽에 내용의 기준선을 맞춤
