오늘 목표
CSS 파트
display 🙆♀️
positioning 🙆♀️
colors 🙅♀️
오늘 공부한 것
그전에 공부한 CSS 파트의 Box model 에 이어서 dispaly 와 positioning 에 대해 공부하였다.
display 에는 inline, block, inline-block 이 있다.
block 은 가로 영역을 다 차지하고 높이와 너비 조절이 가능하다.
inline 은 필요한 만큼만 공간을 차지하고 높이와 너비 조절이 불가능하다.
inline-block 은 필요한 만큼만 공간을 차지하고 높이와 너비 조절이 가능하다.
position 은 기본값인 statu 와 relative, absolute, fixed 가 있다.
fixed 는 특정 위치에 element를 고정시키는 기능을 한다. 이 element 는 스크롤에 상관없이 고정된다.
relative 는 element 의 원래 위치에서 상대적으로 위치를 이동시킬 수 있다. offset 특성을 사용하여 지정할 수 있다.
absolute 는 형제 태그를 무시하고 relateive 또는 absolute 인 제일 가까운 부모 태그 옆에 위치한다.
z-index 는 position: absolute , position: relative , position: fixed 와 함께 쓸 수 있다.
z-index 는 정수로 쓰이는데 숫자가 높을 수록 앞에 낮을수록 뒤에 위치한다.
.sample1 {
position: absolute;
z-index: 3;
}
.sample2 {
position: absolute;
z-index: 10;
}
.sample2 가 .sample1 보다 앞에 위치한다.특정 요소를 띄워 왼쪽 또는 오른쪽으로 이동시킬 수 있는 float( width 값이 있어야 적용 )
float 와 함께 쓰이는 clear 는 다른 요소와의 충돌을 막는다.
어려운 부분
Display 부분은 이해할 만했는데 Positioning 부분에서 많이 헤맸다. 계속 absolute 와 relative 의 차이가 헷갈려 두 번 정도 반복하고 직접 테스트해봤다.
퀴즈를 풀며 공부할 때 놓쳤던 z-index 가 display: statue 에는 적용이 안된다는 것도 다시 확인했다.
