띠띠의 개발오답노트

HTML·Style/CSS

• 텍스트의 길이가 over됐을 때 CSS에서 '...' 처리하기 (text-overflow: ellipsis)

  HTML·Style/CSS 2023. 11. 27. 17:22

  title이 일정 높이를 넘어갈 경우 "..."로 처리되도록 하려면 아래의 코드를 추가하면 된다. .title { max-width: 300px; height: 60px; overflow: hidden; white-space: nowrap; /* 텍스트가 한 줄로만 나오도록 설정 */ text-overflow: ellipsis; /* 초과하는 텍스트에 "..." 추가 */ } 하지만 나는 두번째줄부터 ... 처리가 되길 원했기 때문에 텍스트를 최대 2줄까지만 표시하도록 하는 속성을 추가하였다. .title { font-size: 16px; max-width: 300px; height: 55px; padding: 4px 12px; white-space: normal; overflow: hidden; tex..

  Read More
• [CSS] 박스에 이미지를 딱 맞게 하려면?

  HTML·Style/CSS 2023. 10. 18. 11:27

  1. 박스 사이즈에 맞게 설정 .image-box { margin: 12px 0; width: 100%; height: 530px; overflow: hidden; /* 넘치는 부분 숨기기 */ } .image-box img { width: 100%; /* 이미지를 부모 요소에 맞게 확장 */ height: auto; /* 가로세로 비율 유지 */ display: block; /* 인라인 요소로 설정된 이미지를 블록 요소로 변경 */ } 2. 이미지가 보이는 위치를 조절 이미지를 정가운데로 조절하려면 아래의 속성을 추가하면 된다. .image-box { ... position: relative; /* 부모 요소를 relative로 설정 */ } .image-box img { ... position: ab..

  Read More
• 미디어쿼리를 최소화하여 반응형 작업하기

  HTML·Style/CSS 2023. 5. 22. 01:14

  미디어쿼리를 최소화하고 반응형 작업을 수행하면, 코드의 가독성과 유지보수성을 향상시키며, 웹 페이지의 성능을 개선할 수 있다. 미디어쿼리를 최소화하는 방법은 어떤 것들이 있을까? 1. grid와 flex 사용 위와 같은 레이아웃 기술을 사용하면 미디어 쿼리를 사용하지 않고도 유연한 레이아웃을 만들 수 있다. 2. mobile first 구성 모바일 퍼스트(mobile first)란 사용자 경험(UX)을 디자인 할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것이다. 루크 로블르스키(Luke Wroblewski)가 최초로 주장한 철학이자 전략이며, 반응형 웹 디자인을 기반으로 한 개념이다. 초기 스타일링을 모바일에 맞추고 큰 화면에 추가적인 스타일을 적용하면, 모바일 기기에서는 불필요한 미디어 쿼..

  Read More
• animation 성능 개선 방법

  HTML·Style/CSS 2023. 5. 22. 00:49

  ✅ 'transform' 사용 시 3D로 변환하는 이유 요소를 3차원 공간에 배치할 수 있다. 이는 요소 간에 깊이 있고 생동감 있는 animation을 만들어 준다. 요소를 rotate-, scale, skew 등의 속성을 사용해 회전, 확대/축소, 기울기 등 다양한 방식으로 변형이 가능하다. 3D 변환은 GPU 가속을 사용하여 렌더링되므로 animation의 성능을 향상시킨다. GPU는 병렬 처리 능력이 뛰어나며, 3D 변환에 최적화 되어 있기 때문에 더 많은 animation을 부드럽게 처리할 수 있다고 한다. 요소를 별도의 레이어로 생성할 수 있다. 요소의 변경 사항이 다른 요소에 영향을 미치지 않고 독립적으로 렌더링 될 수 있다. 즉, 3D 변환을 사용하면 animation에 더 생동감을 주고,..

  Read More
• [display] flex VS grid

  HTML·Style/CSS 2023. 5. 19. 01:54

  ✅ flex 1차원 레이아웃 : 한 번에 하나의 축(가로 또는 세로 방향)을 조작하여 유연하게 배치할 수 있다. 주 축을 따라 요소를 정렬하고, 요소의 크기를 자동으로 조절하고, 간격을 조정하기 쉽다. 단순한 구조와 정렬이 필요한 경우 적합하다. 참고) https://css-tricks.com/snippets/css/a-guide-to-flexbox/ A Complete Guide to Flexbox | CSS-Tricks Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the..

  Read More