2019백업
18. overflow속성
overflow 속성 자식 요소가 float: left를 하면 부모요소가 높이 값을 잃어버리는데 부모요소에 overflow:heidden;을 통해 높이 값을 찾아온다.
예제 - CSS 수직, 수평 중앙정렬 시키는 방법
1) margin: auto (수평정렬) 2) 부모요소에 작성 display: flex justify-content: center align-items: center 3) position: absolute top: 50% left: 50% transform: translate(-50%, -50%) 왼쪽, 위쪽
예제 - CSS 화면 가득 채우기
1) html, body {height: 100%;} .container {height: 100%;} 2) .container {height: 100vh;}
17. Tip&Tech - 가변영역 고정영역 함께 사용하는 레이아웃
(calc, flex-box, table-layout) width: cacl(100% - 300px); .wrapper {dispaly: flex;} .main {flex: 1;} .wrapper {display: table; width: 100% } .main, .sub {display: table-cell}
16. Css 순서 가상 클래스
: (CSS2) :: (CSS3) (1) first-child, last-child, nth-child(n) (2) first-of-type, last-of-type, nth-of-type (순서뿐만아니라 type도 같이 보겠다.) 마우스 가상 클래스 (1) :hover 마우스 클릭시 (2) :focus 마우스 클릭 했을 때
15. 엘리먼트 보이고 감추기, Z-index
1. 엘리먼트 보이고 감추기(hidden, opacity, display: none;) hidden: 사라지기만 공간은 존재 opacity: 보이지 않는 것뿐 display:noen 사라지고 공간도 없어짐 2. z-index (높을 수록 위에 배치) ex) 동영상을 배경으로 썼을 때 z-index: -1 로 가장 뒤에 배치되게 설정
14. CSS 포지셔닝 속성
Position 속성 1) Position: fixed; (left , top, bottom, right) 2) Position: absolute; Ex) 정 가운데 배치 left: 50%, right: 50%, transform: translate(-50%, -50%) 3) Position: relative; position 속성이 부모에 대해 관련되게 설명하여야함.
13. CSS 위치지정 위한 속성(링크라도달까..)
Box-Sizing 속성 float 속성 - 왼쪽 또는 오른쪽 위치 지정 clear 속성 - float 속성을 해제 position 속성 - 배치 방법지정 z-index 속성 - 순서 요소 정렬