개발자의 개발 블로그

일단, 인라인 element과 블록 element가 존재한다.

블록 엘리먼트는 컨텐츠의 너비와 무관하게 전체를 차지하기 때문에, 수평으로 다른 엘리먼트를 같이 사용할 수 없다.

1. display:block;

위와 같이 div 3개를 만들고, display를 block으로 한다면, width가 150px임에도 불구하고 모두 세로로 정렬된다.

블록은 페이지 전체 너비를 혼자 사용한다고 볼 수 있다.

2. display: inline-block;

이 경우, 블록은 유지되지만, 인라인 형태로 보여지게 된다.

즉, 너비를 해당 엘리먼트의 너비만큼만 사용하고 나머지 공간을 다른 엘리먼트들과 나눠쓰게 된다.

따라서, 다음과 같은 모습이 나온다.

3. display: inline;

이렇게하면, 블록 속성이 전부 무효화된다. 즉, 내부 요소 텍스트만큼만 차지하게 된다.

블록에서 width와 height를 선언했지만, 이것들은 모두 무시된다.

따라서, 다음과 같은 모습이 나온다.

 그리고, 아래와 같이 divbox 속성에 경고가 표시된다.

내용은 위 설명한 것과 같다.

display를 inline으로 하면서, 블록이 아닌게 되어버렸기 때문이다.

div는 블록 엘리먼트이다.

div안에 있는, div를 움직이려고 한다.

<div id="big"> 

<div id="small">HI</div> 

</div>

#big { width:500px; height:500px; background-color:#ffff00; }

#small { width:50px; height:50px; background-color:#ff0000; }

이렇게 하면, 다음과 같이 나온다.

이렇게 나온다.

여기서, 빨간색 박스를 정중앙으로 이동하고 싶다면?

일단, 가로 중앙으로 이동하는 방법은

1. margin: 0 auto

이렇게 해서, 

상 우 하 좌   순서를 0 auto 0 auto 로, 즉, 상하의 마진을 0으로, 그리고 우좌의 마진을 auto로 하게 되면,

양 쪽에 자동(auto)으로 알맞게 margin이 적용되면서 가운데 정렬이 된다. 

2. text-align:center; 

참고로, text-align 속성은 텍스트의 정렬 방향을 의미한다.

속성값으로

left: 왼쪽 정렬

right: 오른쪽 정렬

center: 중앙 정렬

justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

이렇게 하면... 안 된다. 왜냐하면 ,text-align은 블록 엘리먼트 안에 들어있는 inline 요소들을 정렬하는 명령어이다.

하지만, 위 같은 경우 HI 박스도 같은 블록 엘리먼트인 div이므로 이동하지 않는다.

그래서, 블록을  inline 엘리먼트와 같이 보이도록 변경을 해줘야하는데, 이것이 바로 

display: inline-block이다.

이것을 small에 집어넣으면, inline으로 표현되기 때문에, 

big에 들어있는 text-align에 의해 가로 기준 중앙으로 이동한다.

주의할 점은  display: inline으로 하면 안된다는 것이다.

이렇게 하게 되면, small이 가진 블록만의 너비와 높이뿐만 아니라 마진 적용을 할 수 없으며, 내용물만 블록이 된다.

사진을 보면 다음과 같다.

위 두 가지 방법 중 하나를 사용하면, 가로 정렬이 완성된다. 

그렇다면 세로 정렬은 어떻게 해야할까?

1. 노란색 big div에서 display: table-cell; 으로 표의 셀처럼 설정한 뒤, vertical-align: middle; 으로 작성하면 된다.

이렇게 하면, 세로 정렬이 된다.