전체 글20 [React] VSCode에서 Html 자동완성 간략방법 preferences -> settings -> emmet 검색 -> edit in settings.json -> 코드 삽입 상세설명 1) 맥기준, VS Code 아무곳 클릭하면 왼쪽 상단에 아래와 같이 경로를 찾아 들어갈 수 있게 뜹니다. code -> preferences -> settings 으로 들어가기. 2) settings 에서 emmet을 검색 후 'edit in settings.json' 클릭 3) settings.json 파일 안에 하기와 같이 입력 하고 vs code를 껐다가 다시 켜보면 완성 "emmet.includeLanguages": { "javascript": "javascriptreact" }, 2022. 8. 9. [웹접근성] 버튼이미지만 사용하는 경우 Button 닫기 버튼에서 아이콘만 사용하고 닫기라는 텍스트는 안들어가는 경우 화면에는 노출되지는 않지만 스크린리더기나 보이스리더에서 읽힐 수 있도록 '닫기'라는 텍스트를 표기해줘야 합니다. HTML 닫기 CSS .hidden, .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px; } 2022. 8. 8. 모바일 가이드 보고 position 비율값 찾기 만약 모바일 가이드를 가지고 다람쥐 이미지를 position으로 띄웠다고 가정, 다람쥐 이미지는 328px * 184px 이라고 가정을 하고, 오리는 top: 10px , left: 10px 이라고 가정을 해봅니다. 이럴땐, 퍼센트 계산기를 사용해야 합니다. 이런경우 여러 해상도에 맞춰 오리위치가 바뀌므로 오리 위치를 px로 고정하는 것이 아니라 퍼센트 계산을 통해 값을 넣어야 합니다. 계산법 ) left값 : (10px / 328px) * 100% = 3.04% Top값 : (10px / 184px) * 100% = 5.43% CSS position: absolute; top: 5.43%; left: 3.04%; 2022. 8. 8. 반응형 이미지 및 비디오 비율 맞추기 반응형 퍼블리싱 작업을 하다 보면 비디오 삽입을 하는경우가 많은데, 자주 요청받는 비율이 16:9 입니다. 16:9를 어떻게 적용하면 좋을까요? Padding-top 혹은 padding-bottom 사용 (동일) padding-top: 56.25%를 사용하는 방법이 있습니다. 사용예시 HTML CSS .video-inner { position: relative; padding-bottom: 56.25%; width: 500px; height: 0; background-color: pink; overflow: hidden; } .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 계산방법 이 56.25%는 9 / .. 2022. 8. 8. 이전 1 2 3 4 5 다음
