개요
css를 다루면서, 생각한대로 작동하지 않았던 사건 및 그를 해결한 방안을 작성한다.
한번 해결하고 이해한 것이더라도 삭제하지 않고 기록해놓는 오답노트로 활용하고자 한다.
▶위치 벗어남
image와 타 요소의 위치를 맞췄음에도 불구하고 맞지 않을 경우
(image 자체의 오류)💡 css 에서 img{vertical-align: top;}입력
▶이미지 크기 안 맞음
img크기가 부모요소 크기를 넘어버림
(img에게 width나 height를 지정해, 크기를 바꿔서 발생)💡 부모요소한테 overflow:hidden
💡 부모요소의 background로 img를 지정하고 background-position으로 조정
💡 object-fit을 지정
img 비율이 깨짐
(img의 부모요소에게 width나 height를 지정해, 크기를 바꿔서 발생)💡 width나 height중 맞추고 맞추고 싶은 곳에 n%; 지정
💡 width와 height를 100%로 두고 object-fit: cover; 지정
▶회전의 축 지정
💡 scale(1,0); 혹은 scale(0,1); 에서 scale(1,1); 와 같이 지정하면
회전의 축은 X축/ Y축이 된다.
💡 width: 0;에서 width: 1;로 변환 시켜보기
💡 transform: translate(-50%, -50%) rotate(45deg);을 지정하면 중심 축을 기준으로 45도 돈다.
▶top bottom left right
position: absolute;
top: 30px;
bottom: 30px;
left: 30px;
right: 30px;위와 같이 top과 bottom, left와 right를 동시에 지정한 경우
width;와 height를 주지않아야 한다. 각 요소에서 구한 값을 토대로 width와 height가 구해진다.
💡 width와 height를 지정하고 싶다면, top과 bottom 중 1개의 요소, left와 right 중 1개의 요소만 사용해야한다.
💡 width를 지정하고 싶다면 top과 bottom은 동시에 지정해도 되지만 left와 right 중 1개의 요소만 사용해야한다.
💡 height를 지정하고 싶다면 left와 right은 동시에 지정해도 되지만 top과 bottom 중 1개의 요소만 사용해야한다.
▶::before 혹은 ::after
💡 content: "";를 제대로 입력했는지 확인
▶hover
.class li:hover 했는데 안 먹힐 경우
❓ .class ul li:hover 로 지정하니까 먹혔다... 진짜 왜지?
💡 a:link / a:visited / a:hover / a:active 순서로 작성했는지 확인//
link나 visited가 hover보다 뒤(아래 구문)에 위치하면 먹히지 않는다.
▶align-content: center;
안먹힐 경우...
💡 요소 및 상위요소의 height를 center로 옮기고자 하는 item 들의 height 총계보다 높게 설정할 것
▶Z-index;
❓ 먼저 작성된 형제요소B의 :hover 에게 transform 속성을 지정했더니 요소A가 보이지 않게 되는 문제가 발생
(👉요소A에 z-index:1을 지정하였더니 :hover 하기 전처럼 요소A가 요소B 위에 겹쳐짐)
링크를 참고하자
