[TIL] 2020-03-27

 

[ groomedu ]

- 웹 표준 사이트 만들기(2019) 14강 전체 메뉴까지 수강

 

[ 노마드 코더 ]

- ReactJS로 웹 서비스 만들기 #2. 2 Dynamic Component Generation까지 수강

 

[ 배운 내용 ]

<html, css>

이미지를 표현하는 방법

1. img 태그로 표현(의미가 있을 때) src속성, alt속성

2. background 속성으로 표현(의미가 없을 때) - 대체 문자 X 

3. 이미지를 background 속성 - 웹 표준 준수하기 위해서 가상으로 대체 문자를 만들어 줘야함(IR 효과), 이미지 스프라이트 효과

/* IR 효과 */
/* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0px;
  line-height: 0;
  text-indent: -9999px;
}

/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때*/
.ir_wa {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
.ir_su {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

 

< React >

- map() 함수