[KLAE] 2022년 11월 3일 목요일

오늘 한 것

• 단위 변경 (rem → vw, vh) : 모든 화면에서 설정한 크기, 간격 등이 동일하게 나오도록  vw, vh로 단위를 변경해주었다.

• 헤더 내 요소들 위치를 margin-left를 이용해서 설정해주었었는데, 그 방법보단 width를 지정한 요소들을 float: left로 나열해주는 것이 정확한 위치에 올 수 있을 것 같아서 바꿔주었다. 요소들의 width 총합이 100이 나오면 화면 가로 길이에 딱 맞게 나눌 수 있다.

• 식물 추천 페이지 디자인 초안 완성

 

해야 할 것

• 선택한 항목 색 다르게 뜨도록
• hover 등 구체적인 css

 

참고자료

• 요소 나열
  https://velog.io/@anrun/CSS-위치-지정하기position-float-inline-block-hyk5xn5nql
• css 단위
  https://webclub.tistory.com/356
• 텍스트 가운데 정렬

text-align: center;

• div 요소 가운데 정렬
  https://velog.io/@bami/CSS-요소-가운데-정렬
  https://webdir.tistory.com/31

display: flex;
justify-content: center;
또는
margin: 0 auto;

• 가장자리 여백 삭제
  https://xetown.com/questions/854157

margin-top: -8px;
margin-left: -8px;
margin-right: -8px;

• 한 줄에 원하는 요소 개수 설정 (flex-wrap을 사용하면 가로 길이에 초과되는 요소들은 다음 줄에 나오도록 해준다.)
  https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=pjh445&logNo=221160742046 

display: flex;
flex-flow: wrap;