메가박스 사이트만들기 학습일지#9 - 이벤트영역

이번에는 이벤트영역을 만들어보자.

 

완성모습

이부분은 그래도 여기 사이트중에서 가장 쉬운 부분이였던 것 같다.

물론, 이미 완성본이 있고 따라하다보니까 그럴수도있다. 처음부터 아무것도 없는상태에서 만들면 어려울것같긴하다.

 

이때 가장 중요하게 코드를 짜야되는부분은 이벤트 영역을 좌 우로 나누는것이다.

그리고 처음에 영역을 잡기위해 width , height 값을 넣었다면 배경색을 넣어서 영역을 확인하면서 코드를 짜는 습관을 들이자.

 

이번 사이트를 만들면서 반응형 이미지를 위해 사용하는 srcset 속성도 알아두자!

http://tcpschool.com/html-tag-attrs/img-srcset

코딩교육 티씨피스쿨

검색을 하다보니, 위 사이트를 들어가면 상세하게 예제코드가 되어있고 이미지도 확인해볼 수 있어서 참고용으로 좋은 것 같다.

 

반응형 웹에서 이미지를 지원하기 위해서는 미디어쿼리를 사용하는데, 반응형 이미지를 처리하기 위해 고려해야될 부분들이 많이있다.(해상도, 크기 등)

하지만 srcset과 sizes 속성을 이용하면 이부분들을 고려하여 반응형 웹에도 적용할 수 가있다.

 

해당 내용에 대해서 공부를 하기위해 여기저기 검색을 하면서 정리를 보기좋게 해둔부분이 있어

나도 내용을 참고해서 공부해보려고 한다. (적어두고 필요할때마다 찾아보다보면은 알게될거라 생각이 든다!)

 

이 속성들을 작성하면 브라우저는 다음과 같이 작동하게 된다.

1. 기기의 너비를 확인한다.
2. sizes 속성에 적은 미디어 조건문 중 어디에 해당하는지 확인한다.
3. 해당 조건문에 적힌 최적 크기를 확인한다.
4. srcset에 연결된 이미지들 중 해당 최적 크기와 가장 가까운 원본 크기를 가진 이미지만 불러온다.

 

간혹 이미지 작업하다보면은 원치않는 여백이 잡힐때가있다.

img 는 인라인 구조이기때문에 인라인구조는 폰트사이즈에도 여백이 잡힌다.

그렇기때문에 블럭구조를 바꿔주거나 폰트사이즈를 0으로 바꿔줘야한다. 하지만 폰트사이즈는 0으로 바꿔주면안되기때문에 블럭구조로 바꿔준다!