cursor
- 속성 부여받은 태그 위에 위치하는 커서의 모양을 바꿀 수 있음
- 기본 화살표 default, 자동 auto, 손가락 모양 pointer(클릭 가능한 버튼), 로딩중 wait 등이 있음
transition과 hover
hover는 선택한 셀렉터에 마우스 커서가 올라갈 때 발동하는 속성을 부여할 때 활용.
그 셀렉터에 미리 transtion을 간단히 준 후 "셀렉터명:hover"에서 발동할 효과를 자세히 써주는 식
/* 그림자 효과 0.2초 동안 준다고 미리 설정 */
.btn {
transition: box-shadow 0.2s;
}
/* hover에서 그림자 어떻게 줄 건지 자세히 서술 */
.btn:hover {
box-shadow: 3px 4px 11px 0px #00000040;
}
position
- top, left, bottom, right : 함께 써서 상하좌우 이동시켜줌
- static : 기본값. HTML에 작성된 순서 그대로 화면에 위치한다는 뜻. 이 때 top, left, bottom, right 속성은 무시됨
- relative : 원래 위치에서 벗어날 수 있도록 배치해줌. top, left, bottom, right 속성을 활용해 원래 위치보다 얼마나 떨어지게 할지 지정할 수 있음. 이때 다른 요소와 겹칠 수 있음
- absolute : DOM 트리를 따라 올라가다가 static이 아닌 첫 상위 요소를 기준으로 위치를 조정함. 만약 상위 요소가 모두 static하다면 <body> 태그를 기준으로 삼음. (관습적으로 부모 요소를 relative로 지정해주곤 함) absolute가 된 요소는 HTML문서의 순서에서 독립돼서 앞뒤의 요소와 상호작용하지 않게 됨. 이 덕분에 모달창이 가능한 듯?
- fixed : 스크롤하더라도 고정된 위치에 있도록 해줌. 브라우저 전체화면을 기준으로 삼기 때문에, top, left, bottom, right하면 브라우저 테두리 기준 상하좌우 이격시킴
- sticky : 평소엔 제자리에 있다가, 스크롤하면 브라우저 테두리에 걸려서 고정됨. 보고 있는 화면에서 없어지지 않도록 해주는? 아마 웹툰의 맨 위로 같은 버튼이 이거 적용되는 듯
참고 링크 https://www.daleseo.com/css-position/
overflow
주어진 브라우저 화면이나 요소보다 보여줘야할 컨텐츠가 많아 넘치는 경우 사용. 스크롤 바 필요한 경우들!
- visible : 기본 값. 컨텐츠가 화면 밖으로 밀려나는 한이 있어도 끝까지 보여줌
- hidden : 빠져나오는 컨텐츠는 보이지 않도록 숨겨줌. 아예 잘라버리는 터라 활용도가 낮음
- scroll : 스크롤바 생김!! overflow-x나 overflow-y와 함께 사용하면 원하는 스크롤바만 보여줄 수 있음
- auto : 컨텐츠 양이 가변적인지라 미리 정하기 어려운 경우 사용. 컨텐츠가 삐져나오는 경우에만 스크롤바 생성해줌!
참고 링크 https://www.daleseo.com/css-overflow/
transform
- 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 때 사용
- 기본값인 none 또는 함수를 지정할 수 있음. 대표적인 함수로는 회전시키는 rotate(), 크기 조절하는 scale(), 기울이기를 위한 skew(), 이동시키는 translate() 등이 있음
/* 각도만큼 회전시킴 */
transform : rotate(각도);
/* x, y값만큼 이동시킴 */
transform : translate(x,y);
/* x, y값만큼 크기 조절함 */
transform : scale(x,y);