본문 바로가기

CSS

 (47)
Grid의 가로폭을 고정하는 방법 간혹 grid의 child에 따라서 grid의 자식들 width가 원하는 대로 나오지 않고 틀어지는 경우가 있다. 아래처럼 글자 속성에 white-space: nowrap;을 넣으면 글자가 줄바꿈되지 않고 한 줄로 길게 늘어지면서 부모의 grid-template-columns: 1fr 1fr 1fr; 속성을 무시한다. 가나다라 마바사 아자차카 타파하 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .item { border: 1px solid grey; border-radius: 10px; padding: 20px; white-space: nowrap; /* 줄바꿈 x */ } 이를 해결하려면 .item 옆..
CSS로 말줄임표를 넣는 방법 글자 데이터의 길이는 그때그때 다르기 때문에 레이아웃에 맞추기 위해 말줄임표를 써야하는 경우가 더러 있다. 한 줄부터 시작하여 여러 줄에서 말줄임표를 쓰는 방법에 대해서 다루겠다. 한 줄 말줄임표 한 줄 말줄임표는 간단하다. 다음 코드만 넣으면 된다. .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* display: block; */ } 글자가 길어져 block의 오른쪽 끝을 넘어가면 ...이 붙는다. 아무리 글자가 길어도 한 줄만 표시된다. 다만 display: block;일 때에만 작동을 하기 때문에 주의해야 한다. 두 줄 이상일 때의 말줄임표 webkit 계열의 브라우저인 경우 다음 코드를 넣으면 두 줄 이상..
큰 화면에서 본문 영역이 좌우로 더 이상 늘어나지 않고 가운데 정렬이 되도록 하는 방법 max-width 값을 줘서 화면의 좌우 크기가 특정 width를 넘어가더라도 더 이상 커지지 않도록 설정한다. 좌우의 margin 값을 auto로 두면 여유 공간이 생겼을 때 좌우 margin이 동일하게 늘어난다. 결과적으로 가운데 정렬이 된다. .container { max-width: 800px; margin: 0 auto; }
본문 왼쪽에 그림을 추가하는 방법 - CSS float float은 코드를 복잡하게 만들기 때문에 사용을 지양해야 한다. 그러나 책에서처럼 긴 문장의 왼쪽 위 구석에 그림을 추가하려면 사용할 수밖에 없다. 이미지에 float: left;를 넣으면 다음에 오는 문장 왼쪽 위에 위치하게 된다. 가나다라 마바사 .image { width: 50px; height: 50px; background: deeppink; float: left; } 다음에 오는 엘리먼트 중 하나에 clear: both;를 넣으면 해당 엘리먼트는 float에 영향을 받지 않는다. 결과적으로 그림 아래쪽에 문자가 오게 된다. 가나다라 마바사 아자차카 타파하 .clear { clear: both; /* 또는 left */ } float 속성을 주면 부모 엘리먼트가 해당 엘리먼트를 인식하지 못하기..
이미지에 width와 height 값을 비율에 맞지 않게 넣더라도 찌그러지지 않게 하는 방법 에 width와 height 값을 동시에 넣으면 가로세로 비율이 정확히 맞지 않는 이상 이미지가 찌그러진다. 이를 해결하기 위해 CSS에 object-fit 속성을 넣으면 width와 height 조절 등으로 이미지의 크기가 달라지더라도 찌그러지지 않는다. object-fit: cover;로 할 경우 이미지 박스에 맞게 이미지 내용이 꽉 찬다. 비율도 유지 된다. 대신 가로 양쪽 끝이나 세로 양쪽 끝이 잘린다. 원본 그냥 조절했을 때 object-fit: cover;를 설정했을 때 .fit { object-fit: cover; }
스크롤에 반응하는 애니메이션을 만드는 방법 스크롤을 움직여 아이템이 나타났을 때 특정 애니메이션 효과를 주려면 AOS 라이브러리를 쓰는 게 편하다. michalsnik.github.io/aos/
SASS를 이용해서 특정 색의 밝기를 비율로 조절하는 방법 .button--lighten { background: lighten(#6b717f, 20%); } .button--darken { background: darken(#6b717f, 20%); } lighten과 darken 함수에 따라서 원래 색이 변환된다.
3D transform 예제 before hover .box { width: 200px; height: 200px; background: dodgerblue; } .box:hover { transform: perspective(200px) rotateY(45deg); transform-origin: 0 50%; } perspective는 화면을 바라보는 사용자와 box의 거리를 의미한다. transform-origin을 위처럼 설정해야 왼쪽 모서리를 축으로 설정할 수 있다.

티스토리툴바