[HTML / CSS] display 속성 (2)

vertical-align을 사용시 지정된 곳을 기준으로 위치를 맞춰주게 된다.

 

 

위의 코드는 vertical-align을 top으로 해주었기 때문에 박스의 위로 위치를 바꿔준다.

 

이 vertical-align을 During에다가 해주면 어떻게 될까

 

 

먼저 위의 코드를 보자 During의 박스에 위의 부분에 During을 제외한 나머지 박스 중 가장 높았던 박스인 Turing 박스가 During박스에 맞추어 진다. 그러고 나서 나머지 박스는 따로 vertical-line을 설정해 주지 않았는데 이 나머지 박스들은 Turing의 baseline을 맞추기 위해서 Turing의 baseline과 맞춰주게 된다.

여기서 Turing과 Furing이 움직이는 이유는 During이 Turing에 맞춰서 움직이게 되면 결과적으로 높이(height)가 더 커져서 변형이 되기 때문이다.

 

정리하자면 baseline은 vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치합니다.

위에서 언급한 것과 같이 높이가 변형되면 결국엔 증가하는것이니까 최소화하는 위의 Result의 첫번째처럼 되는 것이다.

 

 

일단 x를 써준 이유를 알아보자. 인라인 요소들은 기본적으로 strut 라는 요소의 baseline에 맞추어 세로 정렬이 된다. 이 strut 요소는 width가 0인 실제로는 보이지 않는 박스라고 생각하면 된다. 이것을 가시적으로 보기위해서 인라인 요소에 둘러 쌓이지 않은 위치에, 즉 여기서는 가장 부모인 곳에 x를 둔 것이다. 이 x가 strut 영역이라고 보면된다.

 

위 코드는 Furing과 Turing에 각각 vertical-align을 middle을 준 것인데 기준이되는 것은 부모 태그에 있는 x이다.

이 x에 맞춰서 Furing박스의 가운데와 Turing 박스의 가운데가 이동한다. 이동하는 과정에서 어쩔 수 없이 height가 늘어버렸는데 이는 최소화하는 결과값이 이것이므로 어쩔 수 없다.

 

During Furing Turing 모두다 vertical-align을 middle값을 주면 모든 요소들이 가로를 기준으로 가운데로 오는 것을 볼 수 있다.

 

🤔 여기서 쓸만한 팁을 알고 가자

 

1. 가로 가운데 정렬

 

inline 요소 또는 inline-block 요소이면 부모 태그에 text-align: center; 를 써주면된다.

 

block 요소이면 margin-left: auto; , margin-right: auto;를 써주면 된다.

 

2. 세로 가운데 정렬

 

좀 복잡하다. 여태까지 공부했던 것으로는...

vertical-align 만으로는 해결이 되지않는다.

 

 

이것봐라 위에서 했던 것 처럼 x를 부모 클래스에 집어 넣고 x를 기준으로 움직여보자.

세로길이를 회색박스 대비 비율 100%인 요소를 만들어서 이 요소에 vertical-align: middle을 하면?

 

 

배우는 곳에서는 line-height 속성을 활용할 수 있다고 한다. 아직 공부하지 않았지만 이런것도 있다 정도만 알고 가자

 

 

이 line-height는 상속되기 깨문에 .info에는 normal을 꼭 붙여줘야 한다고 한다.