@import "reset.scss"; $default_color: blue; .test { color: $default_color; .gap { color: $default_color; } &red { color: red; } } %box { color: aqua; border: 1px solid #000; } .boxExp { @extend %box; } //동일한 네임스페이스 처리 .box { font: { weight: bold; size: 10px; family: sans-serif; }} // @at-root // 중첩 벗어나기 .list { $w: 100px; $h: 50px; @at-root .boxList { width: $w; height: $h; }} // !default // 값이 ..
1. input type="file" 이미지 화 label { display: inline-block; cursor: pointer;} input { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0);} 2. input type="checkbox" 이미지 화 .checkbox { display:none; } .checkbox +label { display: inline-block; height:19px; padding-left: 26px; line-height: 22px; background: url(ico_checkbox.png) no..
전제를 감쌓는 경우 wrap form body area - 패딩을 넣을 클래스 여러 태그를 그룹화할 경우 *-group 하위 태그를 그룹화 할때 사용 *-itme ul, ol등에 사용 *-simulation 설문 목록을 묶을때 *-box 배경색을 포함한 글자들을 묶을때 menu - 메뉴를 감쌀떄. 단일 태그 혹은 그룹태그에 사용 control 어떤 대상을 조정/제어하는 경우 required 필수값을 표시할떄 pragraph 문단 들에 사용 immutable 변경할 수 없는 곳에 사용
1. animation animation-name: @keyframes 이름 (예제에서는 fadeOut 을 사용) animation-duratuion: 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용 animation-timing-function: 애니메이션 속도 조절/그래프 (linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier) animation-delay: 애니메이션을 시작하기 전 지연시간 설정 animation-iteration-count: 반복 횟수 지정 animation-direction: 반복 방향 설정 (normal/reverse/alternate/alternate-reverse) animation-fill-mode: 애니메이션 시..
잘 사용하지 않지만 유용한 CSS 속성
1. text-transform - 대문자 전환 속성 내용 none 기본값으로, 텍스트를 html 코드에 있는 그대로 읽음 capitalize 각 단어의 첫번째 문자를 대문자로 만듦(예: Seoul National Univ.) uppeercase 모든 문자를 대문자로 바꿈 (예: SEOUL NATIONAL UNIV.) lowercase 모든 문자를 소문자로 바꿈 (예: seoul national univ.) 출처: aboooks.tistory.com/181 2. CSS로 입력 필드에 입력 내용이 없음을 알려주는 UI 만들기 이름 input{ padding: 10px; border-radius: 10px; background-color: #e0e0e0; outline: none; border: none; ..