본문 바로가기

분류 전체보기57

크롬에서 이미지 흐리게 나올 때 선명하게 만드는 방법 1. 크롬에 이미지 흐리게 나오는 문제 다른 브라우저에서는 괜찮은데 유독 크롬에서 이미지가 흐리고 깨져 보이는 경우가 있다. 그래서 그 부분에 대한 해결 방법을 기록하려 한다. 2. 해결 방법 [CSS] 2022. 8. 22.
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.
display: table로 너비가 동일한 메뉴버튼 만들기 1. display: table로 메뉴 버튼 만들기 옆으로 쭉 나열되는 메뉴 버튼은 float를 이용해 자주 작업했는데 메뉴 버튼 개수가 늘어나거나 줄어들면 매번 width:100%/n(개수) 수정해야 하는 불편함이 있었다. 그래서 다른 방법을 찾아보다가 dispaly: table를 이용한 방식을 알게 되어 기록하려 한다. [중요한 속성!] display: table - 다른 요소를 태그처럼 표현할 수 있는 속성이다. display : table-cell - 다른 요소를 태그처럼 표현할 수 있는 속성이다. table-layout: fixed - 너비를 고정시키는 속성으로 셀 내용에 따라 너비가 달라지지 않는다. 2. HTML, CSS 소스 [HTML] 바로가기1 바로가기2 바로가기3 바로가기4 [CSS].. 2022. 8. 18.