TIL * 2022.01.30

🔷 CSS

z-index

• box가 겹치는 순서를 지정할 때 사용하는 속성으로, 기본값은 auto
• position이 static이 아닐 때 지정 가능
• 순서값이 없을 경우 코드 상 순서에 따라 적용
• 부모가 z-index 값을 가질 경우에는 부모 안에서만 유의미

코드 유효성 검사
https://validator.w3.org/#validate_by_uri
html 및 css가 익숙하지 않을 때는 유효성 검사를 하는 습관을 들이자.

미디어쿼리

• 각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것
• @media (... /* 참이면 규칙 적용, 거짓일 시 적용 X */) { }
@media screen { ... } /* media 타입이 screen일 때 적용 */
@media screen and (min-width: 768px) { ... } /* 미디어 타입이 screen이고 width가 768px 이상일 때 적용 */
@media (min-width 768px) and (max-width: 1024px) { ... } /* and는 모든 연결식이 참일 때 적용 */
@media (color-index) /* 미디어 장치가 color-index를 지원할 때 적용 */
@media screen and (min-width 768px), screen and (orientation: portrait), { ... } /* 쉼표로 연결된 것 중 하나라도 참이면 스타일 규칙 적용 */
@media not screen and (min-width 768px) /* 하나의 미디어 쿼리 전체를 부정 */

미디어 쿼리를 이용하여 작성된 반응형 사이트를 모아놓은 사이트 https://mediaqueri.es/

viewport

• 모바일 브라우저들은 viewport(뷰포트)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작하였다. 여기에서 실제 우리가 보는 스마트폰의 스크린 사이즈와 브라우저가 화면을 나타내는 가상의 화면 사이즈의 차이가 생겨난다.
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> >

💻 Today I made