- padding은 margin과 반대 개념이다.
- padding은 box의 경계로부터 '안쪽'에 있는 공간이다.
- 값의 개수에 따라 적용되는 방향은 margin과 동일하다.
- 여러 div를 생성했을 때 'id'를 이용하여 div들을 구분할 수 있고, 각각 다른 속성을 적용시킬 수 있다.
- CSS로 first div에 속성을 적용 시킬 땐, #first {}
- 이는 body, span 등에서도 마찬가지다.
- CSS 코드의 id명은 HTML 코드에서 썼던 id명과 같아야 한다.
border: 말 그대로 box의 경계
- border 종류는 많은데 다 못생겨서 거의 한 종류의 border만 씀
- border : 굵기(line-width)/종류(style)/색상(color)
- style 종류는 solid가 실선, dashed가 점선
- inline과 block 모두 적용됨
모든 요소에 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>- span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.
- 하지만 padding은 사방에 가질 수 있다.
- 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.
- 온점(.)은 class명이라는 뜻.
- #tomato는 id="tomato"/.tomato는 class="tomato" 라는 의미
- id명과 다르게 class명은 유일할 필요가 없다. 여러 요소들이 여러 개의 클래스를 동시에 쓸 수 있다.
- class 속에는 btn과 tomato를 연이어 넣어 각각 다른 class 속성을 동시에 부여할 수도 있다.
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 사용 규칙
- 자식 엘리먼트에는 어떤 것도 적지 말아야 함.
자식 엘리먼트를 움직이게 하려면 부모 엘리먼트를 flex container로 만들어야 한다. - align-items : cross axis(교차축)에서 작용
- justify-content : main axis(주축)에서 작용
flex-container가 height를 가지고 있지 않으면 align-items를 사용하더라도 위치가 바뀌지 않음.
vh = viewport height
- justify-content나 align-items의 default를 변경하기 위해선, 'flex-direction'을 수정하면 된다.
- flex-direction에는 두 가지 속성, column과 row가 있다.
- display를 flex로 했을 때 default는 row이다. 따라서 flex-direction: column;을 주면 주축과 교차축이 반전된다.
- 원하는만큼 flex 부모-자식 엘리먼트를 만들어낼 수 있다.
- flex-wrap: nowrap;을 통해 wrapping이 일어나지 않게 할 수 있다.
- flexbox는 width값을 초기 사이즈로만 여기고, 모든 엘리먼트를 같은 줄에 있게 하기 위해 width를 바꾸기도 한다.
- flex-direction: column-reverse; 밑에서 시작해서 위로 올라가게 한다.(마찬가지로 row-reverse도 있다.)
- flex-wrap: wrap-reverse; 또한 있는데, 브라우저를 줄일 때, 엘리먼트가 겹쳐지는 위치가 역전된다.
<!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>
조급함보다는 꾸준하게