시작은 괜찮다

판다마켓이라는 임의의 사이트 디자인을 만들어 보게 되었다
디자인은 figma를 통해 주어졌다
기본 요구사항은 모두 충족하는 것 같고, 심화 요구사항은 아직 내가 html,css에
익숙하지 않아서 손을 대지 않았다
1학기때 웹프로그래밍 수업 열심히 들을 걸...

아직 프론트 지식이 많이 부족하지만 생각보다 훨씬 재밌는 것 같다
그래도 손에 익고 있어서 금방 활용할 수 있을 것 같다

배포는 netlify를 통해서 배포하였다
미션1 제출물

앞으로는 내가 부족했던 부분과 그 부분을 어떻게 해결하려고 하였는지를
벨로그에 차근차근 작성해 나갈 예정이다

---

HTML

          <div> 
            <img src="img/panda.png" alt="panda img" class="section1_image">
          </div>

일부 세션에 이미지를 넣는 부분이었다. 난 처음에 div태그를 사용하지 않고 img만 사용했었는데 img태그의 레이아웃이나 스타일을 관리할 때는 div태그로 감싸주는 게 좋다고 한다

---

CSS

처음에는 figma사이트에 주어진 레이아웃 양식을 그대로 사용하였다
width,height 등등의 값들을 고정값으로 사용하니 브라우저 크기가 크거나 작아질 때,
요소들의 크기도 변화가 되어야 했는데 변하지 않았었다
그래서 일부분을 제외하고는 코드를 싹 다 지우고 새로 짰다

.section1_image {
  max-width: 100%;
  height:auto;
  position: relative;
  top:4px;
}

아직은 기초이기에 애를 먹는 코드는 없었지만 유용하게 사용할 것 같은 부분이다
내 코드는 원래 width:100%, height:고정값(ex: 100px)을 입력해뒀었다
그렇게 하니까 브라우저 사이즈에 변화가 생길 때, 사진의 가로 사이즈만 들쭉날쭉해져서
보기 흉한느낌?이 들었다, 그러다가 서칭을 통해 height:auto를 적용하였고,
덕분에 이미지 사이즈의 가로 세로 비율을 자동으로 맞춰줄 수 있게 되었다
너비부분은 그냥 width:100%를 사용해도 될 것 같다

css 파일에 250줄 정도가 적혀있다
중복되는 부분은 자바 인터페이스 느낌으로 사용할 수 있게 하면서 코드를 줄이긴 했는데
아직 내 코드가 효율적인 코드인지는 모르겠다
계속 코딩하다 보면 알게 되겠지

오늘의 회고록은 여기서 끝