translate 가운데 정렬 안되는 문제
문제 상황
글자를 가운데에 정렬하려고 position: absolute, left: 50%를 했으나 글자가 오른쪽으로 치우침
알아보니 요소를 정렬할 때 기준점이 요소의 좌상단을 기준으로 하기 때문에 left: 50%를 하면 오른쪽으로 치우칠 수 밖에 없음
해결
transform: translate(-50%,-50%) 를 해주면 해결됨
이렇게 하면 자기 자신의 x축 크기의 -50%만큼, y축 크기의 -50% 이동하므로 가운데 정렬이 됨
flex 양쪽 끝 정렬
문제 상황
display: flex를 하고 각 요소를 양 끝에 정렬하려고 하는데 justify-content: flex-start, flex-end로는 안됨
해결
이럴때 justify-content: flex-start로 왼쪽에 둘 요소를 두고 margin-right: auto를 주면 알아서 나머지 요소가 오른쪽에 붙음
참고:
https://seons-dev.tistory.com/entry/display-flex-%EC%A2%8C%EC%9A%B0-%EC%A0%95%EB%A0%AC
내비게이션 메뉴 밑으로 내려오게
문제 상황
내비게이션 메뉴를 만들고 햄버거 아이콘을 누르면 밑에 메뉴가 생기게 해야돼서 display: flex, flex-direction: column을 주었으나 아이콘과 메뉴박스가 가로로 일렬로 밖에 정렬이 안되는 문제가 생김
해결
이때 부모요소에 position: relative, 내비 박스를 position: absolute로 주고 top: 100%를 주면 부모 요소를 기준으로 top: 100%이므로 부모 요소 밑에 해당 요소를 배치할 수 있음
확대 축소하기
문제 상황
transform: scale(0.9)와 transition: all 0.3s linear를 이용해 마우스를 오버 했을 때 천천히 요소가 축소 되도록 함
그런데 축소 될때는 천천히 축소가 되는데 마우스를 뗐을 때 다시 확대될 때는 duration이 적용이 안됨
해결
축소,확대 시킬 해당 요소에 transition: all 0.3s linear를 주는게 아니라 그 부모 요소에 transition을 주면 확대될 때도 천천히 확대됨
참고: https://www.codingfactory.net/12584
블러 적용 안됨
문제 상황
-webkit-backdrop-filter와 backdrop-filter로 요소를 불투명하게 하려고 했는데 blur가 적용이 안됨
해결
블러를 적용시킬 요소에 바로 backdrop-filter를 주지말고 요소의 ::before에다가 컨텐츠와 똑같은 크기로 요소를 생성해 블러를 줘서 해결함
근데 왜 이렇게 해야 되는지는 잘 모르겠음..
링크 밑줄 효과 주기
문제 상황
링크에 마우스 오버했을 때 밑줄이 애니메이션 효과처럼 나타나게 하고 싶음
일단 링크에 있는 원래 밑줄은 text-decoration: none으로 지움
그리고 그 밑줄을 따로 decoration 할 수 있는 속성이 있는지 찾아 봤는데 그런건 없고 그냥 ::after로 밑줄을 만들어 줘야되는 것 같음
해결
a::after에 width: 100%로 컨텐츠와 똑같은 너비로 밑줄을 만들어 주고 a에 position: relative, ::after에 position: absolute로 위치 적절히 조절해서 원하는 대로 밑줄 생성
마우스 오버하면 애니메이션 효과처럼 좌우로 밑줄이 나타나게 하는 방법은 처음에 a::after에 transition: all 250ms ease-out; left: 50%; width: 0;으로 밑줄을 중간에 위치 시키고 안보이게 해놓음
그리고 a:hover::after에다가 transition: all 250ms ease-out; left: 0%; width: 100%;을 하면 밑줄이 가운데에서 부터 양옆으로 서서히 나타남!!
⬇️ 아래 링크를 참고함, 다양한 효과가 나와있음
참고: https://sudal89.tistory.com/56
