#005. 레이아웃 제대로 부셔버리기! 하지만 부서지는건 정작...

레이아웃 만들기 실습

😎 오늘의 잘한점

액션

• 오늘은 질문 요정! 🧚 모르는 내용은 주저하지 말고 여쭤보자!
• 어제의 개선점 액션 플랜을 실천해봤다. 수업이 끝난 후 전체적인 내용을 다시 보면서 손으로 직접 정리해나갔다.
  모르는 부분은 찾아보면서 실습한 코드에 적용해보는 과정을 통해 알아갔다.

칭찬

전체적으로 한번 정리를 하면서 궁금한 점이 새로 생기기도 하고 내가 이해할 수 있는한 최대로 이해해보려고 했다.

MDN을 참고하면서 직접 코드를 수정하며 이해하니까 이해도 잘 되고, 복습 시간을 알차게 사용할 수 있었다.

어제의 나보다 성장한 내가 되었다는 점이 앞으로 나아갈 수 있는 원동력을 제공해준 것 같다🏃

---

✔️ 오늘의 개선점

문제

-

원인

-

액션 플랜

오늘은 스스로 만족했던 하루였다! 앞으로도 이렇게 불이 꺼지지 않고 활활 타오르길🔥

---

💡 오늘의 배운점

TIP
로그인의 경우 로그인 페이지로 이동하면 <a>, 모달창 등 동작이 일어난다면 <button>으로 구현하자!

배움

☑️ Layout History

• 시멘틱 태그를 사용하기까지 + 사용하는 이유

☑️ Sections

• 레이아웃 태그의 쓰임새

☑️ float

• float 해제하기
• 주의사항 및 해결방법

☑️ 웹접근성을 고려한 숨김처리

의미

그동안 레이아웃에서 궁금했던 부분은 오늘 대부분 풀렸던 것 같다.

토이 프로젝트에서 레이아웃을 만들어 볼 때도 엄청 고민했는데 많은 부분을 수정해야 할 것 같다...ㅎㅎ

그 중 제일 궁금했던게 section과 article이었는데 구글링을 해봐도 와닿지 않았고 내가 이해한게 맞는지 확신이 들지 않았는데

수업을 진행하면서 개념에 확신이 생기고 하나의 레이아웃만이 정답이 아니라는 것을 알았다.

또한 float보다 flex를 먼저 알게 되어서 float를 잘 써보지 못했는데 생각보다 어렵고, flex의 등장이 왜 엄청났는지 알 수 있었다.

---

🙋‍♀️ 오늘의 질문

section 내의 제목 외 텍스트 요소들을 <p> 태그로 표현해도 될까요?

👉 section은 요소들을 묶어주는 용도로 사용되기 때문에 무조건 p 태그로 넣기보다는 의미에 맞는 콘텐츠 태그들을 사용하는 것이 좋아요

header의 로그인 버튼은 <nav>  들어가야 할까요, 아니면 <a>나 버튼으로 단독 분리하는 것이 좋을까요?

👉 로그인 버튼은 대메뉴의 리스트에 포함되어 있지 않아도 된다고 생각해요.

대부분 nav는 웹 사이트의 구성을 간략하게 리스트로 표현해주는 것이기 때문에 단독으로 분리하는 것이 더 좋아 보입니다.

그렇지만 정답은 없어요!

header, section, aside, footer를 사용한 레이아웃을 구현할 때는 각각 float: left, float: right를 주어야 양쪽으로 분리가 됐는데 a태그를 사용한 요소는 하나의 요소에만 float: right만 주어도 레이아웃이 잡히는 이유는 block 요소와 inline 요소의 차이 때문인가요?

👉 네, 맞아요! float 속성을 주지 않으면 block 요소는 한 줄을 다 차지하기 때문에 한 줄에 block 요소들을 float를 사용하여 정렬하기 위해서는 각각 float 속성을 사용하여야 합니다