TIL 04. 레이아웃 구현 프로젝트

 

조.미.진 개발 공부를

시작한 지 2주 차 되다.

 

멋사 프론트엔드 스쿨 레이아웃 과제를 통해 마크업 구현과 CSS 연습을 했다.

간단한 레이아웃 구현을 하면서 생긴 질문들과 배운 것들을 적어보려고 한다!

아직 손이 너무 느리고 개발 머리가 빠릿빠릿하게 돌아가지 않아서

잘 따라가지 못할까 봐 두려운 마음이 있지만!

부정적인 생각에서 벗어나 내 주변에 감사할 일에 집중하려고 노력하고 있다!

같은 목적을 갖고 불철주야로 서로 힘써서 도와주는 동료들과 함께하니

지금 하는 과정이 정말 너무 좋고 같이 공부할 수 있어서 감사하다💛

HTML/CSS로 만든 레이아웃 과제

 

1. 시맨틱 한 코드를 위해✨

1)

이번 과제는 독립적인 콘텐츠를 나타내는 article 태그로 전체 박스 구조를 잡아야 한다.

이번에 div를 최대한 안 쓰려고 main, section, article을 최대한 많이 사용해 보려고 했다.

상황에 맞지 않는 코드를 작성하는 건 아닌지 내일 멘토님께 질문하려고 한다.

 

2)

하단 부분 별점 이미지를 묶는 방법으로 div 대신 무엇을 쓸 수 있을까 회고 팀원들과  고민하던 중

figure 태그를 이용해서 별점 이미지를 묶고 figcaption 태그로 이미지에 대한 설명인 “별점 평균 4.5"을

넣었다. 텍스트는 css에서 올리는 방향으로 의견이 나왔다. 

하지만 이 별점 이미지가 버튼 기능이 있는 페이지라서 첨부사진, 자료를 나타낼 때 사용하는 figure 태그가

적합할지에 대한 고민이 생겼다. 

 

3)

flex 정리 포스팅도 조만간 올리려고 한다.

 

4)

다음에 버튼 클릭 시 이미지가 변하는 것을 구현할 것이다.