1차 완성

모바일 버전

max -width : 768px
각 영역 width : 704px

태블릿 버전

max - width : 1024px
각 영역 width : 800px

PC 버전

max-width : 100%
각 영역 width : 1440px

어려웠던 부분

프로젝트 영역에서의 정렬에 어려움이 있었다.

두개의 이미지가 사용되었고 위에 있던 이미지는 마우스가 호버가되었을때 크기가 커지고 텍스트가 보여야하는 기능이 구현되어야했다.

처음에는 배경으로 들어갈 이미지와 위에 올려진 이미지를 position relative/ absoulte 속성을 사용하여 위치를 맞추었었다.
그러나 반응형으로 적용하려 해보니 position 속성으로 하게되면 다시 위치를 조정해야 하는 번거로움이 생겨서 멘토분에게 질문결과 배경이미지를 background 로 해서 적용하는게 좋겠다라는 조언을 얻어 상단에 있는 주황색 이미지를 일러스트로 배경이미지로 넣기 쉽게 반은 투명하게 반은 기존 시안에서 얻은 이미지로 하나의 이미지를 만들어 background로 넣어 적용 하였다.