💡 금일 타겟 : 섹션1 제이쿼리 반응형 모바일

문제점 및 해결

• calc 사용 문법
  • width: calc(100% - 80px); width: calc(100% / 6);
• 모바일 사이즈시 이미지 구성 포지션값의 기준점.
  • figure 을 이미지에 추가한 후 사이즈값을 0으로 하고 위치를 중앙배치 한 다음 이미지를 position: absolute로 정리하여 기준점을 알아보기 쉽게 하였습니다.

---

보더 패딩 포함 사이즈 가져오기

• .width() height() contents 사이즈 가져옴

$('.box').width(); 
$('.box').height(); 

• .innerWidth() 패딩사이즈 까지 가져옴

$('.box').innerWidth(); // 패딩 사이즈까지 가져온다
$('.box').innerHeight();

• .outerWidth() 패딩과 보더값까지 가져옴

$('.box').outerWidth(); // box 클래스의 border,padding값까지의 가로크기 값을 가져온다
$('.box').outerHeight(); // box 클래스의 border,padding값까지의 세로크기 값을 가져온다
// width, height 값 122

• 사진 회전시 사이즈값은 그대로이고 내용만 바뀜
  • 부모에게 영역의 사이즈를 맞추고 flex로 중앙배치하여 특정 강제로 부모영역 튀어나오지 않도록 함.

성과

💡 섹션1 성과 달성. 섹션2 css ,pc 진행 도중에 끝났습니다. 모바일 다른 부분이 많아서 새로 html 추가 진행 필요합니다.