[HTML/CSS] Inline 태그 vs 블록 태그

inline 태그는 내용물의 크기가 태그의 영역이다.

블럭 태그는 내용물의 크기와 상관없이 너비는 항상 100%를 차지한다.

inline 태그의 종류

• span: 의미없다. inline을 나타내기 위함.

• a: 하이퍼링크 생성, href속성에 링크를 넣는다.

• b: 굵은 글씨 요소

• strong: 굵은 글씨로 강조하고자 하는 요소

• i: 기울임 글씨 요소

• em: 기울임 강조하고자 하는 요소

• br: 텍스트 내에 줄바꿈(차지하는 영역이 없다.), 닫는 태그 X

• img: 이미지 표현, 닫는 태그 X, src에 img의 경로를 담고 alt는 이미지가 안 떴을 때 대체하는 텍스트이며, 의미를 주는 텍스트로 넣는다. alt는 시각장애인에게 무슨 표지인지 알려주는 용도로도 사용하니 중요하다!

  b태그 strong태그 => 결과가 같다.

  i태그 em태그 => 결과가 같다.

  의미가 다르다!

  굵거나 italic으로 표현하고 싶으면 bold italic으로 b, i태그 사용

  강조하고 싶으면 strong, em태그를 사용한다.

블록 태그의 종류

• div: 의미없다. block 컨테이너를 나타내기 위함.

• p: 문단

• hr: 수평선, 닫는 태그 X

• ol: 순서가 있는 리스트, li로 내용을 만든다.

    <ol>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ol>

• ul: 순서가 없는 리스트, li로 내용을 만든다.

    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>

• h1~h6: 제목, h1은 하나만 쓰도록 약속

• pre: 작성한 내용을 그대로 표현

• blockquote: 텍스트가 긴 인용문. 주로 들여쓰기를 한 것으로 표현