[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] CSS

Today I Learn - 2024.05.08

* sr-only (Screen Reader Only)

- 디자인상으로 화면에 표시되지는 않지만 스크린리더로는 접근이 가능하여 스크린리더 사용자에게 필요한 정보를 제공

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  clip: rect(0 0 0 0);
}

---

* background

💬 예시

.box {
  width: 300px;
  height: 300px;
  background-image: url("이미지경로");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  
  /* 합치면 아래와 같이 사용 */
  background: url("이미지경로") no-repeat center center /cover;
}

✏️ 결과

---

* 가상요소선택자

(1) ::before : 요소의 내용 앞에 컨텐츠 추가

(2) ::after : 요소의 내용 뒤에 컨텐츠 추가

- background-color를 넣었을 때 결과처럼 나오는 걸 보니 inline 요소

- 가상요소선택자는 블럭이 되지 않음 → 마크업으로 한 것이 아니기 때문

- 장식의 목적을 갖고 있음 → 텍스트 변경할 때는 쓰지말자!

💬 예시

  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Dolorem aliquam ut nostrum nulla facilis quas dolor? 
    Soluta rerum nam voluptatum hic similique amet necessitatibus ullam reprehenderit
    adipisci natus, non possimus.
  </div>

.text::before {
  content: '앞쪽내용입니다'
}

.text::after {
  content: '뒤쪽내용입니다'
}

✏️ 결과

---

* animation

@keyframes textEffect {
  0% {
    font-size: 16px;
    color: red;
  }
  100% {
    font-size: 30px;
    color: blue;
  }
}

.text {
  animation-name: textEffect;
  animation-duration: 3000ms;
  animation-delay: 1000ms;
  /* 1초 후에 시작되며 3초 동안 textEffect가 실행된다. */
}

---

오늘 수업은 아는 내용들이여서 편하게 들을 수 있었다.

이론을 공부한 후 실습으로 배웠던 이론들을 적용해보면서 변화가 눈에 보이니 흥미로웠다.

어제 새벽에 잠을 제대로 못자서 마지막 수업에서 조금졸았다... 😥😥😥😥 컨디션조절 잘 해야지...

오늘 배운 이론들과 코드정리 후 조원분들과 같이 하기로한 클론코딩에서도 꼭 써봐야겠다.