"의미있는 구조화"에 대해 질문 드립니다.

Question

"의미있는 구조화"에 대해 질문 드립니다.

조회수 942회

html

fast-frontend

semantic

0

싫어요

야무 강사님!!!

제가 미션 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 저의 코드펜 보시고 잘못된 부분이나 개선점이 있는지 말씀해주시면 감사하겠습니다!

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 3 · Accepted Answer

안녕하세요!

kim123hj 님 ^ ㅡ ^ 질문에 답변 드립니다.

질문 1

CSS 디자인을 염두에 두고 작성한 마크업이 지저분 하지는 않나요?

<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>

답변 1

작성된 마크업의 지저분함을 논하기 이전에 CSS 클래스 이름을 먼저 거론하고 싶습니다. bolded-text, color-grey 이와 같이 어떤 꾸밈인지 명확한 것은 좋지만, 말 그대로 표현 만을 기술한 이름이라 좋은 사례라고 이야기 할 수 없습니다.

보다 좋은 클래스 속성 이름은 warning, info, error, success 와 같이 의미적이면서, 표현적인 부분을 함께 가질 수 있도록 작성 하시길 권하고 싶습니다.

예를 들어 아래 작성된 마크업과 같이 룸(Room)과 관련된 정보 이름을 토대로 하여 클래스 속성 이름을 작성하면 좋겠죠? small, s, mark 와 같은 요소를, 권장되는 의미를 반영하지 않고 보여주기 위한 스타일 용도로 사용하는 것은 좋지 않습니다. 꾸미고자 하는 스타일은 CSS로 스타일링 하면 됩니다. ^ ㅡ ^

<span class="room-type">대실</span>
<span class="room-rental-info">
  최대 4시간
  <span class="tag-membership">회원가</span>
</span>
<span class="room-rental-price-origin">35000</span>
<span class="room-rental-price">30,000원</span>

질문 2

다른 웹사이트 코드를 살펴보면 <div> 요소를 정말 많이 사용하던데, 이렇게 사용해도 되나요?

답변 2

의미있는 구조화 관점에서 보자면 제목, 단락, 목록, 인용, 표, 폼 같은 요소와 달리 <div>는 의미를 가지지 않기 때문에, 반드시 사용해야 할 요소는 아닙니다. <div>의 역할을 대부분 요소들을 묶거나, 꾸밈을 목적으로 사용합니다.

여기서 핵심은 요소를 묶거나 꾸밈으로 <div>를 사용하는 것은 나쁜 것이 아닌데, 의미적으로 마크업 해야 하는 것 또한 <div>를 사용하는 것은 문제가 됩니다.

예를 들어 버튼, 제목, 단락, 날짜 등 의미를 고려해 구조화 해야하는 것을 무시한 채, 모두 <div>로 작성하는 경우는 문제 입니다. <div>의 오용이나 남용이 되는 것이죠.

좋은 마크업

<button>...</button>
<h2>...</h2>
<p>...</p>
<time>...</time>

나쁜 마크업

<div class="button">...</div>
<div class="heading is-2">...</div>
<div class="paragraph">...</div>
<div class="time">...</div>

질문 3

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

답변 3

HTML은 구조 언어입니다. CSS는 표현 언어이고요. 그런 용도로 사용 하라고 만든 겁니다.

그런데 HTML이 등장하던 시대에는 CSS가 없었어요. 그래서 과도기 적으로 CSS 등장 이전까지 HTML에 꾸밈을 위한 목적의 속성이 등장 했었습니다. 그러다 구조와 표현이 섞여버리는 것이 문제가 되었고, 표현을 위한 언어 CSS가 등장하게 된 것입니다. 구조와 표현을 분리하는 시대가 도래한 것이죠. (20세기)

그렇게 웹은 잘못된 점을 개선해가며 발전해왔고, 오늘날 대부분의 실무에서는 특별한 상황이 아니면 구조와 표현을 나눠 작성합니다. 각 역할의 언어를 사용해서요. (21세기)

결론은 의미 중심적인 구조를 작성하는데 최선을 다해주셨으면 합니다. 표현은 CSS에 맡겨주세요. ㅠㅡㅠ

질문 4

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

답변 4

1.4km 정보를 단락 요소로 감싸실 필요 없습니다. 그리고 반복해서 이야기 하는 기분이 들지만, 표현 때문에 구조가 희생 되어서는 안됩니다. 단락을 사용하면 이미지 밑으로 이동하는 현상 때문에 단락을 사용하지 않은 것과 같이 말입니다.

지금이야 CSS를 잘 모르니 화면에 보이는 것만 보고 답답함을 느낄 수 있어요. 한가지 팁을 드리면 현 단계에서 HTML을 모두 마쳐야만 CSS를 공부할 수 있는 것은 아니에요. 이 시점에서 CSS 파트로 건너가 공부한 다음 다시 HTML 마크업을 보면 현 단계의 답답함 이나, 궁금점 해소에 많은 도움이 될 겁니다. ^ ㅡ ^

마지막으로 이미지 사이즈 조정에 대해 질문 주셨는데, 무방하지 않습니다. 나중에 공부하시겠지만, 이미지 최적화 관점, 사용자 경험(UX) 관점에서 이미지의 너비, 높이 정보를 정확하게 주는 것을 좋습니다.