2021-05-15 33일차

큐

• HTML 공부

자주하는 실수

내가 모르는 것

• 시맨틱태그의 종류가 많아서 다 알지 못한다

느낀점

• 내가 몰랐던 CSS 코드들을 많이 알게됬다 특히 매번 계산해서 넣어야하는 값을 calc가 자동으로 넣어주니까 너무 편하다

HTML

• width: calc(100% / number);
  • number 에 입력한 숫자만큼 100을 나눠서 자동으로 계산해준다
• inline-grid
  • 기본적으로 HTML 에서는 줄간격이라는게 존재한다 그때문에 HTML을 작성할 때 \n을 입력하면 태그 사이에 간격이 생기는데 그걸 font-size:0; 을 넣어줘서 크기를 없애준다
  • font-size 는 상속되기 때문에 inline-grid의 자식에게는 다시 font-size: 1rem;을 넣어줘서 글자가 화면에 나올수 있도록 크기를 준다
  • HTML에서 글자는 해당 라인의 밑줄에 맞춰지려는 성질이 있다 vertical-align 속성은 그 성질을 조정해주는건데, vertical-align값을 top 으로 주면 글자가 맨 위에 붙기 때문에 우리가 원하는 형태로 만들수 있다

.inline-grid {
  font-size:0;
}

.inline-grid > * {
  vertical-align:top;
  font-size:1rem;
}

• 시맨틱 태그
  • 시맨틱 태그와 논시맨틱 태그가 있는데 대표적으로 <div>태그가 논시맨틱 태그에 해당되며 <nav>, <header>, <footer>등이 시맨틱 태그에 해당된다 시맨틱 태그는 논시맨틱 태그와 다르게 태그 이름만보고도 이 태그가 어떠한 기능을하는지 유추할 수 있는 태그들을 말한다.
  • 시맨틱 태그를 사용하면 팀원들이나 타인이 HTML문서를 보고 읽고 이해가기가 편해진다.