[CSS] Display

 

---

 

블록 (block)

 

 위에서 아래로 차례대로 배치되는 요소이며 크기를 지정할 수 있다.

 ex) <h1> ~ <h6>, <p>, <div>

 

---

 

인라인 (inline)

 

 글을 쓰는 방향으로 줄이 바뀌면서 배치되며 블록과 달리 크기를 지정할 수 없다.

 ex) <a>, <br>, <img>, <span>

 

 단, 이미지와 같이 외부 데이터를 보여주는 태그는 인라인이지만 크기를 지정할 수 있다.

 

---

 

인라인 블록 (inline-block)

 

 인라인처럼 배치되지만 블록 처럼 크기를 가지고 싶을 때 사용하는 속성이다.

 

---

 

float 속성 (float)

 

 float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고 그 주변으로 인라인 요소들을 배치할 수 있다.

 

---

 

의사 클래스

 

 의사 클래스는 특정 상태나 위치에 있는 요소에 스타일을 적용하기 위해 사용한다.

 

   1) :hover

      요소가 마우스 오버되었을 때 적용되는 스타일을 정의한다.

      즉, 마우스를 가져다 대기만 하면 색상이 바뀌거나, 글자 크기가 바뀌는 등의 스타일을 정의내릴 수 있다.

 

 

   2) :focus

      사용자가 특정 요소에 포커스를 주었을 때 적용되는 스타일을 정의하는 데 사용한다.

      쉽게 말하자면 해당 요소를 클릭하고 나서도 그 변형된 스타일이 유지되는 클래스이다.

 

 

   3) :active

      이는 클릭한 상태를 나타낸다.

      :focus와 달리, 클릭하고 난 이루 변형된 스타일이 유지되지 않는다.