팁스토리, Tips

■ CSS nth-child n배수 요소 선택하기 nth-child(n+n) ■ 사용법 # 4의 배수(4,8,12,16,20,···)의 요소 선택하기 A B C D E F G H I

■ CSS box-shadow 박스 그림자 효과 ■ 사용법 ↓ div 하단에 그림자 효과 ↓

■ 머티리얼 아이콘 material-icons 구글에서 제공하는 웹폰트 (아이콘) 모음 ■ 사용법 1. CSS 파일 적용 2. 하기 링크 내 사용할 아이콘 찾기 https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants. fonts.google.com Material Icons Get Material Icons material.io 3. 사용할 아이콘 i 태그 추가 home 4. 페이지 호출 시 정상적으로 ..

번호 이름 나이 1 가나다 20 2 라마바 30 3 자차카 40

table 영역 중 thead 는 고정시키고 tbody 는 특정 크기 이상일 경우 스크롤 할 수 있게 구현 [ HTML ] 이름 부서 직급 직책 생년월일 [ CSS ] /* 스크롤 스타일 정의 */ .table-fixed-header-wrap { position:relative; box-sizing:border-box; padding-top:33px; /* 기준점과 헤더영역 확보 */ width:670px; height:100%; margin:0 auto; /* 디자인에 따라 가로 세로 값 설정 */ } /* 실제 스크롤 영역 설정 */ .table-fixed-header-wrap .fixed-header-scroll { height:566px; overflow-x:hidden; overflow-y:au..

테이블 width 넓어짐 white-space: nowrap; 어떤 상황에서도 표 크기를 고정하고 싶다면 table-layout 속성을 사용(값을 fixed로 정하면 table의 크기가 커지지 않음) width: 500px; table-layout: fixed; 표 크기 고정 후 줄바꿈 word-break: break-all; // 텍스트 줄바꿈 처리 (개행): 단어 깨짐 word-break: keep-all; // 텍스트 줄바꿈 처리 (개행): 단어 깨지지 않음

선택 1 선택 2 선택 3 선택 4 선택 5 선택 1 선택 2 선택 3 선택 4 선택 5 선택 1 선택 2 선택 3 선택 4 선택 5 선택 1 선택 2 선택 3 선택 4 선택 5 실제 적용 시 1. 기본 2. 디자인적용 3. 화살표없애기 4. 이미지적용 익스플로러10,11에서 화살표를 없애려면 하기 소스 추가 select::-ms-expand { display:none;} 출처: https://blog.naver.com/nsoft21/221068494417

선택 1 선택 2 선택 3 선택 4 선택 5 선택 1 선택 2 선택 3 선택 4 선택 5 실제 적용 시 출처: https://blog.naver.com/nsoft21/221066796522

우리가 흔히 width 값을 쓸 때 %를 사용하거나, px을 많이 사용하는데 100%를 3등분 하는데 숫자가 딱 떨어지지 않을 때 사용할 수 있습니다 사용 방법 div {width:calc(100% -33%);} width:100%; width:calc(100% - 20%); width:calc(100% - 20px); width:calc(100% / 3); 실제 적용 시 출처: https://blog.naver.com/nsoft21/221060975688