공부/Html OR CSS
-
[CSS] float 속성 (요소를 떠 있게 하는 속성)공부/Html OR CSS 2023. 12. 31. 14:26
float : 해당 요소를 다음 요소 위에 떠 있게하는 속성 기본 구문 .element { float: value; } 속성(value) left : 요소를 왼쪽으로 띄운다. right : 요소를 오른쪽으로 띄운다. none : 띄움을 해제한다. (기본값으로 설정) 예를 들면 text 요소랑 float 요소가 있을때 left 정렬을 하면 다음과 같이 보이게된다. 즉, 요소를 띄워서 왼쪽에 정렬 시키게되니깐 왼쪽 오른쪽 서로 배치된게 아닌 가리는 형태가 된다. 그래서 float 요소를 사용하고 다음 위치에 요소를 배치하고 싶다면 clear 속성을 사용해야한다. clear : float 속성이 적용된 요소의 다음 요소들이 겹치는 현상을 방지하기 위해 사용하는 속성 즉, 이후의 요소가 float 속성에 영향을..
-
[CSS] box-shadow : 박스에 그림자 만드는 속성공부/Html OR CSS 2023. 12. 31. 13:36
box-shadow : 그림자 효과를 만드는 속성 문법 box-shadow : none; /*그림자 효과를 제거 */ box-shadow : red 50px -15px 30px 0px; /* | | | */ box-shadow : 50px -15px 30px 0px red inset; /*inset : 내부그림자 생성* -> initial inherit 도 넣을 수 있음 / 필수 요소 x-position(x 위치) : 가로 위치로 양수면 오른쪽 음수면 왼쪽에 그림자 생성 y-position(y 위치) : 세로 위치로 양수면 아래쪽, 음수면 위쪽에 그림자 생성 기타 요소 color : 그림자 색상 지정 blur : 값이 클 수록 그림자를 흐릿하게 만듬 spread : 양수면 그림자 확장, 음수면 축소 in..