블록과 인라인

block

태그가 블록을 쌓은 것처럼 화면의 한 줄을 모두 차지한다.

<style>
  div {
    background-color: black;
    color: white;
  }
</style>
<div>블록입니다.</div>

inline

태그가 내용만 감싼다.

<style>
  span {
    background-color: black;
    color: white;
  }
</style>
<span>인라인입니다.</span>

부모, 자식, 형제

태그 안의 태그를 자식이라고 한다.

자신을 감싼 태그를 부모라고 한다.

자신과 같은 범위에 있는 태그를 형제라고 한다.

<!-- 부모 -->
<div>
  <div>자식</div>
  <div>자식</div>
</div>

줄바꿈, 들여쓰기

줄바꿈과 들여쓰기를 하지 않으면 가독성이 매우 떨어진다.

<div><div><a href="https://www.google.com">구글</a></div><div>
<a href="https://www.naver.com">네이버</a></div><div>
<a href="https://aws.amazon.com/ko">AWS</a></div></div>

줄바꿈과 들여쓰기로 구조가 깔끔하게 보인다.
Prettier가 정렬해준다.

Ctrl + Alt + L

<div>
  <div>
    <a href="https://www.google.com">구글</a>
  </div>
  <div>
    <a href="https://www.naver.com">네이버</a>
  </div>
  <div>
    <a href="https://aws.amazon.com/ko">AWS</a>
  </div>
</div>