HTML·Style
-
텍스트의 길이가 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..
-
[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..
-
Styled-components로 테마모드 변경하기(다크모드·라이트모드)HTML·Style/Styled Components 2023. 6. 21. 02:39
여태 createGlobalStyle을 공통된 전역 스타일을 지정할때만 사용했다. 테마모드를 적용할 생각을 왜 못했지? theme.ts 테마를 스타일링한다. export const lightTheme = { bgColor: "#fff", textColor: "#222", accentColor: "#12cbef", }; export const darkTheme = { bgColor: "#282c35", textColor: "#fff", accentColor: "#ffe246", }; export const theme = { lightTheme, darkTheme, }; export default theme; Global.tsx styled-reset을 추가 설치가 필요하다. import { createGl..
-
미디어쿼리를 최소화하여 반응형 작업하기HTML·Style/CSS 2023. 5. 22. 01:14
미디어쿼리를 최소화하고 반응형 작업을 수행하면, 코드의 가독성과 유지보수성을 향상시키며, 웹 페이지의 성능을 개선할 수 있다. 미디어쿼리를 최소화하는 방법은 어떤 것들이 있을까? 1. grid와 flex 사용 위와 같은 레이아웃 기술을 사용하면 미디어 쿼리를 사용하지 않고도 유연한 레이아웃을 만들 수 있다. 2. mobile first 구성 모바일 퍼스트(mobile first)란 사용자 경험(UX)을 디자인 할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것이다. 루크 로블르스키(Luke Wroblewski)가 최초로 주장한 철학이자 전략이며, 반응형 웹 디자인을 기반으로 한 개념이다. 초기 스타일링을 모바일에 맞추고 큰 화면에 추가적인 스타일을 적용하면, 모바일 기기에서는 불필요한 미디어 쿼..