편집 기록

야무 강사님!!!

제가 미션 1-6에서 대실과 숙박 관련 부분 코드를 다음과 같이 작성했습니다.

<div>
  <p>
    <span class="bolded-text">대실</span>
    <span class="color-grey">
      <small>최대 4시간</small>
      <mark class="color-pink">회원가</mark>
    </span>

    <span class="price-before-in-grey">
      <small>
        <s>35000</s>
      </small>
    </span>
    <span class="larger-text-bolded">30,000원</span>
    <br>

    <span class="boded-text">숙박</span>
    <span class="smaller-time"></span>
    <span class="color-grey">
      <small>21:00 ~</small>
    </span>
    <mark class="color-pink">예약가</mark>
    <span class="price-before-in-grey">
      <small>
        <s>70000</s>
      </small>
    </span>
    <span class="larger-text-bolded">55,000원</span>
  </p>
</div>

제가 저렇게 span 요소를 쓴 것이 나중에 css 파트에서 수정을 줄 때를 고려(?)한답시고 저렇게 작성을 하였는데, 저러면 너무 지저분한 코드들이 되어버리는 것일까요?

그리고 저런 식으로 div 요소를 사용하여 묶어주는 것이 옳은 것일까요? 사실 다른 웹사이트들을 가서 코드를 열어보면 div 요소를 정말 매우 많이 사용하던데, 강사님께서 영상에서 말씀해주셨던 상황이 아닌 것 같음에도 div 요소를 쓰는 곳도 많아 보였습니다.

또 하나 질문할 것이, html 구조 작성을 할 때 제가 위에 쓴 small 요소라던지 s 요소들은 다 css에서 구현이 가능하기 때문에 굳이 해주지 않고 정말 구조적인 것만 신경을 쓰는 것이 옳은 일인가요? 아니면 html 구조 작성 단계에서도 최소한의 시각적 변화는 주는 것이 옳은 것인가요?

제 마지막 질문은

<img 
  src="https://s25.postimg.cc/yt3i1ektr/gps-pointer.png" 
  width="10" 
  height="10" 
  alt="GPS-pointer">

<span class="text-color-grey-align-right">
  <small>
    <data value="1.4">1.4km</data>
  </small>
</span>

미션에서 화면 오른쪽에 위치한 gps모양과 1.4km를 표현하기 위해 만든 div 요소인데, 저 1.4km를 p 요소로 감싸주어야 할까요? p 요소로 감싸주게 되면 이지미의 밑으로 내려가서 제가 일단은 감싸지 않았습니다. 그리고 이미지의 사이즈도 사실 html 구조 마크업을 할 때 수정 안해도 무방한가요?

만약 괜찮으시다면 https://codepen.io/kim123hj/pen/ZjzGXL 저의 코드펜 보시고 잘못된 부분이나 개선점이 있는지 말씀해주시면 감사하겠습니다!