display/position/background

margin은 border를 기준으로 바깥 여백이고,
padding은 border를 기준으로 안쪽 여백을 의미한다.

top, right, bottom, left 순으로 작성

태그는 display 속성의 block 값을 가지고 있다. display:block -> block은 무조건 한 줄을 차지한다. display:inline -> width/height 적용불가 -> margin/padding-top/bottom 적용 불가 -> line-height 원하는대로 적용 불가 display:inline-block -> inline의 단점 모두 커버 내가 정하거나 필요한 크기만큼 설정 -> 동일 라인에 여러 태그 붙일 때 사용 display:flex ->주어진 공간 안에서 크기와 위치를 자동으로 조정

inline-block vs flex
inline-block을 사용할 경우 width(넒이)를 직접 정해주어야 한다.
flex를 사용할 경우 flex값만 지정해주면 알아서 width(넓이)를 지정해준다.

position
position:static
-> 디폴트 값 offset(떨어진 정도)값 무시
position:relative
-> 자기가 원래 위치해야하는 위치를 기준으로 상대적인 offset 거리만큼 이동 (자기자신을 기준으로 배치)
position:absolute
-> 브라우저를 기준으로 배치
position:fixed
-> 고정 스크린을 기준으로 배치

background-repeat
background-repeat:repeat
-> 디폴트 값, 배경 이미지가 수직,수평으로 반복 영역 벗어나는 부분은 잘려서 보여진다.
background-repeat:no-repeat
->배경 이미지가 반복되지 않는다.

background-position
background-position 배경 이미지 위치를 결정한다.

728x90