HTML15 input 체크박스 CSS 변경하기 1. 체크박스 CSS 변경하기 는 브라우저마다 심플한 기본 디자인을 가지고 있다. 하지만 작업을 하다 보면 디자인 컨셉에 따라 체크박스를 변경해 주고 싶을 때가 있는데 이번에 input 체크박스 CSS 변경 방법을 기록하려 한다. 2. HTML, CSS 소스 [HTML] 선택! [CSS] 3. 결과 화면 2022. 8. 19. z-index 값을 올려도 적용이 안 되는 이유 1. z-index 위치 지정 속성으로 z-index 값의 숫자가 클수록 위로 올라가고 작을수록 아래로 내려간다. 2. z-index 적용 안되는 이유 position:absolute 또는 position: relative 속성이 없는 경우 z-index가 적용되지 않는다. 부모 요소와 자식 요소 모두 position:absolute 가 적용되어 있는 경우에 자식 요소의 z-index 값을 아무리 올려도 부모 요소를 벗어나서 작동할 수 없기 때문에 z-index가 적용되지 않는다. 2022. 8. 19. CSS로 말풍선(tooltip) 만들기 1. 툴팁(tooltip)? 툴팁이란 해당 영역에 마우스를 올리면 부가적으로 정보가 나타나게 하는 것을 말한다. 2. 결과 3. HTML, CSS 소스 [HTML] 말풍선 나와라! 말풍선 나왔다! [CSS] 2022. 8. 17. float 적용 시 발생하는 부모의 높이 문제 해결 방법 1. 오류 부분 2. 원인 부모 요소에 height:auto이거나 높이가 없는경우, 자식 요소의 높이를 인식하지 못하고 감싸지 못해 위의 오류가 발생했다. 3. 해결 방법 [부모요소와 자식요소 모두 다 float를 주는 방법] 1 2 3 [부모요소에 overflow:hidden을 주는 방법] 1 2 3 [after 가상 선택자를 이용하는 방법] ★가장 많이 사용됨★ 1 2 3 부모class (혹은 id) :after { content : ""; display : block; clear : both; } 가상 선택자를 이용한 방법은 실무에서 가장 많이 사용하는 방법으로 .clearfixed:after{content: ""; display: block; clear: both;} 라고 만들어 두고 필요한 곳에.. 2022. 8. 16. 이전 1 2 3 4 다음
