input checkbox 커스텀
.txt-hide{
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}<input type="checkbox" id="inpHold" class="inp-hold txt-hide">
<label for="inpHold" class="labl-hold">로그인 상태 유지</label>.form-login .labl-hold::before{
display: inline-block;
content: '';
width: 22px;
height: 22px;
margin-right: 8px;
background-image: url(../images-login/icon_check_empty.png);
vertical-align: -5px;
cursor: pointer;
}스타일링이 까다로운 input요소를 txt-hide로 화면에서 감춰주고 label 요소를 연결하여 스타일링을 진행한다. checkbox는 가상요소로 처리해주었다.
IR(Image Replacement) 테크닉
naver에서 사용하는 방법
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}clip 속성은 position: absolute; 와 같이 쓰인다.
width와 heigth가 0이 아닌 1px인 이유는 스크린 리더는 높이와 너비가 0인 요소를 읽을 수 없기 때문이다.
margin: -1px;의 존재에 대한 논란
추측만 난무하고 결론은 없었지만 대표님께서 멘토님과 회의(?)해본 말씀으론 부모 밖으로 내보내기 위한 의도로 보이고, 한 곳이 아닌 여러 페이지에서 혹시 모를 여백에 대비하는 의도로 보인다고 하셨다. 여기서 혹시 모를 여백이란, 모바일에서 left: -9999em; 으로 텍스트를 날려버릴 때 에러가 발생할 수 있는데(스크린리더가 텍스트를 인지하지 못하고 스킵하는 경우, 폼요소에 포커스하는 이슈) 이런 에러 발생을 방지하는 의도로 보인다고 하셨다.
어쩌면 그냥 레거시일수도,, ?
img {
position: absolute;
top: 0;
left: 0;
clip: rect(0px 212px 238px 0px);
}rect는 네모로 자르겠다는 의미이며
clip: rect(0px 212px 238px 0px);
이처럼 right와 bottom이 이미지 사이즈로 남아야 원본 상태가 유지되고
이것을 0으로 줄이면 오른쪽 밑쪽에서 이미지가 잘려서 없어진다.
반대로 top과 left를 늘리면 그만큼 잘리게 된다.
CSS Sprite 기법
여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법이다. 이미지가 자주 바뀌어야 하는 경우, 오히려 sprite의 이미지가 더 큰 경우에는 사용하지 않는다.
레티나 디스플레이 대응법
- 화면에 우리가 그리고자 하는 사이즈의 2배 되는 이미지를 준비한다. 피그마에서 배수로 추출이 가능하다.
sprite img를 생성해준다.
@media screen and(-webkit-min-device-pixel-ratio :2 )- 미디어 쿼리에서
sprite image의background-size,background-position을 지정해준다.(둘 다 원래 크기의 2로 나눠서 지정해준다.)
Bootstrap
-
Bootstrap
grid
Hoverable rows
spacing
images -
Bootstrap plugin
sweetalert2
datepicker
summernote (bootstrap 4까지)
bootstrap-select
