미디어 쿼리
화면의 종류와 크기에 따라서 디자인을 달리 줄수 있는 CSS의 기능이다.
500px 이하일때 배경을 red
501~600px 일때 배경을 green
601px~ 일때 배경을 blue로 줘보자.
하지만 이럴경우 red와 green은 범위가 겹치게 되면서(0부터 500까지) red의 효과가 나오지 않는다.
이유는 캐스캐이딩에 의해 더 늦게 나온 코드가 효과를 얻고 앞에 나온 코드는 묻히게 되기 때문이다.
만약 500px 미만은 글이 세로로 정렬되게 하고 500px 이상부터는 글이 가로로 정렬 되게 하려면 미디어쿼리를 이용해 어떻게 조정해줘야 할까?
max-width:500까지는 세로로 나오게 하고 그 이상부터는 flex의 기본값이 가로로 나오게 한다.
float
글의 본문에서 이미지 삽입할 때 사용한다. 또한 레이아웃을 잡을 때 사용하기도 한다.
위 사진의 경우 float left를 통해 사진을 왼쪽으로 정렬했다.
p태그에 border를 넣어주면
p태그가 이미지를 피해가도록 되어있다. 그래서 border위에 사진이 있는 것을 볼 수 있다.
border와 사진이 겹치지 않기 위해서는 어떻게 해야할까?
p태그에 "clear:both;"를 주면 된다. 원래 clear:right; clear:left;도 있는데 귀찮으니까 both를 쓰는게 편리하다.
float을 사용한 holt grail layout
float는 띄워주는 느낌이라 생각하면 된다.
그리고 float의 힘이 매우 세서 float가 아닌 애들이 float의 영역을 침범하지 못한다.
article이 float 선언해준 nav 영역을 침범해주지 못하는 것을 알 수 있다. 이럴 때는 article에도 float:left를 해주면 된다.
만약 border가 겹쳐서 시각적으로 예쁘지 않다면
margin-left:-1px 또는 marign-right:-1px을 해주면 된다.
가운데에 박스를 정렬하고 싶으면 margin:auto를 쓰면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<!doctype>
<html>
<head>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
.container {
width: 540px;
border: 1px solid gray;
margin: auto;
}
header {
border-bottom: 1px solid gray;
}
nav {
float: left;
width: 120px;
border-right: 1px solid gray;
}
/*float의 힘은 매우 셈*/
article {
float: left;
width: 300px;
border-left: 1px solid gray;
margin-left: -1px;
}
aside {
float: left;
width: 120px;
border-left: 1px solid gray;
}
nav,
article,
aside {
border: 1px solid gray;
margin-left: -1px;
}
footer {
border-top: 1px solid gray;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>
CSS
</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Voluptate minus, obcaecati quia eaque perspiciatis!
Vero cum libero architecto. Odit, et. Totam expedita
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptate minus, obcaecati quia eaque perspiciatis!
Vero cum libero architecto. Odit, et. Totam expedita
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptate minus, obcaecati quia eaque perspiciatis!
Vero cum libero architecto. Odit, et. Totam expedita
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Voluptate minus, obcaecati quia eaque perspiciatis!
Vero cum libero architecto. Odit, et. Totam expedita
</article>
<aside>
ad
</aside>
<footer>
copyright;
</footer>
</div>
</body>
</html>
|
cs |
다단
이렇게 긴 글을 두 파트로 나눠서 정렬할 때 쓰는 것이 column-count이다.
나는 2분할을 했기 때문에 column-count:2로 했다.
근데 지금 2분할 된 경계가 좀 들쑥날쑥 해서 이걸 가지런히 정렬해보겠다.
이럴 땐 text-align:justify를 해주면된다.
만약 column을 픽셀에 맞게 나누고 싶을 수도 있다. 예를 들어 200px에 맞춰 나누고 싶을 땐
column-width를 사용하면 된다.
그리고 column-count와 column-width를 함께 사용가능하다.
그리고 column 사이의 경계를 좀 늘리고 싶다! 하면 column-gap을 쓰면 된다.
이런식으로 column에 1px solid red 선을 주려면 어떻게 해야할까?
column-rule-style --> solid/dash/dotted 한 선을 줄지 결정
colum-rule-color -->선의 색깔 결정
column-rule-width --> 몇 픽셀의 선(선의 두께)을 줄지 결정
이렇게 column 사이에 있는 "아무말"이라는 h1 앨리먼트가 column을 초월해서 자리를 차지하게 하고 싶으면
column-span:all;을 이용하면 된다.
'CSS > 생활코딩' 카테고리의 다른 글
| [CSS] transform/transition (0) | 2022.03.31 |
|---|---|
| [CSS기초] 그래픽 (+ 반응형 웹 단위 ) (0) | 2022.03.31 |
| [CSS기초] flex (0) | 2022.03.29 |
| [CSS]position (0) | 2022.03.28 |
| [CSS기초] 캐스 케이딩과 레이아웃 (0) | 2022.03.28 |
댓글