[CSS] 넘치는 텍스트 컨텐츠 숨기고 '...' 찍기

아래는 팀 프로젝트를 하면서 가수 리스트를 보여주는 컨텐츠에 더미 데이터를 넣은 것이다. (사진과 가수명은 일절 관계가 없습니다...) 가수 이름을 길게 넣었더니 아래 사진과 같이 가수 이름의 길이만큼 여러 줄로 늘어나 미관이 좋지 않았다. 다른 블로그를 참고해 간단하게 수정했다. 아래 코드를 전부 넣어주면 된다. white-space: nowrap; //줄바꿈 방지 overflow: hidden; //넘치는 텍스트 숨기기 text-overflow: ellipsis; //말줄임 기호(...)넣기 그럼 대부분의 경우 잘 작동할 것이다. + 그런데 나의 경우 위 코드를 태그 안에 넣었더니 아래와 같이 오히려 옆으로 침범하는 현상이 발생했다. 왜일까. 코드를 까보자. 우리 팀은 스타일드 컴포넌트를 사용하는데,..

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 7. 12.
• textsms

[CSS] filter: blur() 와 backdrop-filter:blur()

css를 만지다가 배경을 블러처리 해야 하는 일이 생겨서 filter 와 backdrop-filter를 써보게 되었다. 내가 만들 것과 팀원분이 만든 것의 디자인이 비슷하기 때문에 코드를 복사한 후 div박스에 backgroundImage를 주고 전체를 감쌌다. backgroundImage를 인라인 스타일로 준 이유는 나중에 props를 뚫기 쉽게 하기 위해서다. (추후 이미지가 계속 변경되어야 함) 처음엔 백그라운드 이미지에 바로 filter: blur() 처리를 했고 결과는 이랬다. 안에 있는 모든 요소가 블러처리 된다. 찾아보니 많이 사용되는 요소 중에 backdrop-filter라는게 있었다. 블러처리할 요소 바로 안쪽 태그에 backdrop-fliter를 주면 배경만 블러 처리 할 수 있다. 백..

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 7. 12.
• textsms

[CSS] 유용한 CSS 초기 설정

*{ Margin: 0; Padding: 0; Box-sizing: border-box; } css를 본격적으로 시작하기 전에 위와 같이 전체 설정을 주면 인라인 박스, 블록 박스 등 각각의 요소가 가지고 있는 고유의 margin, padding 사이즈를 0으로 통일해주기 때문에 추후 사이즈를 설정하기에 편리하다. box-sizing은 박스 크기를 계산하는 기준을 설정하는 것으로 border, 즉 테두리를 기준으로 사이즈를 계산하겠다는 뜻이다.

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 3. 22.
• textsms

[CSS] 박스 크기가 실제 설정한 값보다 클 때

box-sizing: border-box padding, border 까지 합친 크기로 적용됨. /*ex*/ p{ box-sizing: border-box; width: 500px; height: 500px; } /*컨텐츠만의 크기가 아닌 padding, border까지 포함한 500px이 됨*/

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 2. 15.
• textsms

[CSS] 컨텐츠가 박스 밖으로 넘칠 때 (overflow)

overflow:auto 박스보다 컨텐츠가 커서 넘칠 경우 박스에 스크롤 생성 overflow-x, overflow-y 스크롤 방향 설정 overflow:hidden 넘치는 컨텐츠 숨기기

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 2. 15.
• textsms

[CSS] px 와 rem

지금까지 폰트 사이즈를 항상 px로 지정했는데 앞으로는 rem을 사용해보아야 할 것 같아서 방금 배운 것을 적어놓는다. px: 고정된 크기 단위. 사용자가 글자 크기를 변경하지 못 함. 사용자의 환경에 따라 다르게 보일 수 있음. 스마트폰같은 크기가 작고 고해상도인 디바이스에서는 모니터의 한 점과 1px의 크기 차이 때문에 흐릿하게 보일 수 있음. rem: root(기준)크기 = 1rem. root크기를 기준으로 크거나 작게 설정할 수 있음 (ex 2rem, 0.4rem...). 사용자가 지정한 폰트사이즈를 기준으로 디바이스마다 다른 크기로 적용됨. em: 부모 요소를 기준으로 폰트사이즈가 정해지므로 다루기 어려움

• format_list_bulleted SW공부/HTML&CSS
• · 2023. 2. 15.
• textsms