본문 바로가기

프로젝트

HTML로 구조를 만들고 CSS로 옷을 입히자!

HTML로 먼저 구조를 짜고 CSS로 옷을 입혔다!

HTML

처음에는 디자인을 보면서 구조를 짰다. 그 후 className과 id를 넣고 displayflex-direction 속성을 넣으며 디자인에 맞는 위치에 글이나 박스를 배치했고 배경색과 폰트사이즈, 마진 값을 줬다!

이런식으로 하니 나중에 css를 수정할때 속성이 꼬이지 않아 수월했고 무엇보다 더 재밌었다.

완성된 화면

 

그 후 완성됐다! 이 페이지의 소요시간은 약 1시간 30분? 정도나 걸렸다! (화장실 가는 시간 빼면 더 줄지도,,) 저기 은행 마크 아래 최고연 이라는 글씨나 상세한 CSS 조정에 시간이 소요됐다. 

'프로젝트' 카테고리의 다른 글

Next.js 에서 Redux 쓰기,,  (0) 2023.06.02
Next.js 에서는 Redux Wrapper를 사용해야 합니다.  (0) 2023.06.02
HTML과 CSS 완  (0) 2023.05.30
프로젝트 디자인을 HTML과 CSS로  (0) 2023.05.28
Figma로 디자인 하기!  (0) 2023.05.23