@ position 속성 -
relative > 원래 있던 위치를 기준으로 좌표를 지정한다.
absolute > 절대좌표와 함께 위치를 지정한다.
fixed > 스크롤과 관계없이, 문서 최좌측상단을 기준으로 좌표고정되어 있다.
static > 잘 쓰진 않지만, 다른 태그와의 관계에 의해 자동배치, 임의지정xxx
@inline/ inline-block / block
inline
display 속성이 inline으로 지정된 요소는 한줄에 다른 요소들과 나란히 배치된다.
ex) sapn, a ,em
inline-block
display 속성이 inline-block으로 지정된 요소는 줄바꿈 없이 다른 요소들과
나란히 배치되지만 inline에서는 불가했던 width와 height 속성지정, margin과 padding 속성의 상하간격지정이 가능하다
ex) button, selector
block
속성이 block으로 지정된 요소는 혼자 한줄을 차지한다.
그리고 inline 요소와 달리 width, height, margin, padding속성이 모두 반영된다.
ex) div, p , h1
@float
요즘에는 flex에 밀려 잘 쓰이지도 않는다지만 은근히 float을 짚고 넘어가기 어려워 끙끙 앓았다.
float에는
inherit : 부모요소를 상속
left : 왼쪽에 부유하는 블록 박스생성
right : 오른쪽에 부유하는 블록 박스생성
none : 기본값, 요소를 띄우지 않는다.
float을 적용한 요소는 문서의 흐름상 벗어나 레이아웃을 무너뜨릴 수 있다.
이러한 문제를 해결하기 위해서는 float을 해제해주어야 한다.
clear 속성을 적용하여 float의 영향을 받지 않도록 한다는 의미이다.
하루를 마치며🤔
여유있게 학습을 시작했지만 그러면 안됐었다.
나는 항상 여유를 가지려고 할 때 스스로의 성장과 멀어졌다.
똑같은 실수를 반복하지 않아야지
몰입하자
