🎨 CSS Sprite 기법
여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법
장점: 하나의 이미지만 받기 때문에 이미지 로드 속도가 향상된다
단점: 유지보수가 어렵다 (기존에 사용하던 이미지는 각각의 position 값이 정해져있기 때문에 이미지를 변경하면 설정 값들을 모두 바꿔줘야 한다. 새로 추가하더라도 용량이 커지게 되고 오히려 개별적인 이미지를 로드하는 것보다 로딩이 느려질 수 있다.)
🎨 레티나 디스플레이 대응법
레티나란?
특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가 넘을 경우)를 가진 애플 LCD 제품의 브랜드 이름
레티나 디스플레이
레티나(고해상도 화면)로 넘어오면서 논리픽셀(css에서 표현하는 화소의 기본 단위)과 물리픽셀(디바이스가 실제로 처리할 수 있는 화소의 기본 단위)의 차이가 발생한다. 그러나 브라우저는 css에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에 원래는 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀만큼 커져버리게 된다.
그 결과 레티나 화면에서 이미지가 흐려보이는 현상이 발생한다. ex) 네이버 쇼핑 메뉴
해결방법
화면에 그리고자 하는 원본 사이즈의 가로, 세로가 2배 되는 이미지를 준비한다
🎨 반응형 콘텐츠
반응형 이미지
width: 100%;max-width: 100%;
반응형 백그라운드 이미지
background-size: cover;background-size: contain;
반응형 비디오
- video 요소로 만드는 동영상의 반응형은 img 요소로 만드는 것처럼
width혹은max-width를 사용하면 된다 - 하지만 만약 youtube 비디오를 가져와서 반응형으로 만들어야 하는 상황에는 아래와 같이 한다
.cont-video {
position: relative;
padding-top: 56.25%;
/* height: 56.25vw; 가능 */
/* aspect-ratio: 16/9 가능 */
/* height:56.25%; 부모요소에 높이값이 없으면 불가능 */
}
.video-next-level {
position: absolute; /*높이가 안 나타는 것으로 보여짐*/
top: 0;
left: 0;
width: 100%;
height: 100%;
}💡 종횡비: 높이 / 너비 * 100
💡 이미지 디자인은 2로 나누기 편하게 짝수로 많이 작업하는 편이다
🪄 조건문
if 문
삼항연산자
let item = true ? console.log('true') : console.log('false');
console.log(item);
: item이라는 변수에 값을 할당하는 삼항연산자
: true는 Truthy 값이기 때문에 console.log('true')가 실행되고 그 반환값이 item에 할당된다
💡 console.log 함수는 반환값이 undefined이므로 item에는 undefined가 할당된다
삼항연산자는 if 문과 다르게 코드의 실행도 해주고 값으로 사용할 수 있다
if 문은 특정 코드 구문을 실행하는 문(Statement)이라면, 삼항연산자는 값으로 판단되는 표현식(Expression)이다
자바스크립트 공부하다 실무에서 사용되는 CSS로 살짝 돌아왔다ㅎㅎ 프로젝트할 때 잘 써먹어야지!👍🏻
