노마드코더 11일차 과제

금일 과제는 이 레이아웃을 만드는 거다~

우선 내가 만든 코드는 깃헙주소를 적어놓겠당

github.com/lee-tae-eon/cocoa-challenge/tree/main/library-screen

lee-tae-eon/cocoa-challenge

이제 코드를 리뷰해보면

먼저 레이아웃이아닌 바깥영역은 검은색으로 지정하고 height 100vh로 지정해놓았다.

그리고 레이아웃을 중앙에 위치시키기 위해 flex, center로 놓는다.

그리고 레이아웃을 감싸는 큰 박스 하나를 지정해주고 배경은 흰색 widht: 341px을 지정해놓는다

 

 

전체적인 레이아웃은 크게 헤더와 메인으로 구성하고 헤더와 메인 사이에 폼태그로 search form 박스를 놓는다.

헤더는  크게 칼럼을 세개로 나누어 아이콘과 텍스트를 배열했다.

그리고 display:flex, justify-content: center, align-items:center로 중앙 정렬 해주고

각 칼럼간 간격을 주기위해 칼럼들의 width를 33%씩주고 첫번째와 마지막은 오른쪽 왼쪽으로 마진 auto를 주고

마지막 칼럼은 flex-end시켜준다 그리고 가운데 library텍스트를 text-align을 통해center화 시켜주면

정확? 하게 분할해서 중앙 정렬한다.

그리고 예쁘게 간격을 주자 상하 패딩 40 좌우 10씩 줬다.

 

search박스는 헤더와 메인 중앙에 걸쳐있으므로 position: absolute를 줘서 위치를 잡아준다 물론 부모요소인

form박스에 position relative를 준다. 또 아이콘도 absolute를 통해 인풋박스에 위치하도록 해준다

인풋박스는 width값을 주고 좌우 마진을 일정하게 준다. pseudo selector를 이용해서 placeholder도 위치를 조정하고

패딩을 줘서 위치를 잡아줬다.

 

그리고 메인 content는 크게 세가지 섹션으로 구분했고

첫번째 추천도서 섹션은 h1으로 제목을 정해주고 아래는 div박스로 감싸서 그안에 칼럼을 두개를 둔다.

첫번째 칼럼은 이미지 박스이다. 이미지를 넣어주고 사이즈를 잡아주자.

두번째 칼럼은 h2, h5 텍스트를 주고  그아래 별모양 아이콘 다섯개를 div박스 안에 넣어준다.

각 섹션의 제목은 동일한 스타일이므로 h1으로 해서 모양 조절을 해준다

두칼럼간 간격이 있으므로 img에 margin-right으로 간격을 준다.

이제 간격잡고 나머지는 다 비슷하다

 

두번째 섹션 top adventure는 역시 h1태그로 제목을 달아주고 큰박스 안에 4개의 div박스를 줬다.

그리고 역시 각 박스당 이미지 넣어주고 첫번째 섹션에서 썼던 별모양 아이콘 박스도 넣어준다.

전체적으로 무난한 섹션이지만 한가지 문제점이 있었다.

상기 과제 이미지를 보면 4번째 칼럼이 잘려져있다. 근데 내가 만든건 바깥을 넘어서 보이는거다...

뭘로 해야하나 서칭하던중 overflow 프로퍼티를 알게 되었다. overflow속성을 이용해 값을 hidden을 주면 

박스에서 벗어나는 부분은 가려지게 된다.! 성공 ㅋ 맞는지는 모르겠지만 이렇게 끝

 

세번째 섹션은 첫번째 섹션과 거의 비슷하다

다만 p태그로 문단처리를 하였으나 줄간격이 안맞다. 이 또한 찾아보니 텍스트의 line-height를 조절 해주면 된다.

line-height속성에 값을 1.5로 주니 얼추 비슷해졌다. 이름부분은 1.3을 줬다.

 

뭔가 어렵고 오래걸렸다.. 하고나면 별거 아니지만 처음은 어렵다 ㅋㅋ

코드리뷰를 해보면서 코드를 간소화 해야겠다.