모든 HTML 요소는 박스 형태로 되어있음

---

margin

각자 값 주기

.margin{
margin-top:10px;
margin-right:10px;
margin-bottom:40px;
margin-left:30px;
}

상하좌우 다 주기

.margin-padding{
margin:10px;
padding:30px;
}

shortand

.margin{margin:10px} -> 상하좌우: 10px
.margin{margin:10px 20px} -> 상하: 10px, 좌우: 20px
.margin{margin:10px 20px 30px}-> 상: 10px, 좌우: 20px, 하: 30-px
.margin{margin:10px 20px 30px 40px}-> 상: 10px, 우: 20px, 하: 30-px, 좌:40px

border

.border{
border-width:2px;
border-style: dashed;
border-color: black;
}
=========================
.border{
border:2px dashed black;
}

마진상쇄 : margin이 겹치면 큰 마진 값으로 결합되는 현상

CSS display

 HTML 요소들을 시각적으로 어떻게 보여줄지 결정하는 속성

display : block

• 줄바꿈이 일어나는 요소
• 화면 크기 전체의 가로 폭을 차지한다.
• 블록 레벨 요소 안에 인라인 요소가 들어갈 수 있음 ex_) div / ul ol li / p / hr / form 등
  

display: inline

• 줄바꿈이 일어나지 않는 요소
• content 너비만큼 가로 폭을 차지한다.
• width , height, margin-top, margin-bottom 을 지정할 수 없다.
• 상하 여백은 line-height로 지정한다. ex_) span / a / img / input, label / b, em , strong, i 등
  

text-align : left; == margin-right:auto;  좌측정렬
text-align : right; == margin-left: auto; 우측정렬
text-align : center; == margin -right:auto; 중앙정렬
												margin -left: auto;

display : inline-block

• block inline 레벨 요소의 특징을 모두 갖는다.
• inline처럼 한 줄에 표시 가능하며,
• block처럼 width, height, margin 속성을 모두 지정할 수 있다.

display : none

• 해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다.
• visibility: hidden은 공간은 차지하나 표시를 하지 않는다.

---

CSS position

문서상에서 요소를 배치하는 방법을 지정

Static : 모든 태그의 기본값(기준 위치)

• 일반적인 요소의 배치 순서에 따름(좌상)
• 부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치됨

relative : 상대 위치

• 자기 자신의 static 위치를 기준으로 이동
• 레이아웃에서 요소가 차지하는 공간은 static일 때와 같음

absolute : 절대 위치

• 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음
• static이 아닌 가장 가까이 있는 부모 조상 요소를 기준으로 이동(없는 경우 body에 붙는 형태)

fixed : 고정 위치

• 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음
• 부모요소와 관계없이 viewport를 기준으로 이동
• 스크롤 시에도 항상 같은 곳에 위치함