개발 공부/HTML, CSS

HTML/CSS _ display 기본 및 text-align, vertical-align, iline-height (feat. flexbox)

U_D 2022. 2. 28. 17:50
HTML 요소의 레이아웃을 결정하는 가장 중요한 속성 중 하나 'display'

1. display의 종류

모든 요소는 딱 한 개의 display 값을 갖고 있습니다. 가질 수 있는 display의 종류는

 

1) display: none;

화면에서 사라집니다. 크기 자체도 차지하지 않습니다!

 

2). display: block;

일반적으로 설정하지 않아도 div가 갖게되는 기본값. (태그에 따라 기본값이 다를 수 있습니다.)

기본적으로 width 가 자신의 컨테이너의 100% 가 되게끔 합니다. 쉽게 말하자면, 가로 한 줄을 다 차지하게 됩니다.

*기본 display 값이 block인 경우

  1. <div>
  2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  3. <p>
  4. <nav>
  5. <ul>
  6. <li>

 

3) display: inline;

컨텐츠를 딱 감쌀정도의 크기. block태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 되고, 크기를 변화시킬 수 없습니다. 예시 css에서도 width를 임의로 500px 로 바꾸어줬지만 크기는 여전히 글의 길이 만큼입니다.

*기본 dipslay 값이 inline인 경우

  1. <span>
  2. <a>
  3. <b>
  4. <i>
  5. <img>
  6. <button>

 

4) display: inline-block;

inline과 block의 특성을 합쳐놓은 속성입니다. 기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있습니다. 참고로 Explorer 7  이하에서는 사용할 수 없습니다!

 

5. flex

6. list-item

 

 

2. display의 바꾸기

모든 요소는 기본적으로 정해진 display 값이 있지만 CSS를 통해서 이를 바꿀 수 있다.

 

↓html

<div class="div1">Hello World!</div>
<div class="div2">My name is Young!</div>

 

↓css

div {
  display: inline; /* <div> 태그를 inline으로 바꾸기 */
}

.div1 {
  background-color: green;
}

.div2 {
  background-color: blue;
}

 

 

3. 가로 가운데 정렬

[inline 요소]

inline 또는 inline-block 요소면 부모 태그에 text-align: center; 기입

 

↓html

<div class="container">
  텍스트 <img src="https://i.imgur.com/CDPKjZJ.jpg" height="50">
</div>

 

↓css

.container {
  text-align: center;
  background-color: lime;
}

 

[blcok 요소]

block 요소면 margin-left: auto;, margin-right: auto; 기입

 

 

 

4. 세로 가운데 정렬

CSS에서 모든 걸 한 번에 딱 가운데 정렬을 시키는 방법이 없기 때문에, 다양한 지식을 섞어야 함.

 

[가짜 요소 더하기]

우선 vertical-align 속성은 인라인 또는 인라인 블록 요소에 적용되기 때문에 .info를 인라인 블록으로 바꾸겠습니다. 그리고 vertical-align: middle;을 설정하면

 

↓html

<div class="container">
  <div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>

 

↓css

.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
}

 

↓결과 화면

 

 

vertical-align: middle;은 요소의 가운데를 부모 요소의 소문자 'x'의 가운데와 맞춰야 한다.

info 요소를 완전 가운데로 오게 하려면 우선 소문자 'x'가 가운데로 와야 하는데

x의 세로 길이가 100%인 요소를 만들고, 그 요소에도 vertical-align: middle;을 기입 후

여기서 소문자 'x'를 지우고, .helper 요소의 가로 길이를 없앤다.

 

↓html

<div class="container">
  <div class="helper"></div>
  <div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>

 

↓css

.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
}

 

↓결과화면

 

 

어떤 요소에 height: 100%를 설정하기 위해서는 부모의 height가 설정되어 있어야 한다.

그렇다면 항상 helper를 만들어줘야 하는걸까? 너무 지저분한데....!

위 경우에는 .helper의 부모인 .container에 height가 설정되어 있었기 때문에 가능

 

 

line-height로 해결

line-height 속성은 line-box 의 높이를 지정하고 주로 텍스트간의 줄 간격을 조절할 때 사용한다.

출처: https://mygumi.tistory.com/366 [마이구미의 HelloWorld]

 

.info를 인라인 블록으로 설정해주면, line-height 속성을 활용해볼 수도 있다.

부모인 .container에 height와 동일한 line-height를 주면 속성은 자식들에게 상속되기 때문에 .info에는 line-height: normal;을 꼭 써줘야 한다.

 

 

 

즉, 위 결과의 helper를 없애고 더 간결하게 할 수 있다.

↓html

<!DOCTYPE html>
<div class="container">
  x
  <div class="info">
    <h1>Hello!</h1>
    <p>My name is young.</p>
  </div>
</div>

↓css

.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
  line-height: 400px;
}

.info {
  background-color: lime;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

 

 

다른 방식?

위의 방법들 말고도 세로 가운데 정렬을 하는 다양한 방식들이 있다고한다.

포지셔닝을 이용할 수도 있고, 최근에 나온 flexbox도 있다고 한다. 다음에 공부해봐야겠다.

 

https://www.w3schools.com/css/css3_flexbox.asp

 

CSS Flexbox (Flexible Box)

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

 

'개발 공부 > HTML, CSS' 카테고리의 다른 글

HTML/CSS _ float 활용 그리드(grid) 만들어 배치하기  (0) 2022.03.01
HTML/CSS _ 포지션(position) relative,absolute 정리  (0) 2022.02.28
HTML/CSS _ 선택자 정리 (부모,자식,복수,여러개,Pseudo-class (가상 클래스))  (0) 2022.02.28

'개발 공부/HTML, CSS'의 다른글

  • 현재글HTML/CSS _ display 기본 및 text-align, vertical-align, iline-height (feat. flexbox)

관련글

댓글

티스토리툴바