전체 글
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 속성 - 순서 요소 정렬
12. CSS 배경 그라디언트 (background: linear-gradient)
background: linear-gradient (to bottom, dodgerblue, crimson); 방향(~쪽으로)/ 시작색상/ 끝 색상 background: linear-gradient(45deg, dodgerblue 50%, crimson 50%); background: radial-gradient(circle at center center, dodgerblue, crimson); 퍼지는 모양/ 시작위치/ 시작색상/ 끝 색상 Gradient Generator 구글 검색 (사이트를 통해 그라디언트를 만들 수 있다.)
11. 박스모델 - 그림자 효과 (텍스트 새도우와 비슷함)
박스 모델 - 그림자 효과 (box-shadow) box-shadow: inset (offset-x) (ofsset-y) (blur) spread color offset-x: 수평 그림자의 offset 값 offset-y: 수직 그림자의 offset 값 blur: 그림자 가장자리를 부드럽게
10. 박스모델 - 모서리 둥글게하기(속성: border-radius : 1 2 3 4)
속성: border-radius : 1 2 3 4 100%, 50% 입력시 동그랗게 된다. 1 2 3 4 5 6 7 8
9.박스모델-Box Model(속성: box-sizing: border-box)
박스모델 - Box Model (속성: box-sizing: border-box) box-sizing: border-box 지정한 width가 고정되어 border와 padding에 영향을 받지 않게하는 속성이다.
8. 박스모델 (border, margin, padding)
outline 속성 border를 감싸고 있는 라인 border와 margin 사이에 위치 border 안쪽에 위치하려면 - 값 div { outline: 5px solid red; outline-offset: 10px; } 박스모델 - Box Model (속성: margin & padding 쉽고 빠르게 적용하기) 1) margin / padding :10px; (top, bottom, right, left) 2) margin / padding :10px 20px; ((top, bottom), (right, left)) 3) margin / padding :10px 20px 30px; (top, (bottom, right), left) 4) margin / padding :10px 20px 30px 4..