새로새록
html 본문
display의 종류
모든 요소는 딱 한 개의 display 값을 갖고 있습니다. 가질 수 있는 display의 종류는
- inline
- block
- inline-block
- flex
- list-item
- none
등 여러 가지가 있는데, 대부분의 요소들은 inline과 block 중 한 가지입니다.
inline display
inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향이 있습니다.
다음 요소들은 기본 display 값이 inline입니다.
- <span>
- <a>
- <b>
- <i>
- <img>
- <button>
block display
block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있습니다.
다음 요소들은 기본 display 값이 block입니다.
- <div>
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- <p>
- <nav>
- <ul>
- <li>
가로 가운데 정렬
inline-block 요소면 부모 태그에 text-align: center;를
block 요소면 margin-left: auto;, margin-right: auto;를 써주면 되죠?
세로 가운데 정렬
가짜 요소 더하기
vertical-align: middle;을 하면 해결될까요? 우선 vertical-align 속성은 인라인 또는 인라인 블록 요소에 적용되기 때문에 .info를 인라인 블록으로 바꾸겠습니다. 그리고 vertical-align: middle;을 설정해주면...?
.info 요소를 완전 가운데로 오게 하려면 우선 소문자 'x'가 가운데로 와야 합니다. 방법이 하나 있습니다. 세로 길이가 100%인 요소를 만들고, 그 요소에도 vertical-align: middle;을 하는 거죠!
근데 아직도 문제가 조금 있습니다. .info의 가로 길이가 100%라면 어떻게 되는지 봅시다.
갑자기 이상한 곳에 위치되네요. 사실 .helper 와 .info 요소 사이에 띄어쓰기가 한 칸 있어서, 가로 길이 100%인 .info 요소는 자리 부족으로 다음 줄로 가버립니다!
이 문제를 해결하기 위해서는 두 가지 방법이 있습니다.우선 띄어쓰기를 없애는 방법:
띄어쓰기 공간 만큼의 마이너스 여백을 주는 방법:
주의 사항: 어떤 요소에 height: 100%;를 설정하기 위해서는 부모의 height가 설정되어 있어야 합니다. 위 경우에는 .helper의 부모인 .container에 height가 설정되어 있었기 때문에 가능했던 것이죠.
line-height로 해결
.info를 인라인 블록으로 설정해주면, line-height 속성을 활용해볼 수도 있습니다. 부모인 .container에 height와 동일한 line-height를 줘보세요
line-height 속성은 자식들에게 상속되기 때문에 .info에는 line-height: normal;을 꼭 써주셔야 합니다!
<!DOCTYPE html>
<div class="container">
x
<div class="info">
<h1>Hello!</h1>
<p>My name is young.</p>
</div>
</div>
다른 방식?
위의 방법들 말고도 세로 가운데 정렬을 하는 다양한 방식들이 있습니다. 포지셔닝을 이용할 수도 있고, 최근에 나온 flexbox를 이용할 수도 있습니다.
'소프트웨어융합 > 코드잇 정리.py' 카테고리의 다른 글
| git (0) | 2022.03.11 |
|---|---|
| 자료구조 - 링크드 리스트 연산들 (0) | 2022.02.03 |
| 파이썬 - 폴더관리 예시제들 (0) | 2022.01.30 |
| 파이썬, 문자열갖고놀기 (0) | 2022.01.29 |
| 파일다루기 - 출력방식연구 (0) | 2022.01.28 |
