[Recipe page] 2 day

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? 

-   list-style-image 속성을 이용하여 시안에서 주어진 dot 이미지로 바꿔주었다.

- <ul> 태그의 <li> 역시, 원하는 폰트 스타일들을 적용해주었다.

- PC버전을 완성한 후, Mobile 반응형 페이지를 구현했다.

 

2일차 완성본

 

Frontend Mentor 추천해준 친구가 기본 스타일을 지우고 스타일을 추가해준다고 얘기해줬는데,

이렇게 하는게 맞는 건지, 뭔가 이상하고 더 추가하고 싶은 스타일이 있는데 수정은 안되고 그래서 약간 답답하다..!

일단 완성했으니, 피드백 요청을 한 번 해봐야겠다 ㅎㅅㅎ

 

오늘 처음 사용해본 속성 중에서도, 정말 듣도보도 못한 친구가 하나 있어서 가져와봤다.

text-indent
: 텍스트의 행 앞에 놓이는 빈공간의 크기를 정해주는 속성이다.

 

이 속성을 왜 썼냐면, 

1. 사는법 -나태주- 그리운 날은 그림을 그리고, 쓸쓸한 날은 음악을 들었다 그러고도 남는 날은 너를 생각해야만 했다 

 

이렇게 줄바꿈이 되는 경우에 넘어간 텍스트 시작이 번호 바로 아래인 것을 개선하고 싶었다.

그래서 아래와 같이 CSS를 작성했다.

<ul>
	<li>사는법 -나태주- 그리운 날은 그림을 그리고, 쓸쓸한 날은 음악을 들었다 그러고도 남는 날은 너를 생각해야만 했다 </li>
</ul>

<style>
	ol {
    	margin-left: 2rem;
        text-indent: -2rem;
    }
</style>

 

그러면 이렇게 원하는 대로 완성!

 

1. 사는법 -나태주- 그리운 날은 그림을 그리고, 쓸쓸한 날은 음악을 들었다 그러고도 남는 날은 너를 생각해야만 했      다 

 

 

목표 설정

- <li> 태그와 텍스트와의 간격이 너무 좁고, 텍스트가 두 줄이 될 경우 두 줄의 사이에 dot이 위치하게 하고 싶다.

  그렇게 하려면 flex를 이용해서 해야할 것만 같은데 시맨틱 태그를 지키면서 스타일을 적용하고 싶다.

- 그것만 해결하면 정말 똑같을 것 같아서, 해결한 후에 올리는 포스팅에서 목표 시안이랑 한 번 비교해보고 싶다.