[국비지원] 2일차 수업 - display, position, margin

 

수업에서 배운 내용을 따라 만들수록 레이아웃을 단단하게 만들어놓고 작업하는 게 중요하다고 느껴졌다.

그래서 오늘은 레이아웃 정리!

 

display

• 블럭 요소 : 박스 형태를 가짐, 한줄에 하나씩 나옴 (div, p 등)
• 인라인 요소 : 컨텐츠를 담는 형태를 가짐, 한줄에 여러개씩 나옴 (span 등)
• 인라인-블럭 : 박스 형태, 한줄에 여러개씩 나옴

position

• static : 포지션 기본값, 포지션을 주어도 움직이지 않음. 기본 위치를 기억한다는 특징이 있음
• relative : 원래 자리에서 '상대적으로' 입력한 값만큼 움직임
• absolute : 가장 가까운 부모 기준으로 입력한 값만큼 움직임, 자기의 크기를 따로 가짐
  relative를 부모로 가지고 부모가  모두 static이라면 body를 기준으로 함"
  겹쳐지면서 아래의 요소를 가림
• fixed: 윈도우(전체 화면) 기준으로 입력한 값만큼 움직임, 자기의 크기를 따로 가짐
  겹쳐지면서 아래의 요소를 가림
• sticky: 원래 있어야 하는 자리에 있으면서 스크롤링 되어도 움직이지 않음

margin

 border의 밖에 있는 공간

 기본적으로 html요소에는 태그에 따라 margin이 들어가 있다. (margin: 0px으로 제거 필요)

•  margin-top(bottom,left,right) : 위 (아래,왼쪽,오른쪽)에서부터 입력한 값만큼 떨어뜨린다.
•  margin : 위,아래, 왼쪽, 오른쪽 모두 입력한 값만큼 떨어뜨린다.
•  margin auto : 전체 화면을 기준으로 자동 정렬

padding

 요소와 border 사이에 있는 것

 

 

z-index

 큰 숫자를 지정할수록 화면 앞으로 옴. position static에는 적용 불가능

 

animation

animation: 이름 시간 +

> @keyframes 이름{

0% 혹은 from {}

100% 혹은 to {}

}

 

animation-delay : 애니메이션 지연 시간을 설정

animation-fill-mode : 애니메이션이 끝난 후의 상태를 설정

animation : linear infinite : 애니메이션이 끝나지 않고 계속 재생됨

 

폰트 설정

@import url()로 폰트 주소 불러오기

font-family : 로 폰트 설정값 주기