IT/CSS5 [폰트] @font-face{} 적용하기 1. @font-face font-family, src, font-style, font-weight, unicode-range속성 적용가능 2. font-familly 속성 하나의 변수로 생각하면됨 font-family : myfont; 3. src 폰트 찾는 순서 local() - 로컬에 설치 된 폰트 적용 url() - 다운로드 할 웹폰트 주소 4. format() 브라우져별로 미적용되는 불필요 다운로드를 방지 5. unicode-range 지정한 범위 내 지정한 문자가 없으면 웹폰트를 다운하지 않음 단일, '-'범위, '?'와일드카드, 참고 사이트 : 블로그 2020. 9. 29. [체크박스] checkbox & label 높이 조절하기 1. checkbox & label 높이 조절하기 checkbox top값 +1.5px 또는 label top값 - 1.5px 로그인 상태 유지 2020. 9. 27. [가상 클래스] first-child, first-of-type - 요소 선택하기 first-child & first-of-type비교 대상:first-child는 대상 요소 형제중 대상 요소가 첫번째에 있을때만 선택 ex) .test div:first-child{ color : red } = is div tag first element in parent element? Yes! .test span:last-child{ color : blue } = is span tag first element in parent element? No! label tag is last-child .test label:last-child{ color : green } 대상:first-of-type는 대상 요소 형제중 대상 요소가 첫번째로 확인되는 요소 선택 ex) .test div:first-of-typ.. 2020. 9. 26. [정렬] css로 요소 화면 가운데 위치시키기 .html 로그인 페이지 입니다 로그인 로그인 하세요. 로그인 정보 입력폼 아이디 비밀번호 로그인 로그인 상태 유지 아이디 / 비밀번호 찾기 1. 블록 요소 수평 가운데 정렬 고정폭이 있어야함 ex) width: 300px; margin : 0 auto; 수평가운데 정렬 .center{ width: 100px; margin: 0 auto; } 2. 테이블 요소 수평 가운데 정렬 .center{ display: table; margin-left: auto; margin-right: auto; } 3. 수직 수평 가운데 정렬 .center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 4. 수직 수평 가운데 정렬 수.. 2020. 9. 26. [단위] 7가지(rem, vh, vw, vmin, vmax, ex, ch) 1. rem(=root em) rem의 r은 최상위를 뜻하는 root 최상위 태그 기준으로 폰트 사이즈를 결정 보통 최상위 태그는 html{ font-size: 12px; } div{ font-size: 1.5rem; /* 12px x 1.5rem = 18px*/ } 2. em 상위태그 기준으로 폰트 사이즈를 결정 html{ font-size: 12px; } body{ font-size: 20px; } div{ font-size: 1.5rem; /* 20px x 1.5rem = 30px*/ } 3. vh & vw (vertical height & vertical width) 브라우져 화면 크기를 기준으로 한 높이의 1/100, 즉 뷰포트의 1% 브라우져 화면의 width = 100px; height = .. 2020. 9. 25. 이전 1 다음 LIST
