본문 바로가기

스타일 적용2

word-break:break-all HTML 테이블 자동 줄바꿈 with 아이유 LovePoem word-break:break-all HTML 테이블 자동 줄 바꿈 with 아이유 LovePoem블로그 포스팅을 하다 보면 테이블의 크기 때문에 고민하게 되는 경우가 많습니다. 특히, 원하는 크기의 테이블을 만들고 싶지만, 안에 입력한 내용에 따라 테이블의 크기가 예상과 다르게 변경된다면 매우 답답할 수 있습니다. 예를 들어, 150px로 사이즈를 지정한 테이블에 긴 문자열이 들어가면 자동으로 늘어나게 되어 불필요한 스크롤 바가 생기거나 레이아웃이 깨질 수 있습니다.이번 포스팅에서는 테이블의 크기를 지정하고, 입력된 내용에 따라 자동으로 줄 바꿈이 되도록 설정하는 방법에 대해 알아보겠습니다.기본 테이블 크기 설정먼저, 테이블의 기본 크기를 설정하는 방법에 대해 알아보겠습니다. 다음은 150px의 너비.. 2024. 8. 2.
[SCSS] &:hover의 의미와 input label에 hover했을 때 효과 [SCSS] &:hover의 의미와 input label에 hover했을 때 효과 서론 CSS는 웹 페이지의 디자인과 레이아웃을 제어하기 위한 중요한 언어입니다. 특히 SCSS는 CSS의 확장으로, 보다 효율적이고 유지보수가 용이한 스타일 시트 작성을 가능하게 합니다. 이번 포스팅에서는 SCSS에서 자주 사용되는 &:hover의 의미와 input label에 hover했을 때 적용되는 효과에 대해 알아보겠습니다. &:hover의 의미 SCSS에서 &는 부모 선택자를 나타내며, &:hover는 부모 선택자에 hover 상태가 적용되었을 때를 나타냅니다. 이를 통해 해당 요소의 hover 상태에 따라 스타일을 지정할 수 있습니다. 예를 들어, .button { &:hover { background-color.. 2023. 9. 2.