Front-end/CSS

[CSS] 상하반전, 좌우반전, 크기조절 - scale, scaleX, scaleY 속성

scale은 보통 크기 조절을 할 때 쓰는 속성이라고 알고 있을 것이다. 그런데 scale로도 상하좌우 반전을 할 수 있다. 음수 값을 주면 된다. 상하반전 - scaleY transform: scaleY(-1); 좌우반전 - scaleX transform: scaleX(-1); scale로 한번에 모두 설정 * 반전도 시키면서 크기 조절을 하고 싶으면 값을 크거나 작게 조절 하면 됨 상하좌우 모두 반전 transform: scale(-1); // 또는 transform: scale(-1, -1); 좌우만 반전시키고 싶을 때 transform: scale(-1, 1); 상하만 반전시키고 싶을 때 transform: scale(1, -1); 좌우로 2배로 늘리면서 높이는 0.5배로 줄이는 동시에 상하반전 ..

[CSS] a 태그 padding, margin 제거하기 (React router dom의 Link 태그에도 해당)

a 태그를 다른 태그의 내부에 집어넣으면 위 아래에 미묘하게 padding이 생긴다. 또 a 태그를 inline 혹은 inline-block으로 만들었을 때 좌우로 margin이 생겨서, 좌우로 딱 붙이고 싶어도 붙지않는 경우가 생긴다. 이럴 때는 a 태그를 감싼 부모 태그에 font-size: 0을 준다. React에서 react-router-dom의 태그를 사용하고 있다면 Link 태그의 부모에도 마찬가지로 font-size: 0을 주면 된다.

[CSS] left로 가운데 정렬하기

left 속성이란? left 속성은 position이 static이 아니라 relative, absolute, fixed일 때 사용할 수 있다. static일 때 사용하면 아무 일도 벌어지지 않으므로 꼭 position 속성과 함께 사용되어야 한다. left는 absolute, fixed일 때는 브라우저 내부의 칸으로부터 지정한 만큼 떨어질 수 있게 한다. .div1 { left: 50%; transform: translateX(-50%); } 좌상단의 꼭짓점을 가운데에 맞추고, 좌상단 꼭짓점을 기준으로 했기 때문에 오른쪽으로 약간 쏠린 몸체를 가운데로 옮기기 위해 엘레먼트의 반만큼 왼쪽으로 옮기기 위해 transform: translateX(-50%)을 준다.

[CSS] position과 transform 이용해 요소 가운데에 배치하기

{ position: absolute; // 혹은 fixed left: 50%; transform: translateX(-50%); } left로 가운데에 위치시킨다. 왼쪽 위의 꼭짓점을 기준으로 가운데에 위치하게 된 것이므로 몸체를 기준으로 가운데에 위치시키기 위해서 -50% (몸체의 반만큼 왼쪽으로)를 해준다.

[CSS] 모바일에서 오른쪽에 흰 여백 생기는 현상 (CSS, React)

html, body에 margin: 0을 하고 요소에 width: 100%을 줘도 오른쪽에 흰 여백이 생긴다면 어떤 요소의 width가 innerWidth를 넘었다는 뜻이다. html, body에 overflow-x: hidden을 해주면 가로 스크롤바와 오른쪽 여백이 사라진다. html, body { margin: 0px; overflow-x: hidden; } React라면 순수 html, CSS만 이용할 때와 마찬가지로 index.css 파일에 적용해주면 된다.

[CSS] 모달창 나타나는 애니메이션 (fadeIn)

모달 부분에 'animation: fadeIn 시간' 을 추가한다. fadeIn은 서서히 나타날 때, fadeOut은 서서히 사라질 때 쓰는 애니메이션이다. 그 다음, @keyframes fadeIn 안에 from, to(시작할 속성과 끝날 속성)을 적어준다. 그러면 animation에서 지정한 시간동안 from에서 to로 변하게 된다. 이 예제는 opacity: 0 (완전 투명), 크기 0.5 -> opacity: 1 (완전 뚜렷), 크기 1로 변하도록 애니메이션을 줘서 쫀득하게 모달창이 튀어나오는 효과를 준 것이다. .modal { animation: fadeIn 400ms; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.5); } to {..

[CSS] iframe 하단 여백 없애는 방법

iframe은 인라인 요소로 취급되므로 하단의 여백을 없애려면 display: block 속성을 주면 된다.

[CSS] 생소한 글자 관련 속성 모음

text-transform 글자를 소문자 또는 대문자로 바꿔주는 속성 uppercase: 모든 글자를 대문자로 lowercase: 모든 글자를 소문자로 capitalize: 단어의 첫 글자만 대문자로 letter-spacing 자간(글자간 간격) 조정 letter-spacing: 1px letter-spacing: -2rem word-spacing 단어간 간격(띄어쓰기 간격) 조정 word-spacing: 15px