반응형
margin: 바깥쪽 여백
padding : 안쪽 여백
inline block
: 글씨와 마찬가지이기 때문에 여백이 발생, 공간을 나눠쓰는 친구들은 글자라고 생각하기.
: 여백을 없애기위해 font-size 0으로 하고 다른 영역에서 고쳐주기
: display: inline-block; 을 주면 넓이와 폭을 줄 수 있다.
p와 같이 inline요소는 가운데 정렬을 하기 위해 margin : 0 auto;로!
더보기
p{
width: 95%;
border:1px solid red;
margin : 0 auto;
padding : 10px;
}
overflow
: 특정영역 밖으로 넘치는 내용물을 어떻게 처리할 것인가?
position
absolute, relative, static
relative
: 부모를 따르지 않고 원래 자신의 위치를 기준으로 움직임.
absolute
: 기준점이 자기의 부모이다.
: 포지션이 있는 부모만 absolute의 부모 기준이 될 수 있다. 포지션이 없다면 다음의 부모를 찾아 body를 기준으로 잡는다. 따라서 부모의 position을 absolute, relative, static 중 무엇을 줄 지 고민해야 한다.
fixed
: 모니터화면 body 부분에 고정된다.
block에서의 (위아래)margin은 상쇄가 되어버린다.
item에 줄 수 있는 속성들
-flex-basis: 아이템의 크기 지정
width(축이 row), height(축이 column)
auto : default
flex-grow: 여백을 나눠갖음
.item:nth-child(1){
flex-grow:1;
}
.item:nth-child(2){
flex-grow:2;
}
.item:nth-child(3){
flex-grow:1;
}
반응형