Emmet 작성법과 Inline, Block

Emmet (에밋)

HTML, CSS의 구성 요소를 한줄로 간편하게 입력할 때 사용됨

---

• HTML

div>ul>li*4{$}

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

• CSS

div {
  w:200
  h:100
}

div {
  width: 200px;
  height: 100px;
}

Inline & Block

---

1. Inline (인라인)

1. 글자 형태의 요소이다. 내, 외부의 여백은 갖지 않으며 가로, 세로의 너비도 설정 할 수 없다.
2. Inline 태그끼리는 한 줄에 쌓이며 태그와 태그 사이의 간격은 띄어쓰기 취급된다.

• a : 페이지로 이동할 수 있는 링크를 걸어줌

• br : 줄바꿈 요소

• img : 이미지를 삽입하는 요소

• span : 특별한 의미가 없는 요소

• input : 데이터를 입력하는 요소. 블록의 속성도 사용할 수 있음

• label : input의 부모로 쓰이며 라벨링하는 요소

2. Block (블록)

1. 상자 형태의 요소이다. 내, 외부 여백을 가지며 부모요소의 크기만큼 가로너비가 늘어난다.
2. Block 태그끼리는 세로로 쌓인다.

• div : 특별한 의미가 없는 요소

• h1 ~ h6 : 제목을 의미하는 요소

• p : 문장을 의미하는 요소

• ul : 순서가 필요없는 목록의 집합

• ol : 순서가 필요한 목록의 집합

• li : 목록 내 항목