개발34 테이블 헤더와 1열 고정된 스크롤 테이블 만들기 (position: sticky) CSS의 position: sticky를 사용해 테이블 헤더와 첫 번째 열이 고정되어 있는 가로, 세로 스크롤 테이블을 만들어 보았다. position: sticky 사용 시 '주의할 점' 첫 번째는 부모 요소 안에서 위치 값을 고정시켜 준다는 점이다. 두 번째는 top, bottom, left, right 중에 하나는 필수적으로 꼭 넣어야 position: sticky가 작동한다는 점이다. 마지막으로 IE11 이하 버전은 지원하지 않는다는 점을 주의해야 한다. position: sticky의 브라우저별 대응 여부는 아래 링크 글을 통해 더 자세히 확인해 볼 수 있다. HTML, CSS 크로스브라우징 확인하는 사이트 * 사이트명을 클릭하면 해당 페이지로 이동합니다. Can I use 사이트 브라우저마다 .. 2022. 9. 15. text-decoration으로 텍스트에 선 꾸미기 1. text-decoration? 텍스트를 선으로 꾸밀 수 있는 속성이다. text-decoration은 선의 종류, 스타일, 색상, 선 두께를 설정할 수 있으며 선의 종류를 중복으로 사용해 텍스트를 여러 선으로 꾸밀 수 있다. 2. text-decoration 속성 [선의 종류] none : 선 없음 line-through : 글자 중간에 선을 만듦 overline : 글자 위에 선을 만듦 underline : 글자 아래에 선을 만듦 initial : 기본값으로 설정함 inherit : 부모 요소의 속성값을 상속 받음 [선 스타일] solid : 실선 wavy : 웨이브 선 dashed : 짧은 선 3. 적용 예시 [HTML] text-decoration: none text-decoration: li.. 2022. 9. 14. box-sizing 속성 알아보기 1. box-sizing? 박스의 너비와 높이를 어떤 기준으로 계산할지 정하는 속성이다. 속성 값은 content-box, border-box가 있다. 2. box-sizing 속성 content-box : 너비와 높이가 콘텐츠를 기준으로 계산된다. border-box : 너비와 높이가 테두리를 포함해서 계산된다. 3. content-box 적용 예시 [HTML, CSS] box-sizing: content-box 총 너비(640px) : width(600px) + 좌.우 padding(20px) + 좌·우 border 두께(20px) [결과 화면] box-sizing: content-box 인 경우 콘텐츠를 기준으로 총 너비가 나타나기 때문에 기존 width 600px에 padding값 좌, 우 각10.. 2022. 9. 13. white-space으로 공백 처리하는 방법 알아보기 1. white-space? white-space은 띄어쓰기, 탭, 줄바꿈 등 공백을 처리하는 방법에 대한 속성이다. 속성 값으로는 normal / nowrap / pre / pre-wrap / pre-line 있다. 2. white-space 속성 스페이스(띄어쓰기), 탭(들여쓰기) 자동 줄바꿈 입력시 줄바꿈 normal 띄어쓰기 1칸으로 표시됨 ○ × nowrap 띄어쓰기 1칸으로 표시됨 × × pre 스페이스, 탭 그대로 적용됨 × ○ pre-wrap 스페이스, 탭 그대로 적용됨 ○ ○ pre-line 띄어쓰기 1칸으로 표시됨 ○ ○ [white-space: normal] 기본값으로 연속된 공백(스페이스와 탭)의 경우 하나의 공백으로 처리되며 자동 줄바꿈 되어 영역 내에서 내용이 표시된다. [whi.. 2022. 9. 13. 이전 1 2 3 4 5 6 ··· 9 다음
