본문 바로가기

컴퓨터/HTML

(3)
[CSS] z-index와 쌓임 맥락(Stacking Context) z-index 에 대해 검색하다가 좋은 글을 보게되었다. [번역] z-index에 관해 아무도 말해 주지 않은 것이라는 글이고, 원문 What no one told you about z-index 을 번역한 글이다. 글을 읽으며 든 생각은 z-index가 적용되는 방식은 생각보다 복잡하며, 스펙에는 그러한 정보가 모두 들어있다는 점이다. 쌓임 순서 (Stacking Order)란? z-index가 높으면 위로 오고, z-index가 낮으면 아래로 가는 것이다. 쌓임 맥락 (Stacking Context)란? 같은 부모 밑에 쌓임 순서에 따라 앞뒤로 한꺼번에 움직일 수 있는 요소를 말한다. 쌓임 맥락이 만들어지는 조건은 - html 요소 (그 자체) - 요소가 position: static이 아니고, z-..
[CSS] 레이아웃 뭉개지는 문제 및 해결 방법 (진행중) 레이아웃 겹침 레이아웃 깨짐 레이아웃 뭉개짐 현상 ?? 자주 일어나는 레이아웃 문제를 나열하고 CASE 별 해결방법을 찾습니다. [CASE 1] 아래 이미지는 해당 태그(nav.go-back)가 부모를 벗어나 부모의 다음 형제(footer)과 곂치는 문제입니다. 해당 태그의 높이값이 없는 것을 확인할 수 있습니다. 해결방법 : 아래와 같이 해당 태그의 높이값을 지정해주면 됩니다. [CASE 2] (발견 후 작성 예정)
[HTML/JS] button을 누를 경우, 페이지가 reload 되는 현상 일반 button을 누를 경우, (버튼에 설정해놓은 이벤트 외에 추가로) 페이지가 제멋대로 reload 되는 경우가 있다. [원인] button이 form 태그 안에 있을 경우 발생한다. 덧붙여, button의 type 속성의 기본 값은 'submit'이다. 즉, 버튼을 클릭할 경우 123 ClickColored by Color Scriptercs 위와 아래 코드는 같은 동작을 한다. 123 ClickColored by Color Scriptercs [해결] 두가지 방법이 있는데, 상황에 따라 적절히 활용하면 될 것이다. 첫번째 방법은, button의 type을 'button'으로 설정하거나,123 ClickColored by Color Scriptercs 두번째는, form 태그를 div로 대체하면 된..