WHAT Frontenc Mentor?
https://www.frontendmentor.io/challenges?sort=difficulty%7Casc
CHALLENGE TITLE : Recipe page
FOCUS ON
This challenge will help you focus on writing semantic HTML. Ensure you think through what HTML elements are most appropriate for each piece of content.
각 요소에 가장 적합한 시맨틱 태그가 무엇일지 고민하면서 제작해보라고 한다.
WHAT TO DO?
github에 올려가면서 작업을 하려고 했더니 초기 설정에 너무 우왕좌왕 시간을 많이 썼다..!
초기로 어떤 값을 어떻게 적용시켜줬었는지 바로바로 떠오르지가 않아서 반복적으로 만들어보면서 익혀야할 것 같다.
시맨틱 태그에 집중하라고 제시된 디자인이기 때문에 디자인하는 것 자체는 그렇게 어렵지 않았다.
<body>
<main>
<img />
<div>
<div>
<h1 />
<p />
</div>
<section>
<h3 />
<ul>
<li /> ...//
</ul>
</section>
<section>
<h1 />
<ul>
<li />
<li />
<li /> ...//
</ul>
</section>
<div /> /** 가로선 **/
<section>
<h1 />
<ul>
<li /> ...//
</ul>
</section>
<div /> /** 가로선 **/
<section>
<h1 />
<p />
<div>
<div> * 4
<span></span>
</div>
</div>
</section>
</div>
</main>
</body>
내가 어떤 시맨틱 태그들을 사용했는지를 구조화해봤다.
시맨틱 태그들의 종류와 설명들을 읽으면서 골라보려고 했지만, 생각보다 고르기가 어렵다는 걸 알았다.
다른 사람들과 더 적절한 시맨틱 태그가 무엇일지 같이 얘기해보고 싶다.
목표 설정
- <li> 태그에 내가 원하는 이미지, 스타일을 삽입하는 것을 달성하면 완성이다.
- 가장 최하단에 위치한 section을 flex를 이용해서 구현했는데 grid 로 할 수 있을 것 같다. (그게 더 나을 듯..!)
'🔗 Frontend Mentor Pro > Recipe Page' 카테고리의 다른 글
| [Recipe page] 3 day ⭐ (0) | 2024.03.14 |
|---|---|
| [Recipe page] 2 day (0) | 2024.03.13 |
