<CSS> TIL: 텍스트 수정(회전, 맞춤, 배경), 화면 높이 에러

CSS 텍스트 회전

1. display 속성값을 inline-block 으로 설정한다(inline 요소는 회전 불가능).

2. transform 속성값으로 rotate 값을 대입한다(rotate === rotateZ).

span {
  display: inline-block;
  transform: rotate(180deg);
}

 

CSS 문제 해결

< 수정해야 할 곳이 3군데 있음 >

1. Error: 화면 높이

🆖 현황 - height 속성을 100%로 맞추었지만 해당 요소의 컨테이너 밖으로 넘치게 되었음

🔑 해결방안 - header의 높이만큼 padding-bottom 속성값을 부여

.window {
  background-color: white;
  width: 80%;
  height: 80%;
  border-radius: 8px;
  padding-bottom: 32px;
}

 

2. Warning: 텍스트 맞춤

🆖 현황 - 'JULY'와 '5'를 space-between 적용하였고, '5' 혼자 저멀리 떨어져 있다.

🔑 해결방안 - 첫번째 박스의 텍스트들을 감싸는 div 요소를 하나 더 만들고, 'display: grid', 'grid-template-columns: min-content'를 적용하여 JULY 5가 멀어질 수 있는 범위를 제한하였다.

.first-box__wrapper {
  display: grid;
  grid-template-columns: min-content;
}

 

3. Warning: 텍스트배경

🆖 현황 - 'BILL WILSON [US]' 뒤로만 배경이 있으면 좋겠는데, 오른쪽 끝까지 배경이 입혀졌다.

🔑 해결방안 - 해당 span에 'width: max-content'를 적용하여, 배경의 폭을 내부 콘텐츠가 가질 수 있는 가장 큰 폭으로 설정하였다.

span:nth-child(5) {
  width: max-content;
  background-color: #a35233;
  color: white;
}

< 수정 후의 모습 >