학습/HTML(2)
-
flex box
1. justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. 2. align-items flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다 flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다. stretch: 요소들을 컨테이너에 맞도록 늘립니다. 3. flex-direction row: ..
2021.02.03 -
relative , absolute 차이
relative: 자신의 기존 자리인 static 자리가있는데 거기서 부터 이동한다. 단, 움직이고 있어도 static 자리는 차지하고잇다. absolute: 자신의 기존 자리인 static 자리는 없던것으로 된다. 부모중 relatve나 뭐 fixed 같은것을 인지하고 부모를 기준으로 잡는다. 즉, position 에서 static 속성이 없는 것을 부모로 잡는다. 그리고 그 부모로 부터 이동한다. 만약 부모가 없다면 창의 끝을 부모로 여기고 움직인다.
2021.02.03