You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🌟 @media는 이제 그만 ! 최신 @container 사용법
컨테이너 쿼리 vs 미디어 쿼리 컨테이너 쿼리는 미디어 쿼리와 같이 문서의 스타일을 반응형으로 지정할 수 있다. 이 둘의 작동 방식은 유사하지만, 차이점은 어느 것을 기반으로 동작되냐는 점이다. 예를들어 미디어 쿼리는 디바이스 또는 미디어 유형을 기반으로 뷰포트에 의해 반응하지만, 컨테이너 쿼리는 페이지내의 특정 컴포넌트 요소 기반으로 반응한다. 아래 그림을 보면 이해가 될텐데, 미디어 쿼리는 브라우저 너비를 기준으로 반응하지만, 컨테이너 쿼리는 문서 내 각 요소 의 크기나 모양에 따라 반응형 쿼리를 지정할 수 있다는 점에서 상위 호환이라고 할 수 있다. 컨테이너 쿼리가 없었을 시절에는 자바스크립트의 Resize Observer 기술을 통해 특정 요소의 크기 변화를 관찰하여 스크립트로 스타일링을 해주어야..
🔮 BootStrap5 반응형 시스템 - 컨테이너
컨테이너(Container) 컨테이너는 Bootstrap에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요합니다. 컨테이너는 내용을 포함하고 채우고 (때로는) 내용을 중앙 정렬하는 데에 사용됩니다. Bootstrap에는 세 가지 다른 컨테이너가 있습니다: 각 반응형 중단점에 max-width를 설정하는 .container 모든 중단점에 width: 100%를 설정하는 .container-fluid 정의된 중단점까지 width: 100%를 설정하는 .container-{breakpoint} 아래 표는 각 중단점에서 각 컨테이너의 max-width가 원래 .container와 ‘.container-fluid’가 어떻게 비교되는지 보여줍니다. 브라우저 반응형 컨테이너 예시 아래 링크 홈..
