Web6 Web Speech API - SpeechSynthesis ✅ 설명 Web Speech API는 음성 데이터를 웹에서 사용할 수 있게 한다. Web Speech API는 두 가지 종류로 나뉘는데 이는 텍스트를 음성으로 변환하는 SpeechSynthesis와 비동기적으로 음성을 인식하는 SpeechRecognition이다. SpeechRecognition(음성 인식)은 일반적인 장치의 오디오 입력에서 음성 컨텍스트를 인식하고 적절하게 응답하는 기능을 제공한다. 일반적으로 음성이 입력될 때 여러 이벤트를 처리할 수 있는 개체를 만든다. SpeechSynthesis(음성 합성)는 음성 서비스를 위한 컨트롤러 인터페이스이다. SpeechSynthesis는 텍스트를 알맞은 음성으로 대치시키고 해당 음성을 들리게 하거나 멈출 수 있다. 정리하자면 SpeechSynthesi.. 2022. 1. 19. HTML 약어 구문 ✅ 중첩 연산자 Child > > 연산자를 이용해 부모-자식 관계를 만들 수 있다. li 태그가 존재하고 li 태그의 부모가 ul, ul 태그의 부모가 div라면 이 관계는 div>ul>li로 만들 수 있다. Sibling + + 연산자를 이용해 형제 자매 관계를 만들 수 있다. 즉, 동일한 수준의 요소를 만들 수 있다. div 태그와 p 태그 그리고 a 태그가 존재하는데 이 세 개의 태그가 형제 자매 관계라면 이 관계는 div+p+a로 만들 수 있다. Climb-up ^ ^ 연산자를 이용해 한 단계 위로 올라가 요소를 추가할 수 있다. 일반적으로 > 연산자를 이용하면 부모-자식 관계를 만들 수 있으며 깊이 단계가 늘어난다. 따라서 ^ 연산자를 이용하는 것은 부모의 형제를 만드는 것과 같다. 원하는 만큼.. 2022. 1. 17. TweenMax - Card Animation1 인터랙티브 개발 실무 끝장내기 강의를 듣고 정리한 내용입니다. See the Pen WNpjQMo by rnrn99 (@rnrn99) on CodePen. 만들 내용 상단 제목 카드 5개 Random 버튼과 Reset버튼 카드는 왼쪽 상단 -> 중앙으로 이동하며 정렬. Random 버튼은 카드 위치와 각도를 무작위로 설정. Reset 버튼은 카드를 중앙 정렬로 되돌림. 2021. 5. 24. 페이지 스크롤 인터랙티브 개발 실무 끝장내기 강의를 듣고 정리한 내용입니다. 정리도 만들 내용 - 상품명 - 상품 설명 - 상품 사진 -> 페이지 이동에 따라 애니메이션 효과 - 오른쪽 페이지 버튼 -> 누르면 해당 페이지 이동 / 검은색 = 현재 페이지 HTML NIKE 스니커즈 블레이저 미드 '77 빈티지 나이키 블레이저 미드 '77 빈티지는 빈티지한 중창 마감 처리로 나이키 올드 스쿨 농구화의 느낌을 살렸으며, 마치 수년간 보관해온 듯한 룩을 연출합니다. 에어맥스 95 나이키 에어맥스 95에는 놀랄만큼 편안한 착화감과 시선을 사로잡는 스타일, 그리고 재생 소재가 어우러져 있습니다. 펠트, 메쉬 그리고 인조가죽의 풍부한 텍스처를 선보이며 클래식 러닝 DNA에 새로운 디자인을 선사합니다. 적당히 두툼한 디자인과 부드.. 2021. 5. 15. 숫자게임 HTML 내가 생각한 숫자는? (1~10 사이에 있습니다.) 확인 CSS body { height: 100vh; background: linear-gradient(120deg, #0272a4, #f6a564); } .contWrap { position: relative; width: 400px; background: rgba(255,255,255,0.7); padding: 50px 20px; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; border-radius: 20px 20px 20px 20px; } .box { display: inline-flex; } input { margin-right: 5px; paddin.. 2021. 5. 13. 가위바위보 문제 정리 HTML reset 가위 vs 가위 결과 CSS h1 { font-size: 100px; font-weight: bold; } h2 { font-size: 50px; font-weight: bold; margin-left: 5rem; } p { font-size: 30px; } button { font-size: 20px; padding: 10px 30px; cursor: pointer; } Java Script window.onload = function() { var button = document.querySelector(".startBtn"); var text1 = document.getElementsByTagName("h1")[0]; var text2 = document.getElement.. 2021. 5. 12. 이전 1 다음
