▸padding

큰 패딩을 입을 수록 '덩치'가 커진다.

▸margin

면적은 그대로 거리만 떨어트린다.

<style>
  div > span { width:50px;}
  .one{
  	background: skyblue;
  	padding:20px
  }
  .two{
   	background: greenyellow;
    padding:10px;
  }
  .three{
  	background:yellow;
  	padding:10px;
  	margin:50px
  }
  .four{
  	background:red;
  	padding:10px;
 }
  
</style>

▸기본값 설정 해놓기

*{
	border-collapse:collapse;
    margin:0px;
    padding:0px;
    text-decoration:none;
    color:black;
    list-style:none;
}

---

▸display

1. inline

span처럼 자기 영역만 차지

2. block

div 처럼 한 줄 차지

3. none

존재는 하지만, 안보이게

4. flex

인라인 처럼 만들기

사용방법 :
부모태그에 flex를 주면 flexible 하게 바뀐다
자식태그에 flex 속성에 값을 주면 범위를 차지한다.

<style>
.parent{
  	display:flex;
  	background:skyblue;
 }
  
.parent > div{
  	margin:10px;
  	height:40px;
  	width:50px;
  	text-align:center;
  	line-height:40px;  
  	
}
.bad {
  	background: pink;
  	flex:3;
}
.child{
  background:greenyellow;
  flex:1;
}
</style>

---

▸line-height

글자높이 맞추기

▸text-align

텍스트의 정렬 방향

center, left, right

▸가상 클래스 선택자

선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일 설정 가능
ex) :hover

<div class="change">호버하면 색이 변해요</div>
<style>
  .change{
  font-size:40px;
  }
  .change:hover{ 
  background:skyblue;
  font-size:50px;
  transition:.35s;
  font-weight:bold;
  }
</style>

▸transition

시간을 주고 변하게 하기

▸font-family

글꼴 종류로, <font> 태그의 face 속성과 효과가 같습니다.
쉼표(,)로 여러 글꼴을 등록 할 수 있는데, 이때 맨 앞에 있는 글꼴을 우선으로 적용시키며, 맨 앞에 있는 글꼴이 사용자의 컴퓨터에 없을 때 그 다음 글꼴을 사용하게 됩니다.
font-family: 나눔고딕,NanumGothic,돋움,Dotum;

▸back-ground

▸cursor

마우스를 올렸을 때 손가락 모양 뜨게 하기
cursor:pointer 로 자주 사용한다