position:absolute2 자주 쓰는 서브메뉴창 분석: html 구조 및 css 아래와 같은 화면에서 모델을 누르면 하위 메뉴창이 나오게 하려면 어떻게 해야할까? 답은 다음과 같은 구조이다. box_tab 에 position: relative를 주고 현대, 모델, 세부모델 div를 box_tab 자식으로 둔다. 각각 텍스트, 메뉴창을 자식으로 줘서 관리한다. 현대 메뉴창 내용 ... 와 같은 형식이다. id="list"에 대해서는 position absolute를 줘서 box_tab을 기준으로 위치 시킨다. 이를 통해서 간단한 구조로 메뉴창 위치를 잡을 수 있다. 실제로 위 코드를 분석해보려면 엔카 사이트를 들어가보면 된다. 토글되는 방식은 자바스크립트를 이용해서 동적으로 바꿔주면 된다. 여러 방법이 있으니 javascript click toggle example로 검색해서 예제를 .. 2020. 10. 11. CSS position position은 요소의 위치를 조정하기 위해서 사용된다. 원래 배치되기로 한 곳에서 조금 조정하거나 특정한 방식으로 찾은 부모 요소를 기준으로 배치를 하거나 하는 것이다. position 사용시 z-index이라는 z축에 우선순위를 주는 속성이 있다. 한글 프로그램에서 그림이 여러 개 겹쳐있을 때 '맨 앞으로' 같은 것을 생각하면 쉽다. position을 사용하면 같은 영역안에서 다른 박스와 겹치는 부분이 생길 수 있으므로 주의해야한다. 즉, 여러 겹의 레이어가 쌓이는 상황이 발생한다. 각 속성값을 보면서 활용방법을 생각해보면 유용할 것이다. static default 값이다. 즉, 모든 요소는 static이 기본 값으로서 inline, block 박스들이 나열되는 방법들을 잘 알고 있으면 된다. in.. 2020. 5. 9. 이전 1 다음
