css inline, block, inline-block element

 

-인라인 엘리먼트

<a>, <img>, <span>과 같은 태그는 css inline element입니다.

주로 박스 안의 요소로 들어가게 됩니다. 다른 엘리먼트에 비해 정렬이 까다롭습니다.

 

1. 메모리에 열 단위로 저장됩니다.
2. 내용이 담긴 크기만큼 영역을 차지합니다.
3. 줄바꿈이 없고, 문장 중간에 들어갈 수 있습니다.

 

내용물의 크기만큼 영역을 점유하기 때문에, 임의로 너비나 높이를 설정할 수 없습니다. 패딩, 마진도 마찬가지입니다.

따라서 블록이나 인라인 블록 엘리먼트로 성질을 변경하거나 다른 성질을 가진 부모 안에 넣어서 사용하는 경우가 많습니다.

a태그나 img, span과 같은 css inline 태그를 div나 p같은 태그안에 넣어서 사용합니다.

 

 

-블록 엘리먼트

<div>, <h1>, <p>, <ul>, <ol>과 같은 태그는 block element 입니다.

위에서부터 네모박스를 채워넣는 것 같은 구조를 가지고 있습니다. 가장 기본적이고, 안에 다른 요소를 넣기에도 좋습니다.

너비가 꽉 차게 생성되어, 자동적으로 다음 태그는 줄바꿈이 된다는 특징이 있습니다.

 

1. 메모리에 행단위로 저장됩니다.
2. 블록은 기본 너비 100%로 생성되어 자동으로 줄바꿈이 됩니다.
3. 따라서 width 크기를 줄여야 배치, 정렬이 가능합니다.

 

 

 

-인라인 블록 엘리먼트

inline-block element는 css inline 엘리먼트의 성질을 가지지만, 블록 엘리먼트처럼 정렬하기 좋습니다.

우리가 워드나 한글에서 글자 정렬을 하듯이, 글자라고 생각하면 쉽습니다. 크기를 임의로 지정할 수 있습니다.

 

1. 외부에서는 인라인처럼 내용물 만큼의 크기를 가집니다.
2. 내부에서는 블록처럼 너비 높이 마진 설정이 가능해서, 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용합니다.

 

글자같은 성질을 가지고 있기 때문에, 부모의 text-align과 line-height를 통해 정렬할 수 있습니다.

주로 메뉴 리스트를 수평으로 정렬할 때 사용합니다.

 

 

---

 

-엘리먼트 성질 바꾸기

태그는 생성과 동시에 엘리먼트의 성질이 기본적으로 주어지지만, 필요에 따라 바꿀 수 있습니다.

디자인한 레이아웃에 따라 그 위치와 크기를 조정하기 위해 필수적인 작업이라고 할 수 있습니다.



태그를 만듭니다.
display: inline 또는 block, inline-block 이라고 스타일을 줍니다.
그러면 css inline 성질을 가진 a태그 라고 해도, 블록 또는 인라인 블록 엘리먼트의 성질을 가질 수 있습니다.

주로 인라인 요소가 정렬하기 까다롭기 때문에, 인라인 요소를 정렬하기 위해 다른 성질로 바꾸는 경우가 많습니다.





 

-display: block에 대해

스타일을 줘서 정렬하기 위해 쓰기도 하지만, display: block;은 다른 의미도 가지고 있습니다.

어떤 요소에 display: none; 을 부여하고,  원하는 타이밍에 요소를 나타날 수 있도록 합니다.



예를 들어, 메뉴에 마우스를 올렸을 때 하위 메뉴가 보이도록 할 수 있습니다.

visibility: hidden; 이라는 것도 있지만 태그가 차지하고 있는 공간을 없애지 않고 투명하게만 한다는 차이가 있습니다.

-visibility는 뭐야?

visible: 요소를 나타냅니다. 기본값이므로 숨겼을 때 보이게 하는 용도 입니다.
hidden: 화면에서 요소를 숨기지만, 여전히 레이아웃 영역에 존재하고 있습니다.
collapse: 동적인 테이블에서 테이블 테두리를 한줄만 보여줍니다. 잘 사용하지 않습니다.
드래그하거나 하면 바로 볼 수 있기 때문에 민감한 정보에는 사용하지 않아야 하고, 툴팁에 주로 사용됩니다.









css inline, block, inline-block element의 성질에 대해 알아보았습니다. 기본 태그의 성질이 무엇인지, 처음에는 헷갈리지만 쓰다보면 점점 자연스럽게 떠올리게 되므로, 전환이 필요한 요소에만 display 속성을 바꿔주게 되더군요.