노마드코더 챌린지 8일차

오늘 만들어할 레이아웃이다.~~만들어보자~

조건읜 외부 스타일 시트 사용과 pseudo selector를 사용하고 position속성을 사용해야 한다.

 

아 꽤나 빡셌다.. 이게 맞는지는 모르겠지만 ..뷰포트.. 아 머리야...

 

우선 html부터 보자 뭐 제목~ 두번째 토마토 틸색상 박스 세번째 발리우드 쓰리틀 색상 박스 이렇게 세개로 할 수 있겠지만

큰박스 하나에 다른 박스들은 포지션 absolute로 각 꼭지점에 박아 보기로 생가각했다.

먼저 h1태그로 제목 설정해주고

메인박스 하나 만들고 그안에 세컨드박스 4개를 만든다. 그리고 그 안에 다시 박스를 하나 더 만들고

그 박스안에 h3 와 h5의 부제목들을 달아주자.

 

이제 css 로 넘어와서

먼저 서체를 times로 잡아주고~ h1과 mainbox가 중앙 정렬 되도록

flex-direction을 column으로 축 변경을 해주고 센터로 놓는다. 백그라운드는 whitesmoke

h1은 text-align :center로 중앙으로 잡아주고 아래 mainbox와 간격을 50px정도 준다.

큰 박스들 부터 잡아주자

우선 페이지 롤러로 측정한 결과 width 대략 360, height 600다 메인박스 설정해주고~

second박스들도 측정하니 165px에 285px쯤이니 설정해주자~ 잘보면 보더라인이있다

3px solid white로 설정

그리고 각 박스마다 색상을 잡아주자

pseudo selector를 이용해서 각 네개의 박스에 백그라운드 색을 설정해줬다.

이렇게 하면~~ 위에 두개 아래 두개 설정이 안된다~

고로~ 여러 고민을 한 결과~

포지션을 이용하자~

second-box전부에 absolute로 포지션을 잡고 부모요소인 main-box에 relative설정을 해준다.

그리고 각 박스당 위치를 잡기위해 위 사진처럼 각 모서리값들로 top과 left, right, bottom을 설정해줫다~

자~ 그리고 텍스트가 들어간 부분이 배경이 하얗다

second-box__content에 width:100% 높이는 95px을 주고 백그라운드 흰색으로 준다.

잘보면 왼쪽으로 패딩이 적용되있다 . 근데 왼쪽만 패딩을 주면width가 100%라서 오른쪽으로 박스가 밀린다.

이때 필요한건 box-sizing: border-box; 자 잘담겼다.

 

그리고 h3부제목의 패딩을 위로 15px을주자~~ 완성

!!

얼추 비슷하다.. 문제는 중앙 정렬인데 바디를 뷰포트 100vh로 맞추면

이게 뷰포트에 맞추니 창크기가 줄어들면 컨텐츠가 안보인다 휠로 볼 수 가 없다...

그래서 body의 height를 과감히 빼버렸다 그러니 창크기가 줄어도 다 볼 수 있다.

근데 width중앙 정렬은 되었으나 ... 바디를 기준으로 하다보니

뷰포트가 커지면 main-axis의 중앙 정렬이 바디로 맞춰져서 좀 보기가 안좋다..

해결방안을 찾아보자....