z-index
2022. 10. 3. 02:38
CSS
z-index 가 쓸일이 생길지도 모르겠다. 우선 z-index 를 일일히 줄 필요가 없다. position : relative 를 사용하면 position 속성에 의해 우선순위가 올라감으로 우선순위를 점할 수 있다. 기본적으로 z-index 는 "ppt 나 한글문서의 맨 앞으로 가기" 와 비슷하다고 보면된다. -높을수록 가장 우선순위를 점하게 되며 -기본 값은 0이다. -만약 z-index 가 1인 친구 밑에 z-index 가 0인 버튼이 있다면 클릭되지 않는다. 보일지라도 덮혀져 있기 때문이다.
position
2022. 10. 2. 20:12
CSS
static, relative, absolute, fixed, sticky 등이 있다 기본적으로 position 은 static 이며, 부모요소에 relative , 자식요소에 absolute 를 주고 사용한다 relatvice 는 상대적인 개념이라 position 을 취해도 크게 변화는 없으며, absolute 의 경우 어디를 부모로 보느냐에 따라 많이 달라진다. 또한 position 속성을 부여하게 되면, left, top, bottom, right, z-index 등을 사용할 수 있게 된다.
transition
2022. 10. 2. 20:10
CSS
예를들어 , :hover 했을 때 어떤 동작을 취한다고 했을 때, 그 순간에다가 transition 을 주지말고, 원래 그 요소에게 transition 을 주면 브라우저에 의해 스무하게 동작이 표현된다 transition : transform 300ms ease-in; transition : 0.5s 등, 세세한건 직접 눈으로 확인하면서 적용하자.
float 시, 부모요소의 높이값이 사라진다.
2022. 10. 2. 20:08
CSS
float left, right 나눌때 꼭 left 도 명시를 해 줘야 한다. float 를 사용할 경우, 부모요소의 높이가 사라지는데 이것은 float 라는 단어 자체로 그 의미를 생각하는 것이 편하고, overflow:hidden; 또는 높이값 수동으로 주기(비추) 등의 조치를 취할 수 있다.