디자인적 개성을 위해서 실무에서는 인풋 요소나, 선택 박스를 브라우저 스타일과 다르게 표현하기도 한다고 함.
input 요소는 스타일링이 까다로워 input 요소를 숨기고 label 요소를 연결하여 스타일링을 함.
(새벽까지 조금 해볼 예정.)
IR?
의미가 포함된 image를 배경으로 표현하고, 그에 상응하는 내용을 텍스트로 전경에 기입하는 방법.
시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다.
(출처 : https://dolly77.tistory.com/26)
카카오가 사용하는 방법
1. PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할 때
.ir_pm{
display:block;
overflow:hidden;
Font-size:1px;
line-height:0;
text-indent:-9999px;
}
(text indent를 아주작은수로 두어 감춘 모습)
.ir_pm{
display:block;
overflow:hidden;
font-size:1px;
line-height:0;
color:transparent;
}
(글자색을 투명하게 함.)
.screen_out {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
(스크린 리더는 width, height 가 0이면 안읽는다.)
.ir_wa{
display:block;
overflow:hidden;
position:relative;
z-index:-1;
width:100%;
height:100%
}
여러가지 이미지를 하나의 이미지 파일 안에 배치해서 이미지 로드 부담을 줄이는 방법.
많은 사이트들이 사용하고 있음.
이미지 합쳐주는 사이트:
https://www.toptal.com/developers/css/sprite-generator/
이미지 로드를 빨리하기 위해 이미지를 최적화주는 크라켄을 알게 됨.
사이트 링크 : https://kraken.io/
레티나?
원인?
대응방법
레티나 디스플레이에 미디어 쿼리를 주거나
css의 img-set 속성을 이용하면 된다.
또는 img 태그에 srcSet 속성으로 레티나 디스플레이를 대응해주면 된다.
부트스트랩?
웹 프레임워크.
반응형 사이트를 구축하는데 최적화 되어있다고함.
https://getbootstrap.com/
스터디할 때 공부한 것으로는 트위터에서 시작된 오픈소스고 엄청 거대하긴 한데
커스텀이 힘들고 부트스트랩으로 만든 사이트는 비슷하다는 단점이 있다고 함.
많은 것을 실습했는데, 어려운 건 없고 필요한 기능은 그떄 그떄 검색해서 써도 될듯 하다.
진짜 이거 써서 사이트만들기 너무 쉬운것 같음..
그래서 포트폴리오에는 절대 사용하지 말라고 하심.
시간을 잘 쓰자.