<목표>
<html 태그 분석>
- section id="line-notice"
-
div class="notices"
- div class="contents"
- span
- p
- ul > li > a*5
- a class="a—button"
- div class="contents"
-
div class="promotion"
- div class="contents"
- p
- a
- a class="a—button"
- p
- div class="contents"
-
<최종 구현 - 1>
<aside>
💡 예상 외로 html 태그가 까다로웠고 css도 쉽지 않았다. 화면 너비가 좁아지면 레이아웃이 변하기 때문이다. @media를 이용하여 구현했다.
</aside>
<aside> ‼️ 기능을 관찰하면서 레이아웃을 구상하는 일이 생각보다 어렵다.
</aside>
<이슈>
<aside>
❓ 이 위로 화살표 방향키를 올려야 하고 항상 중앙 정렬이 되어야 한다. position: absolute와 margin: 0 auto가 같이 적용될 수 있을까?
</aside>
<aside>
✔️ 그건 불가능하다. 따라서 positon: relative를 적용시켜 bottom: 130px을 맞추고, 가운데 정렬은 align-self: center를 사용했다. z-index: 3을 적용시켜 div 중 가장 위로 올렸다.
</aside>