개발34 테이블 1열이 고정된 가로 스크롤 테이블 만들기 (position: sticky) 데이터 양이 증가하면 스크롤 길이가 길어지면서 데이터 구별이 어려워지는데 엑셀에서는 틀 고정을 이용해서 데이터를 쉽게 파악할 수 있다. 그래서 이번에는 CSS의 position: sticky를 사용해 좌우 스크롤을 해도 테이블의 첫 번째 열은 고정되어 있는 테이블을 만들어 보려 한다. 1. position: sticky ? 부모 요소 안에서 위치값을 고정시켜준다. top, bottom, left, right 중에 하나는 필수적으로 꼭 설정해야 한다. IE11이하 버전은 지원하지 않는다. 2. HTML, CSS 소스 [HTML] Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8 Cell01 Cell02 Cell03 Cell04 .. 2022. 8. 23. 크롬에서 이미지 흐리게 나올 때 선명하게 만드는 방법 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. 이전 1 ··· 4 5 6 7 8 9 다음
