개요: 필자가 클론코딩을 들으면서 정리한 게시물이다.(3.8~3.11)
inline
border는 다 적용할 수 있으나 margin은 좌우만 적용할 수 있다.
또 padding은 사방 다 적용할 수 있다.
<header>
<title>CSH</title>
<style>
body {
}
span {
background-color: aqua;
padding: 20px;
margin: 30px;
}
div {
background-color: aqua;
padding: 20px;
margin: 30px;
}
</style>
</header>
<body>
<span>hello</span>
<div>hello</div>
</body>
</html>
다음과 같다.
class
#tomao1,
#tomao2{
background-color: red;
}
</style>
</header>
<body>
<span iid="tomao1">hello</span>
<span>hello</span>
<span id="tomao2">hello</span>
<span>hello</span>
이렇게 쓸 수 있지만 뭔가 지저분하고 간결하지가 않다.
}
.tomao{
background-color: red;
}
</style>
</header>
<body>
<span class="tomao">hello</span>
<span>hello</span>
<span class="tomao">hello</span>
<span>hello</span>
</body>
.는 클래스를 의미한다. 즉 이렇게 변화시킬 수 있다.
body {
margin: 50px;
}
.btn {
padding: 20px;
margin: 30px;
}
.teal {
background-color: aqua;
}
.tomao {
background-color: red;
border-radius: 10px;
}
</style>
</header>
<body>
<span class="btn, tomao">hello</span>
<span class="btn, teal">hello</span>
<span class="btn, tomao">hello</span>
<span class="btn, teal">hello</span>
</body>
class는 여러개의 이름을 갖고 있을 수 있어 다음과 같이 만들 수 있다.
body {
margin: 50px;
}
div {
display: inline-block;
width: 50px;
height: 50px;
background-color: teal;
}
</style>
</header>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
다음과 같이 div를 inline 및 block을 적용해서 바로옆에 요소를 옮길 수 있다.
하지만 이것은 반응형 디자인을 원하지 않아 일정 구간을 규칙적으로 할 수 없다.
그래서 이것은 좋은 방법이 아니다.
이걸 개선하기 위해 flexbox가 나왔다.
flexbox
규칙
- 자식 엘레먼트한테 말하지 않고 부모 엘레먼트에게만 말한다.
- justify-content는 main axis 교차축 옆으로 움직인다.
- align-itmes는 cross axix 교차축 위에서 움직인다.
body {
margin: 50px;
display: flex;
justify-content: space-between;
}
div {
width: 50px;
height: 50px;
background-color: teal;
}
</style>
</header>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
다음과 같이 body가 부모다. flex를 지정하면 요소가 옆으로 붙고 just... 를 써주면
알아서 지정이 되서 다음과 같이 뜬다.
음 원래 이렇게 뜨면 안되는데... 원인을 모르겠다...
body {
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
}
align... 를 center로 하면 가운데로 와야되는데 flex-container가 height를 가지고 있지 않아서 위치가 변하지 않음
따라서 다음과 같이 해준다.
vh - viewport high 화면크기에 따라 바꿀려고 쓰는거다.
쓰면
이렇게 된다. 즉 초기값이 수평이었는데 바뀌어 버렸다.
<style>
body {
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
}
div {
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: blue;
width: 300px;
height: 300px;
background-color: teal;
}
</style>
</header>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
다음과 같이 div안에다 숫자를 넣어주면 div도 똑같이 부모가 되어 flex를 쓸수 있어 조종 할 수 있다.
flex-direction: column-reverse;
세로로 거꾸로 출력
flex-direction: row-reverse;
가로로 거꾸로 출력
화면을 줄일 때 박스들이 겹치지 않는다.
이 게임을 통해 flex를 한번 익혀보도록 하자!
https://flexboxfroggy.com/#ko