border: 말 그대로 box의 경계
모든 요소에 border 주고 싶으면 특수문자 별을 이용. 별은 전체를 뜻함.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Woohyun Times</title>
<!--<link href="style.css" rel="stylesheet" /> -->
<!--external CSS-->
<style>
/*inline CSS*/
* {
border: 2px solid black;
}
html {
background-color: tomato;
}
body {
margin: 20px;
padding: 20px;
background-color: aqua;
}
h1 {
font-size: 50px;
color: yellowgreen;
}
div {
padding: 20px;
border: 2px solid black;
}
span {
background-color: aquamarine;
border-style: dotted;
}
a {
background-color: blueviolet;
}
p {
background-color: blue;
}
#first {
background-color: red;
width: 150px;
height: 150px;
}
#second {
background-color: orange;
width: 100px;
height: 100px;
}
#third {
background-color: yellow;
width: 50px;
height: 50px;
}
/*margin : box의 border(경계)의 바깥에 있는 공간*/
/**/
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third"><span>hello</span></div>
</div>
</div>
</body>
</html>
block은 옆에 아무것도 올 수 없음
ㅡ> inline : width, height가 무시돼서 무언가 추가하지 않는 이상 아무것도 안보임
ㅡ> inline-block : 위 문제를 해결할 수 있어서 좋긴 한데, 반응형 디자인이 지원되지 않음(각 기기마다 만족하는 최적값을 일일히 찾아야 함
예 :10.5 ,10.4 ,10.3, ...... 10.01, ......10.08, 10.05,..10.05!)
ㅡ> 이 문제를 해결할 수 있는게 "flex"
inline block의 문제점을 해결하기 위해 "flexbox"를 생각해냈다.
flexbox 사용 규칙
vh = viewport height
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<style>
div {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: blueviolet;
}
body {
height: 100vh;
margin: 20px;
display: flex;
/*flex-direction: column;*/
justify-content: space-evenly;
align-items: center;
flex-wrap: nowrap;
}
span {
background-color: teal;
}
.btn {
padding: 5px 10px;
border-radius: 5px;
}
.tomato {
background-color: tomato;
color: white;
}
.teal {
background-color: teal;
}
</style>
</head>
<body>
<span class="teal btn">hello</span>
<span class="tomato btn">hello</span>
<span class="teal btn">hello</span>
<span class="tomato btn">hello</span>
<span class="teal btn">hello</span>
<span class="tomato btn">hello</span>
<span class="teal btn">hello</span>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>