CSS21 CSS ::before 위치 조정 요소 앞에 가상으로 요소를 만들어 주는 ::before를 사용하는 경우에 위치를 어떻게 조정할 수 있을까? absolute를 사용하여 원하는 위치에 배치할 수 있다. 다만, 아래와 같은 점을 염두하고 사용하는 것이 좋다. before의 display: absolute 사용시 -top/bottom 속성 값이 없는 경우: static 자리에 위치(before가 위치할 자리) -top/bottom 속성 값이 있는 경우: absolute를 사용한 일반 요소처럼 relative인 부모 기준으로 정렬됨 이해하기 위해서 ::before를 사용한 후 위의 속성들을 변경해보면서 위치를 파악해보면 된다. 2020. 5. 27. CSS 정가운데 간단히 정렬하는법 박스 하나를 영역의 정 가운데에 정렬하려면 어떻게 해야할까? 답은 여러가지가 있겠지만 쉬운 방법은 다음과 같다. position:absolutetop:50%; left:50%;transform: translate(-50%,-50%); 이 방법을 사용할 경우 같은 flow에 있던 요소들이 absolute된 요소를 인식하지 못하므로 주의가 필요하다. 또한, 부모요소에 relative를 걸어주어야 한다. 2020. 5. 27. CSS menubar click animation by js 메뉴바를 클릭했을 때 에니메이션 효과를 내면서 변화시키려면 어떻게 해야할까? 답은 css와 javascript를 활용하면 된다. 아래는 클릭 전과 후 화면이다. 우선 구현해두어야 할 것은 html, css소스를 구현해두어야 한다. css는 클릭 전과 후를 각각 구현해야 한다. html 소스는 다음과 같다. div를 이용하여 3개의 줄을 만든다. 클릭 전 css 소스를 보면 다음과 같다. 클릭 후 css 소스는 다음과 같다. transform을 이용하여 움직임을 구현한다. 클릭을 위한 자바스크립트 코드는 다음과 같다. 토글 방식으로 경우에 따라 css 속성을 변경해준다. 2020. 5. 20. HTML z-index with background div: relative ul, li: absolute 다음과 같은 구조일 때 ul, li에 background를 사용하면서 ul의 z-index를 사용하면 어떤 결과가 나타날까? li 배경이 보이면서 ul의 배경이 li 배경보다 앞 쪽 레이어에 위치시킬 수 있을까? 답은 이 구조하에서는 그럴 수 없다. 이 상황에서 z-index를 사용해도 stacking context에 영향을 미치지 않는다. 쉽게 말하면 css background 사용시 z-index를 변경하여 "배경을 맨 앞으로 가져오기" 같은 것을 할 수 없다. 차라리, li의 배경을 "맨 뒤로 보내서" ul의 배경만 표시하는 것은 가능하다. 그렇다면 어떻게 하면 될까 ul의 배경에 해당하는 것을 앞으로 가져올 수 있을까? 정답은 ul의 자식이면.. 2020. 5. 20. 이전 1 2 3 4 5 6 다음
