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

Today I Learn - 2024.05.09

* input type의 비밀?

- 

input의 type에 따라 모바일 환경에서의 키패드 모양이 달라진다?!* <input type="tel" /> 인 경우 모바일에서 숫자 키패드가 올라온다.* <input type="text" /> 인 경우 모바일에서 숫자+문자 키패드가 올라온다.

---

* icon을 쓸 때 주의점

- web font를 쓰기 위해 fontawesome을 많이 사용한다. 이 때, <i>가 아닌 <span>을 사용하도록 하자.

- <img>로 아이콘을 나타낼 때 대체텍스트를 비워둔다. (alt=" ") → 스크린리더가 읽지 않는다.

- CSS로 background-image로 넣기

---

* box-shadow

- 요소 박스에 그림자 효과를 넣는 속성이다.

.box {
  box-shaodw: 5px 5px 0 0 rgba(0, 0, 0, 0.7);
  /* box-shadow: x방향, y방향, blur, spread, color */
}

---

* focus, focus-visible

- 요소들을 focus 하다보면 outline이 생기는 경우가 많은데, 디자인상으로 없애는 경우가 많다.

- 하지만 접근성에 오류가 생기기 떄문에 함부로 없애면 안된다.

- focus-visible을 사용하면 키보드로 접근하는 순간 outline이 생긴다. (단, 클릭할떄는 생기지 않음)

.button:focus {
  outline: 0;
}

.button:focus-visible {
  outline: 2px solid green;
}

---

* media query

- viewport의 너비에 따라 웹 사이트나 앱의 스타일을 수정할 때 사용한다.

/* 320px ~ 600px */
@media (min-width: 320px) and (max-width: 600px) {
  body {
    background-color: red;
  }
}

/* 600px ~ 1024px */
@media (min-width: 600px) and (max-width: 1024px) {
  body {
    background-color: yellow;
  }
}

/* 1024px ~ */
@media (min-width: 1024px) {
  body {
    background-color: blue;
  }
}

---

오늘 component로 나누어서 실습을 했는데 역시 실습을 해서 그런가 너무 재밌었다!!

분명히 아는것도 있지만 모르는게 훨~~~~~씬 많아서 배울수록 너무너무 신기하다.