1. 반응형 UI 완성

📌 white-space 🔗참고자료

• 영역을 넘어가면 말줄임표 표시
  공백 문자 처리 방법
  한줄만 사용 가능
  normal default
  nowrap 줄바꿈 금지
  pre 줄바꿈은 개행 문자와 br 요소에서만 일어난다.
  pre-wrap pre와 동일하지만 한 줄이 너무 길어서 넘칠 경우 자동으로 줄바꿈
  

📌 text-overflow 🔗 참고자료

• 숨겨진 텍스트 처리 방법(말줄임표)
  ellipsis 텍스트가 영역을 넘치면 …
  clip 텍스트가 영역을 넘치면 잘린 형태로 보여줌
  white-space, overflow 같이 사용한다.

📌 data-

• 사용자 정의 속성
  일반 title은 커스텀이 불가능하다.
  data-이름

📌 attr(속성 이름) 🔗 참고자료

사용자 정의 속성 불러오기

📌 counter 속성 🔗 참고자료

• CSS로 숫자를 생성하면서 자동으로 번호를 매기는 역
• counter-reset 숫자 초기화, 주어진 값으로 재설정
  숫자를 지정하지 않을 경우 0이 기본 값
  

counter-reset : custom-ident(카운터 이름) / 숫자

• counter-increment 설정한 값으로 증가시키는 역할
  숫자를 지정하지 않을 경우 1이 기본값
  counter-increment : custom-ident(카운터 이름) / integer(증가할 숫자 값)

📌 clamp() 🔗 참고자료

• 정의된 최소 값과 최대값 사이의 범위 내에서 중간 값을 고정한다.
  min : 최솟값, val:범위내에서 선호나는 결과, max: 최댓값
  보통 val는 뷰포트위드(vw)로 작성한다.
  clamp(min, val, max)

📌 minmax() 🔗 참고자료

• 최솟값과 최댓값 범위 내에서 값을 유연하게 처리한다.
  minmax(min, max)

📌 object-fit 🔗 참고자료

• <img>나 <video> 요소와 같은 콘텐츠 크기의 조절 방식
  contain 가로세로 비율을 유지하면서 콘텐츠 박스에 맞게 조절
  cover 가로 세로 비율을 유지하면서 콘텐츠 박스 가득 채움, 가로세로 비율이 일치하지 않으면 일부 잘려나감
  fill 콘텐츠 박스 크기에 맞춰서 크기 조절, 비율 이상해짐
  scale-down none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택한다.
  none 콘텐츠 크기 조절 하지 않음

📌 object-position 🔗 참고자료

• 안보이는 영역 콘텐츠 정렬 방식
  50% 50% , default

📌 shape-image-threshold 🔗 참고자료

• css 요소의 부동 영역을 정의한다.
  이미지 모양에 포함된 픽셀을 설정한다.

📌 shape-outside 🔗 참고자료

• 인라인 콘텐츠를 둘러싸야 하는 모양을 정의한다.

📌 shape-margin 🔗 참고자료

• CSS 모양의 여백을 설정한다.
  여백을 사용하면 도형의 가장자리와 주변 콘텐츠 사이의 거리를 조정할 수 있다.

---

2. SASS 설치

🔗 참고자료

1. 설치하기 npm i sass

2. 설치 완료 후 3가지 폴더 있는지 확인

$ ls -a
./  ../  node_modules/  package.json  package-lock.json

---

3. 회고

으아...반응형 UI를 완성했다. 어느새 다 완성이 되버렸다니! 시간이 참 빠르다. 그런데 오늘도 역시나 오전수업까지는 괜찮았는데 오후수업부터는 완전 멘붕... 머리 속에 들어온 내용이 없었다. 휴강 기간동안 복습도 하고 혼자 UI도 만들어보면서 공부해야겠다.

벌써 다음주부터는 SASS 를 나가는데 전혀 지식이 없는 상태라 너무 걱정된다. CSS 도 어느정도 알고있어서 초반까지 괜찮았지 뒷부분부터는 알아들은 내용이 거의 없어서 너무 걱정된다. 주말동안 SASS 도 예습해야 하고 참 할일 많다... 긍정적인 마음으로는 이렇게 공부하면 4개월 뒤에 나는 엄청 성장해있을 것 같지만 너무 힘들다ㅠㅠㅠㅠ 나만 수업 못알아듣는것 같다. 못알아듣는 만큼 남들보다 더 열심히 해야지.. 화이팅🔥🔥🔥🔥