드림코딩 유튜브 클론코딩 보고 새로 알게된점 + α

text-transform

css에서 대문자로 또는 소문자로 바꾸는 속성 기본값은 none

uppercase : 모든 글자를 대문자로 바꾼다  lowercase : 모든 글자를 소문자로 바꿉니다.

.channel .sub2 {
    text-transform: uppercase;
}
/* 사용하는 예시 */

텍스트 여러줄 ... (생략) 으로 하기

.ellipsis {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

text-overflow: ellipsis; 를 이용해서 생략을 해야하는데 이 문장 하나 만으로는 생략이 안된다.

overflow : hidden; 속성은 영역의 넘치는 요소를 숨겨준다. 

-webkit-line-clamp 속성은 영역 내의 지정된 라인 수로만 컨텐츠 내용을 제한 한다. 위에처럼 2줄부터 생략하고 싶으면 2를 써주면 되는거고 3줄부터 생략을 하고 싶다면 3이라고 쓰면 되는것이다.

display: -webkit-box 속성은 해당 영역을 box 형태로 관리되도록 한다

-webkit-box-orient: vertical 속성은 영역 박스의 내의 정렬을 수직으로 하도록 한다.

※ 참고 : https://deeplify.dev/front-end/markup/text-ellipsis

[HTML/CSS] 말줄임 표시 하는 방법: 1줄, 2줄 예제

단 조건이 있는데 너비가 고정적으로 되어있어야 하고 한줄일 경우에는 white-space: nowrap 필요합니다.

calc( )

반응형으로 만들다 보면 %로 값을 주기 애매하거나 크기를 따로 지정하는데 번거로움이 있다.

사칙연산 사용 가능 하고, 덧셈 뺄셈은 좌우 띄어쓰기를 해주어야 한다 

width: calc(100% - 80px);

font-size: calc(var(--medium)/2);

이런식으로 사용이 가능