Day3. 과제 - 페이지 마크업 구조 그려보기

오늘은 text-level semantics에 관련된 태그와 Embeded content에 관련된 태그를 배웠다.

태그를 배울 수록, 시맨틱한 마크업에 대한 고민이 점점 커진다.

<div>,<span>,<strong>,<b> 등 그동안 공부를 해오면서 나름 잘 써왔던 태그들이다.
전체 페이지를 <section>태그로 묶고, <h>태그를 넣고 각 의미에 맞는 <button>,<a>,<ul>,<ol>,<li>태그 등 의미있는 태그들을 쓰고 나면 남은 텍스트들은 <span>으로 묶고, 컨텐츠 요소들을 <div>로 묶어서 CSS 스타일링 작업을 하는 데 있어 편하도록 마크업을 했다. 텍스트 단락을 <p>태그를 사용해 마크업하면서도 그 안에서 중요한 단어나 강조된 디자인의 텍스트는 <strong>태그를 사용하여 한번 더 감싸주었다.

근데, 이번에 수업을 들으면서 <div>,<span>,<strong>,<b> 등 이런 태그들은 의미가 없으니 최후의 수단이 아니면 사용하지 말라는 말을 어제 오늘 정말 많이 들었다. 특히 <strong>,<b>는 이제 잘 쓰지 않는다고 말하셨다.

마크업 시 의미있는 내용들은 모두 의미에 맞는 태그를 쓰되, 그 후 CSS 스타일링 작업을 위해 요소들을 묶거나, 텍스트 단어를 감싸줘야할 태그가 필요할 때 <div>와 <span>를 사용하면 되는걸까..?🤔

혼자 강의를 들으며 공부할 때, 실습에서 문단 태그로 전체 문장을 감싸준 후 피그마 시안에서 bold체로 표기된 단어들은 <strong>태그를 사용해 한번 더 감싸주곤 했다. 후에 스타일 작업을 해주었다. 이 태그를 씀으로써 스타일 작업을 위해 <span>태그를 써서 CSS 스타일링 작업을 해줄 수 도 있지만, 여기서 <strong>태그를 쓴 것은 디자인 시안에서 표시된 강조를 살리기 위한 적절한 태그가 아닐까.?
아예 지양보다는 남발 지양이라고 이해해야겠다.

마지막 마무리 실습을 하며 간단한 요리 레시피 페이지를 만들었다.

<section>
        <h1>
            피자 만들기
        </h1>
        <img
        srcset="./img/pizza4.jpeg 1160w,
                ./img/pizza.jpeg 616w,
                ./img/pizza3.jpeg 512w"
        sizes="(min-width: 960px) 250px,
                (min-width: 620px) 150px,
                300px"
        src="./img/pizza.jpeg" 
        alt="pizza"
        >
        <ol>
            <li>양파와 피망, 버섯을 채 썰어 준비해주세요</li>
            <li>빵에 토마토소스를 바르고 피망, 버섯, 베이컨 치즈 순으로 넉넉히 토핑해 주세요</li>
            <li>예열된 오븐에 넣고 230도 10 ~ 15분간 구워주세요</li>
        </ol>
        <p>
            참고: <a href="http://www.1000recipe.com/recipe/6210322" target="_blank">http://www.1000recipe.com/recipe/6210322</a>
        </p>
    </section>

수업 듣기 전의 나는 저 참고와 주소 텍스트를 모두 span으로 묶은 다음 주소를 <a>태그로 감싸주었을 것이다.

 <span>
     참고: <a href="http://www.1000recipe.com/recipe/6210322" target="_blank">http://www.1000recipe.com/recipe/6210322</a>
 </span>

이렇게! 근데 최후의 수단으로 써라는 말을 듣고 실습 때는 <p>태그를 이용해 마크업해주었다.

이후에 강사님이 선착순으로 코드리뷰를 해주셨는데, 저 경우에는 <cite>태그를 쓰는 것이 좀 더 적합하다고 하셨다.

<cite>
	참고:
    <a 
    href="http://www.1000recipe.com/recipe/6210322">
    http://www.1000recipe.com/recipe/6210322
    </a>
</cite>

그럼 이렇게 고쳐볼 수 있을 것 같다.

오늘 과제는 처음 프론트엔드 공부를 한다, html공부를 한다고 하면 어딜가나 하는 페이지 구조 나눠보기였다.

페이지 구조 나누기와 관련하여 혼자 공부할때 봤던 강의 중 정말정말 도움 되는 강의가 있어 첨부해본다.!

https://www.youtube.com/watch?v=i0FN-OwJ7QI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=5