새로운 작심삼일 시작
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
margin: 10px;
padding: 10px;
background-color: bisque;
}
</style>
</head>
<body>
<span>h1</span>
<span>h2</span>
</body>
</html>
|
- 위 처럼 inline 요소에 margin 을 적용하면, 어떻게 될까? → 근데, 말 했듯이 inline 은 너비와 높이가 없다고 했음. 좌우로는 margin 이 적용 되긴 함. 그러나 상-하 방향으로는 적용이 안됨. ==> block 으로 바꿔야만 상-하 방향으로 margin적용이 된다!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <style>
span {
background-color: teal;
}
#tomato1,
#tomato2,
#tomato3 {
background-color: tomato;
}
</style>
</head>
<body>
<span>h1</span>
<span id="tomato1">h2</span>
<span>h3</span>
<span id="tomato2">h4</span>
<span>h5</span>
<span id="tomato3">h6</span>
|
- 다른 id 를 가졌지만, 동일한 속성을 적용하고 싶을 경우 위 처럼 가능함. 그러나, id가 유사해서 나중에 헷갈릴 수 있음. id 는 다른 html tag 간 서로 다른게 좋다! 그런데, 동일한 속성을 일괄적용하고 싶으면 어떡함???? → Class 를 사용하면 해결가능하다.
1
2
3
4
5
6
7
8
9
| #tomato1,
#tomato2,
#tomato3 {
background-color: tomato;
}
.tomato {
background-color: tomato;
}
|
- 위 처럼 class 를 통해 다른 id 를 가졌더라도 동일한 속성을 적용할 수 있게 만들 수 있다.( #selector == id, .selector == class)
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>
div {
display: inline-block;
background-color: blue;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
|
4.위 처럼, block 요소인 div 를 inline 형태로 만들면 한 줄에같이 배치됨. 근데 내가 만들지 않은 여백이 div 사이에 만들어져있음. → 이유는 정확히 모름.그리고, inline-block 은 오래된 기능이라 반응형으로 동작하지 않음. 해상도에 따라서 웹 페이지의 내용이 다르게 보이는 문제가 발생!!!!
- 이것을 해결하기 위해, flexbox 라는 것을 이용. 이때 주의할 것이 있음. -> 내가 flexbox 로 만들고 싶은 요소에 직접 설정하는 게 아니고, 부모 요소를 flex 로 설정하면 된다. 무슨 말이냐?
1
2
3
4
5
| <body>
<div></div>
<div></div>
<div></div>
</body>
|
- 아래 코드를 보면, div 는 body tag 내에 생성된 자식 요소. div 의 부모는 body 다!! → body 를 flex 로 설정하면 div 가 inline 처럼 한 줄에 모두 표시됨! 당연히 여백도 사라진다!
1
2
3
4
5
| body {
display: flex;
justify-content: space-evenly;
al
}
|
flex 가 갖는 축 방향(기본값, 근데 둘의 방향을 바꿔줄 수도 있음! 그러니 고정이라고 생각 말기)
- flex 로 설정한 요소는 다음과 같은 축을 갖는데, 수평 방향으로는 main axis 이며 수직 방향으로 cross axis 라고 칭함. → justify-content 속성을 통해 자식 요소들이 flex 내에서 main axis 상 어떤 위치에 있을지 정할 수 있음. → align-items 속성을 통해 자식 요소들이 flex 내에서 cross axis 상 어떤 위치에 있을지 정할 수 있음.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <style>
div {
display: flex;
background-color: blue;
width: 150px;
height: 150px;
justify-content: center;
align-items: center;
}
body {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100vh;
flex-wrap: wrap;
}
</style>
</head>
<body>
<span>span</span>
<div>1</div>
<div>2</div>
<div>3</div>
|
8.flex 로 설정한 요소들이 한 줄에 모두 배열되면 해상도에 따라 원래 설정해준 크기를 무시하고 줄어드는데, 이걸 원하지 않고 크기가 안 맞으면 다음 줄로 넘겨주고 싶으면 flex-wrap 속성을 이용하면 됨. 위 예시 코드를 보면, wrap 으로 설정해서 해상도가 줄어들면(브라우저 크기가 작아지면) 그냥 다음 줄로 넘겨서 표시해줌. nowrap 이 기본값.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <style>
body {
height: 1000vh;
}
div {
background-color: blue;
height: 150px;
width: 150px;
}
.a {
position: fixed;
background-color: brown;
width: 200px;
}
</style>
</head>
<body>
<div></div>
<div class="a"></div>
|
- position: fixed; 를 사용하면, 지정한 요소의 위치를 화면 스크롤해도 고정해줌. 웹 사이트를 보면 메뉴가 계속 따라오는 것을 연상하면 어떤건지 이해하기쉽다!
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
| <style>
body {
height: 1000vh;
}
div {
background-color: blue;
height: 150px;
width: 150px;
}
.a {
position: relative;
background-color: brown;
width: 200px;
}
.green {
position: relative;
background-color: teal;
height: 130px;
width: 130px;
top: -7px;
}
</style>
</head>
<body>
<div>
<div class="green">
</div>
</div>
|
- 위 예시를 보면, class=”green” 인 div tag 의 position 을 relative 로 설정했는데, 이것은 처음 이 요소가 위치한 그 자리를 기준으로 원하는 만큼 옮길 수 있게 만들어줌. 예를 들어 top: -7px 로 하면 기준으로부터 -7 픽셀만큼이동.
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
| <style>
body {
height: 1000vh;
}
div {
background-color: blue;
height: 150px;
width: 150px;
position: relative;
}
.green {
position: absolute;
background-color: teal;
height: 130px;
width: 130px;
right: 0px;
}
</style>
<body>
<div>
<div class="green">
</div>
</div>
</body>
|
- 다음으로는, postion=”absolute” 가 있음. absolute 로 설정한 요소는, position 이 relative 로 설정된 가장 가까운 부모의 위치를 기준으로 위치를 설정함. 위 예시에서, div 의 position 을 다른 것으로 변경하면 가장 가까운 부모가 없기 때문에 그냥 body 를 기준으로 absolute 위치가 설정됨.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <style>
body {
height: 1000vh;
}
div {
background-color: blue;
height: 150px;
width: 150px;
}
div:first-child {
background-color: coral;
}
div:last-child {
background-color: red;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
|
12.위 코드를 보면 div:first-child, div:last-child 처럼 n번 째 요소만 선택하고 싶은 경우가 있을 수 있다. → Pseudo Selector 라고 한다!
1
2
3
4
5
6
7
8
9
| div:nth-child(even) {
background-color: coral;
}
div:nth-child(odd) {
background-color: red;
}
div:nth-child(5n + 1) {
background-color: red;
}
|
- 이렇게 규칙을 만들어 줄수있다.
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
| <style>
span {
color: tomato;
background-color: yellowgreen;
border-radius: 5px;
}
p span {
color: teal;
}
div > span {
text-decoration: underline;
}
p + span {
color: black;
}
</style>
</head>
<body>
<div>
<span> div > span </span>
<p>
Lorem ipsum dolor,
sit amet consectetur adipisicing elit.
Consectetur voluptatem veritatis
quasi neque corporis
voluptatibus praesentium
ad rerum possimus
doloremque minima vitae odit,
non iste optio eligendi totam.
Non, doloribus. <span> p span </span>
</p>
<span> div > span & p + span & span ~ span</span>
</div>
|
마지막으로는 Pseudo Selector 인데, 위 div 를 보면 span이 3개가 있음. 이 span 에 개별적으로 각각 속성을 부여하고 싶으면 어떻게 할 수 있을까? 위 pseudo selector 마다 적용되는 것들에 대해 content 를 매치시켜놨으니 저것을 보고 이해하자~ → “>” 은 바로 아래에 있는 자식에 대한 pseudo selector, “ ”(공백)은 자식 요소를 선택하는 pseudo selector, “+” 은 바로 다음에 나오는 형제자매에 대한 pseudo selector, “~” 은 형제 자매 요소에 대한 pseudo selector.
또한, tag 가 가진 atrribute 를 지정할 수 있는 selector 도 있음. 이거는 지금 눈에 잘 안들어오니, 내일 다시 정리해보자..!
-1.png)