css5 [CSS] 텍스트 길이가 넘칠때 표안에 텍스트가 들어갈때 길이가 길면 아래의 이미지 처럼 표길이가 길어지는 현상이 있다. 텍스트의 길이를 제한하여 표의 길이를 일정하게 유지하게 하기 위해서 사용하는 CSS max-width: 400px; /* 원하는 최대 너비로 조정 */ white-space: nowrap; /* 텍스트가 한 줄에만 표시되도록 */ overflow: hidden; /* 넘치는 부분을 숨김 */ text-overflow: ellipsis; /* 텍스트가 넘칠때 '...'을 표시 */ 위 CSS를 적용하면 아래 이미지 처럼 표 넓이를 넘어가는 텍스트는 ...으로 표기가 된다. 2023. 12. 1. [CSS] calc() calc() /* property: calc(expression) */ width: calc(100% - 80px); - css 함수를 사용하면 css 속성의 값으로 계산식을 지정할 수 있다. - calc()함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종값이 됩니다. - 표준 연산자 우선순위 따른다. 주의사항 -0으로 나누면 HTML 구문 분석기에서 오류 발생 - +와 - 연산자는 좌우에 공백이 있어야 한다. - * 와 / 연산자는 좌우 공백을 요구하지 않지만, 일관성을 유지 하자 2023. 5. 25. [CSS] @-규칙 https://developer.mozilla.org/ko/docs/Web/CSS/At-rule#%EC%A1%B0%EA%B1%B4%EB%B6%80_%EA%B7%B8%EB%A3%B9_%EA%B7%9C%EC%B9%99 @-규칙 - CSS: Cascading Style Sheets | MDN @-규칙은 식별자(identifier)가 뒤따르는 at 기호('@' (U+0040 COMMERCIAL AT))로 시작하는 CSS 문이며 다음 세미콜론(';' (U+003B SEMICOLON)) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함합니다. developer.mozilla.org 2023. 5. 25. [CSS] z-index z-index -요소의 스택 순서를 지정한다. - 스택 순서는 요소가 큰 순서가 제일 앞에 온다. 주의사항 -z-index가 동작하는 position 요소 -position : absoulte, relative, fixed, sticky 2023. 5. 24. 이전 1 2 다음
