### 모든 요소는 딱 한 개의 display 값을 갖고 있다!
1. display 종류
- inline display : 다른 요소들과 같은 줄에 머무르려고 하는 성향, 필요한 만큼의 가로 길이만 차지하는 성향
=> 기본 display : inline ==> <span> / <a> / <b> / <i> / <img> / <button>
-block display : 다른 요소들과 독단적인 줄에 가려고 하는 성향, 최대한 많은 가로 길이를 차지하는 성향
=> 기본 display : block ==> <div> / <h1> ~ <h6> / <p> / <nav> / <ul> / <li>
- display 바꾸기 (css 에서 바꿀 수 있음)
=> inline -> block
=> block -> inline
|
1
2
3
4
5
6
7
8
9
10
11
12
|
div {
display: inline; /* <div> 태그를 inline으로 바꾸기 */
}
.div1 {
background-color: green;
}
.div2 {
background-color: blue;
}
|
cs |
2. inline-block
## block 요소에는 가로 , 세로 길이 직접 설정가능하지만 / inline 요소는 자동으로 설정
- inline요소처럼 다른 요소와 같은 줄에 머물며 block 요소처럼 가로, 세로 길이도 설정해주고 싶다면?
=> inline-block 사용
|
1
2
3
4
5
6
7
|
i {
display: inline-block;
width: 200px;
height: 200px;
background-color: green;
}
|
cs |
3. <img> 태그의 비밀
|
1
|
<div class="container">아이스크림<img src="images/ice_cream.png" height="100">먹고싶다!</div>
|
cs |
## 사실 , <img>태그는 대체요소(replaced element)라고 함
-> 가로, 세로를 정할 수 있는 특별한 inline
-> 텍스트처럼 다룰 수 있음 (vertical-align)
-> 상위 class 또한 text-align으로 사용 가능
##다시 한번 이미지를 가운데 정렬하는 방법/부모에게 text-align을 줘도 가운데 정렬 가능하지만 조금 부적합함
|
1
2
3
4
5
|
img{
display: block;
margin-left: auto;
margin-right: auto;
}
|
cs |
4. 다양한 링크
<html>
|
1
2
3
4
5
|
<a class="google-link" href="https://google.com" target="_blank">
<img src="images/google.png" width="200">
<h1>구글</h1>
<p>이걸 누르면 구글로 갑니다!</p>
</a>
|
cs |
5. Baseline
## text : 바로 밑이 baseline
## img : 사진 바로 밑이 baseline
6. vertical-align
-base line : vertical-align의 조건들을 충족시키면서, 줄의 높이를 최소화시키는 곳에 위치
7. 세로 가운데 정렬 꿀팁
<가로 가운데 정렬>
- inline & inline-block 요소 : 부모 태그에 text-align:center;
|
1
2
3
4
|
.container {
text-align: center;
background-color: lime;
}
|
cs |
-block 요소 : margin-left: auto; , margin-right: auto;
|
1
2
3
4
5
6
7
|
.block-element {
width: 100px;
height: 50px;
margin-left: auto;
margin-right: auto;
background-color: lime;
}
|
cs |
<세로 가운데 정렬>
#vertical-align 속성은 인라인, 인라인 블록에서만 적용
-가짜 요소 더하기(세로 길이 100%인 요소 생성 -> 그 요소에 vertical-align: middle; -> 띄어쓰기 공간만큼 마이너스여백 주기)
<html>
|
1
2
3
4
5
6
7
8
|
<div class="container">
<div class="helper"></div>
<div class="info">
<h1>Hello!</h1>
<p>My name is young.</p>
</div>
</div>
|
cs |
<css>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.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;
width: 100%;
/* 이 경우 띄어쓰기는 5px 정도였습니다! */
margin-left: -5px;
}
|
cs |
-line-height으로 해결(info를 인라인 블록으로 설정 -> 부모에 line height -> info에 line-height: normal;(자식들에게 상속되기에)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.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;
}
|
cs |
'Web > HTML & CSS' 카테고리의 다른 글
| 9. float (0) | 2019.03.21 |
|---|---|
| 8. Positioning (0) | 2019.03.21 |
| 6. CSS 활용 (0) | 2019.03.12 |
| 5. BOX Model -(2) (0) | 2019.03.12 |
| 5. BOX Model -(1) (0) | 2019.03.03 |