[멋사 프론트엔드 스쿨]9월 22일 목요일 TIL_CSS 실무 테크닉

CSS 실무 테크닉

 

browser 마다 기본 설정이 달라서 조금씩 다르게 보인다

 

custom input, select box

디자이너가 초보일 때 간혹 활성화된 버튼 이미지만 주는 경우가 있는데,

비활성화 된 이미지도 요청하면 된다

 

input checkbox custom

firefox safari 브라우저로 번걸아 보는데 정말 다르다 (사파리 못생김..)

 

• select,option 태그를 사용하면 커스터마이징이 어렵다
• 모바일에서는 운영체제마다 다르기 때문에 따로 커스터마이징을 하지 않는다

 

피그마 실습 버튼 만들기

https://www.figma.com/file/c4mPUK5xcqzzRVBadSu6BG/%EB%A9%8B%EC%82%AC_%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%8A%A4%EC%BF%A8_3%EA%B8%B0?node-id=4624%3A2536 

Figma

 

[깨알면접팁] 면접보는 회사가 하는 서비스를 반드시 알아야한다
ex) ...써보셨어요?
-사이트를 크롬, 사파리, 파이어폭스 등 여러 브라우저로 다 돌려봤을 때
레이아웃이 깨지는지를 확인해서 면접 때 대답한다

 

IR(Image Replacement)

ㅋㅋㅇ

1. image 내 의미있는 텍스트의 대체 텍스트를 제공할 때(pc)
2. image 내 의미있는 텍스트의 대체 텍스트를 제공할 때(mobile)
3. 스크린리더 X, 마크업 구조상 필요 O
4. 이미지가 로드되지 않았을 때 대체 텍스트를 나타낼 때

/*1*/
.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

/*2*/
.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
  /* transparent 키워드는 IE9부터 사용 가능*/
}

/*3*/
.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

/*4*/
.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}

ㄴㅇㅂ

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

ㅋㅍ

.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

https://mulder21c.github.io/2019/03/22/screen-hide-text/#visibility-%EC%9D%B4%EC%9A%A9

접근 가능한 숨김 텍스트

 

image sprite 기법

https://www.toptal.com/developers/css/sprite-generator/

CSS Sprites Generator Tool | Toptal®

• 장점 : 스크린리더가 사이트를 렌더링 할 때 더 빠르다
• 단점(면접 질문) : 용량이 너무 커 질 수 있다, 수정이 불편하다

https://www.youtube.com/watch?v=fKyLCIqWjIY

힙재현 강사님

레티나 디스플레이 대응법

PPI = Pixel Per Inchi

2배의 이미지를 준비해줘야한다 (애플;)

반응형 컨텐츠 만들기

백그라운드 사이즈 속성

• background-size : contain
  컨테이너 전체를 덮되 이미지를 자르지 않게 유지
• background-size : cover
  컨테이너 전체를 완전히 덮는다

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers

Media container formats (file types) - Web media technologies | MDN

 

video 속성

• preload =“none”, “auto”;
  페이지를 로드할때 영상을 미리 로드할지 말지 결정합니다.
• poster
  비디오를 내려받을 동안 혹은 영상을 재생할때까지 표시할 이미지를 지정합니다.
• controls
  브라우저가 재생에 핋요한 컨트롤러를 제공할지 지정합니다.
• autoplay
  파일이 다운로드가 완료되면 자동으로 재생될지 지정하는 속성입니다.
• muted
  소리를 끕니다.
• loop
  비디오가 끝나고 반복적으로 재생할지 지정합니다.

 

반응형 동영상 만들기

youtube video를 가져와 반응형으로 만들어야 한다면?

iframe 사용

부모 position : relative

자식 position : absolute