z-index 페이지의 객체들을 아래부터 순서대로 위에 쌓는 기능 www.w3schools.com/cssref/pr_pos_z-index.asp Frontend/Css 2021.03.18
Position Static 기본 값 Relative 이전 객체로부터 자연스럽게 위치함 Absolute 부모로부터 위치를 다시 잡음 *부모의 position이 relative여야함 Fixed 지정한 위치에 고정 Frontend/Css 2021.03.18
Inline vs Block & Display Inline은 높이 크기 등을 가질 수 없고 부모 태그에 종속된다 *display: inline-block을 통해 block 형태로 만들 수 있음 *inline은 가로로 데이터가 들어가므로 가로로 padding은 먹히지만 세로는 인식하지 못한다 Block 라인 전체를 차지함 *float를 이용하면 같은 라인에 block 배치 가능 *text-align: center은 block만 가능 display display: none display: inline display: block display: inline-block 페이지에 특정 속성을 보이거나 보이지 않게 하는 기능 display: none; visibility: hidden; Frontend/Css 2021.03.18
Line-height 텍스트는 인라인이기 때문에 패딩, 마진 등등이 지정이 되지 않고 부모에 종속된다 align으로 가로 방향의 가운데 정렬은 가능하지만 세로는 line-height을 이용해서만 가능하다 부모 박스 line-height: 50px 자식 박스 line-height: 50px (부모와 동일한 px를 설정하면 중앙에 오게 됨) Frontend/Css 2021.03.17
Float 박스의 배치 방향을 결정 left box1 box2 bo3 box4 box5 box6 right box3 box2 box1 box6 box5 box4 none 설정 x clear left - 왼쪽 설정 해제 right - 오른쪽 설정 해제 both - 양쪽 설정 해제 Frontend/Css 2021.03.17
Box-sizing width, height는 content의 크기를 지정한다 (margin, padding, border에는 영향 X) Content-box content 박스는 변하지 않고 유저가 정한 값들을 모두 더해 크기를 결정한다 Border-box content 박스를 조절해 유저가 정한 width, height 기준으로 박스 크기를 조정한다 *content+padding+border Frontend/Css 2021.03.17