10일차(1) : 새로운 HTML요소 소개

지난 시간에 무에서 유를 창조하면서 HTML과 CSS를 작성해 보았다.

 

이번 시간에는 지난 시간에 작성한 HTML을 토대로 추가적으로 알아두면 좋은 몇 가지의 HTML요소를 소개해주려고 한다.

 

        <p>
          HTML (HyperText Markup Language) is used to define our page content,
          structure and meaning. you <span class="highlight">don't</span> use it
          for styling purposes. Use CSS for that insteade!
        </p>

 

위 코드를 보면 don't를 span을 이용해서 강조해 준 것이 보인다.

이것은 시각적으로 글씨를 굵게 해 줌으로써 읽는 이로 하여금 강조되었다는 것이 보이긴 한다.

하지만 이 span은 의미론적으로 아무 기능이 없다.

 

예를 들면 이와 같다.

기계가 위의 문장을 읽으면 모든 구간이 아무 감정 없는 똑같은 억양과 소리로 읽힐 것이다.

왜냐면 span은 아무런 의미가 없는 인라인 요소이기 때문이다.

 

그렇다면 span을 대체할 수 있는, 강조의 의미가 포함되어 있는 요소가 있는가?

그렇다.

바로 <em>과 <strong>이다.

둘 다 문장의 어떤 부분을 강조하는 요소이지만 다른 점이 있다면 <em>은 그 부분의 말하는 톤만 바꿔서 강조하는 식이라면 <strong>는 그 부분의 소리를 크게 말하면서 강조하는 식이다.

 

한번 적용해 보도록 하자.

 

 <p>
        HTML (HyperText Markup Language) is used to define our page content,
        structure and meaning. you <strong>don't</strong> use it
        for styling purposes. Use CSS for that insteade!
      </p>

우리는 strong의 css를 작성해주지 않았음에도 don't가 굵게 처리된 것을 볼 수 있다.

이는 strong가 부분 강조의 의미가 들어있기 때문에 마치 <ul>에서 자동으로 리스트 부호를 붙여주는 것과 같이 기본적으로 제동이 되는 서비스이다.

 

 

 

또 하나로 더 알려줄 HTML요소는 바로 <section>이다.

section은 개발자를 위한 요소이다.

 

main을 보면 2개의 h2를 기준으로 크게 두 뭉탱이로 나뉜 것을 알 수 있다.

브라우저 상에서는 이 뭉탱이를 쉽게 캐치할 수 있지만 코드상에서는 어렵다.

그래서 우리가 코드의 가독성을 높여주기 위해 직접 <section>으로 묶어주는 것이다.

 

    <main>
      <section>
        <h2>HTML Summary</h2>
        <p>
          HTML (HyperText Markup Language) is used to define our page content,
          structure and meaning. you <strong>don't</strong> use it for styling
          purposes. Use CSS for that insteade!
        </p>
        <ul>
          <li class="extra-important">
            HTML uses "elements" to describe (annotate) content
          </li>
          <li>
            HTML elements typically have an opening tag, content and then a
            closing tag
          </li>
          <li class="extra-important">
            You can also have void (empty) elements like images
          </li>
          <li class="extra-important">
            You can also configure elementswith attributes
          </li>
          <li>
            There's long list of available elements but you'll gain experience
            over time, no worries.
          </li>
        </ul>
        <p>
          Learn more about all available HTML elements on
          <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element"
            >the MDN HTML element reference</a
          >.
        </p>
      </section>

      <section>
        <h2>CSS Summary</h2>
        <p>
          CSS (Cascading Style Sheets) is used for styling your page content.
        </p>
        <ul>
          <li>Styles are assigned via property-value pairs</li>
          <li class="extra-important">
            You can assign styles via the "style" attribute
          </li>
          <li>
            To avoide code duplication, you typically use global styles (e.g.
            via the "style" element) instead
          </li>
          <li>Alternatively, you can work</li>
          <li class="extra-important">
            When working with CSS, concepts like "inheritance", "specificiy" and
            the "box model" should be understood.
          </li>
        </ul>
        <p>
          Learn more about all available CSS properties and values on
          <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Reference"
            >the MDN CSS property reference</a
          >.
        </p>
      </section>
    </main>

이런 식으로 말이다.

 

어떠한, 코드의 가독성이 한층 더 높아지지 않았는가?

 

이렇게 오늘은 짧게 알아두면 좋은 요소들을 소개해줬다.

 

 

언제나 복습을 잊지 말자!