본문 바로가기
728x90
반응형

웹UI46

HTML/CSS) css hover 속성 onmouseover 대신 css의 선택자에 :hover를 주어 비슷한 효과를 줄 수 있다 하지만 선택자에 기능을 담아 실행 여러가지를 실행할 때에는 hover 기능 실행 시 선택자가 초기화 되면서 중복으로 실행되기 때문에 조심해야한다 2021. 4. 7.
HTML/CSS) display: flex 하위 영역 정렬 display: flex를 사용한 하위 영역 정렬 align-items: center; 2021. 4. 6.
HTML/CSS) position: relative와 absolute를 함께 사용하면 고정된 위치를 갖게된다 absolute로 하위 영역을 3차원으로 띄우지만 상위 영역의 범위 내에 머물게 하고 싶을 때가 종종 생긴다 -> absolute의 부모 객체, 바로 상위 영역에 relative를 주면 쉽게 구현이 가능하다 ** 1다리라도 건너면 안되고 바로 상위 영역에 줘야함.. 2021. 4. 5.
HTML/CSS) 조금은 많이 어려운..html과 css 1px box-sizing을 border-box로 가져가더라도 해당 섹션에서 가장 큰 영역에 border로 선을 그린 후 하위 영역을 선택한다면 선의 굵기 만큼의 margin이 잡힌다 슬라이드 배너를 위해 onmouseover 속성을 해당 섹션 최상위 영역에 주면서 해결..ㅠ 와 이거 또걸렸다.. 이번에는 그냥 onclick 시에만 border: none; 을 주는 방법으로 해결.......ㅜ 작업은 상단의 좌측 영역 -> 하단의 우측 순서로 코드와 마찬가지로 영역은 좌->우 , 위->아래 순서로 쌓인다 작업을 차곡차곡 하면 뒤에 신경 쓸 일이 적다 3차원의 함정 ** css를 적용할수록 html이 무너진다면 3차원 속성을 갖는 영역 위주로 살피면 됨 밸런스 게임 css의 3차원 속성을 마음껏 쓰려면 h.. 2021. 4. 2.
728x90
반응형