위클리미션 #1

개요

코드잇에서 제시한 피그마 시안을 보고 html/css를 사용하여 웹페이지를 구현하는 미션을 진행했다. 처음 짠 코드는 정말 엉망이었던 것 같고, 팀원분 코드를 보고 많이 고쳤다.

알게된 점

• <h> 태그엔 기본 마진이 있다.
  원하지 않는 마진이 h 요소 위에 들어가 있어서 확인해봤더니 user agent style sheet 칸에 margin이 자동 적용되어있었다. 개발자도구 > Styles 상에서 가장 아래에 위치한 스타일이었기 때문에 선택자로 해당 태그를 지정해주어 스타일을 변경한다면 Cascading 규칙에 따라 기본 적용된 마진을 없앨 수 있다. 선택자에서 margin:0으로 해결했다.
  

• 함부로 클래스 여러개 만들지 말자
  클래스 명을 좀 기억하기 쉽게 만들어 보겠다고 class = "banner title" 이런 식으로 많이 지었다. 그리고 속성을 지정하면서 여러가지 문제가 생겼다. 일단 banner라는 큰 섹션에 포함된 컨텐츠들을 정렬하기 위해 banner를 flex로 지정했는데, 이렇게 지정하고 나니까 class = "banner title", class = "banner deco", class = "banner des".. 등등 banner 클래스가 포함된 모든 요소들이 flex가 되어버린 것이다. 원치 않았던 요소들이 모두 flex가 되어서 정렬하는 데 애를 먹었다.

• <div>태그는 기본 세로 정렬이다
  좀 웃긴 이야기지만.. 웃긴 이야기지만 flex 배웠다고 모든 세로 정렬을 display: flex flex-direction:column으로 사용해버렸다. 태그를 만들면 block들은 기본적으로 위에서 아래로 쌓인다는 속성을 간과하고 코드를 짰던 것 같다.

• 그 외에도
  <a> 태그 닫는걸 잊어먹거나, justify-content, align-items 속성 값으로 적당하지 않은 걸 사용한다든가 하는 실수들도 있었다.