레이아웃2 웹사이트 만들기/ImageType 03 사이트 만들기 _ 이미지 유형03 이번 시간은 이미지 유형 세번째 시간입니다. 5개의 이미지로 구성되어 있으며 마우스 오버시 아이콘과 내용이 출력되게 구성해 보겠습니다. 여태까지는 flex를 사용했지만 이번구조는 flex를 사용하게 되면 2-5번째 이미지를 한 박스로 묶어서 작업하다보니 추후에 불편할 수 있으므로 이번엔 grid를 이용해서 레이아웃을 작업할게요! 앞서 말씀드렸듯 이번 구조는 gird를 이용해서 작업했습니다. 이번 구조는 와이드웹구조라서 기존에 사용하던 1160px의 구조로는 구현할 수 없습니다. 그래서 사용한게 다음과 같은 속성값입니다. .container-fluid{ width: 100%; padding: 0 100px; box-sizing: border-box; } 와이드 웹이다보니 .. 2022. 8. 21. 미디어 쿼리 미디어 쿼리 해상도에 따라 CSS를 분기시키는 반응형 웹에서는 없어서는 절.대 안되는 기법입니다. 태블릿,모바일기기 마다 가로폭이 다른데 크롬브라우저의 경우 개발자도구(F12)를 열고 Toggle device Toolbar를 눌러 기기마다 해상도를 확인할 수 있고 기기 모델도 추가 가능합니다. 다음 트로이(http://troy.labs.daum.net/)에서는 실제 작동 화면을 확인할 수 있습니다. 미디어 쿼리는 아래와 같은 상황에 사용할 수 있습니다. ▷ CSS @media와 @import .@규칙을 사용해 특정 조건에 따라 스타일을 적용할 때 ▷ HTML요소에 media 특성을 사용해 특정 매체만 가리키게 할때 ▷ Window.matchMedia()와 MediaQueryList.addListener(.. 2022. 8. 14. 이전 1 다음 반응형
