Develop_NOTE

태그에 autoplay,loop,muted등의 속성값을 주는건 흔한 일인데 어느순간부터 ios 비디오 정책으로 인해 아이폰등의 디바이스에서 해당 속성값을 사용할 경우 비디오가 전체화면으로 재생된다. 이 부분은 사용자들로 하여금 굉장히 좋지않은 사용성을 제공함으로 반드시 개선해줘야하는 부분이다. 아주 간단하게 개선할 수 있다. 기존에 자주 쓰는 속성에 [playsinline] 속성을 추가했다. 위의 속성을 추가하는 것만으로 IOS에서 전체화면으로 자동재생을 막고 정상적으로 작동할 수 있는 것을 확인 할 수 있다.

1.가로 말 줄임표. - 주의 사항) * block 형태의 요소여야 하며 해당요소 or 텍스트를 감싸고있는 요소의 부모요소의 width값이 지정된 형태여야 작동. * 자동 줄바꿈을 허용하지 않는 white-space: nowrap 속성과 값은 반드시 입력해야함. -HTML Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...

2.직접 스크립트 로직을 짜서 구현 *스크롤 페이드 인앤아웃의 구현 방식 - fade란 클래스를 가진 요소에게 스크롤 페이드 인앤 아웃 효과를 부여 할 것. - fade-left, fade-right, fade-up, fade-down, fade-zoom 등의 다양한 클래스를 활용하여 다양한 페이드 움직임을 부여. - 스크롤이 해당 요소위치에 있다면 요소가 등장 하지만 스크롤이 해당 요소보다 위에 있다면 해당 요소는 사라짐. 1. html 작성방식 2. SCSS 작성 방식 .fade { opacity: 0; transition: all 0.8s; &-left {transform: translateX(-50px);} &-right {transform: translateX(50px);} &-down {tra..

1. 스크롤 애니메이션 라이브러리(AOS) 활용 -AOS(Animate On Scroll Library) AOS는 자바스크립트를 다루는 방법을 몰라도 HTML 태그만 확인 할 줄 안다면 간단하게 스크롤 애니메이션을 구현 할 수 있는 라이브러리 이다. 간단한 적용 예시와 설명은 아래 링크 확인이 가능하다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 첫번째로, 두번째로, 태그 or 공통으로 지정될 common.js 파일에 AOS 라이브러리 초기화 스크립트를 작성한다. 여기까지 했다면 AOS 라이브러리를 사용하기 위한 준비과..

1. HTML 구조. 모두 동의합니다.

위 이미지의 기능은 어느홈페이지에서나 가장 쉽게 접할 수 있습니다. 위와 같이 셀렉트 박스에서 선택한 값(value)을 텍스트 input으로 가져올 수 있는 방법을 제이쿼리 방식이 아닌 순수 자바스크립트로 알아보겠습니다. -셀렉트박스의 '직접 입력'을 선택할 경우 "email_address"라는 id값을 가진 input을 활성화 -셀렉트박스의 '다른 이메일주소' 를 선택할 경우 선택한 이메일 주소값을 "email_address" id값을 가진 input 창에 자동으로 기입, 자동으로 비활성화 시키는 구성 직접입력 네이버 g메일 네이트 선택한 이메일값이 들어갈 input과 선택값이 들어가있는 select box를 만듭니다. //변수를 선언하여 input,select box를 할당 let email_addr..

가장 대중적으로 사용되고 저 역시도 사용하고있는 에디터인 비주얼 스튜디오 코드(vs code), 편리한 확장프로그램이 많아 편하게 사용하는 에디터입니다. 특히 vs code 에디터 내부에서 sass(scss)작업 및 컴파일까지 한번에 할 수 있는 방법이 존재하여 sass작업시에 매우 편리한 에디터라고 볼 수 있습니다. (vs code가 기존에 다운받아져 있다는 가정하에 sass작성 환경만 세팅하겠습니다.) 1. VS CODE 확장프로그램 'SASS' 설치 2. SASS파일을 CSS파일로 컴파일 해주는 확장프로그램 'Live Sass Compiler' 설치 3. 확장프로그램 설치 후 VS CODE 우측 하단에 'Watch Sass' , 'Go Live' 가 보이는지 확인 - scss파일을 작업하실때는 저 ..

이전에 유사배열 관련해서 포스팅했을때 익스에서 forEach()를 쓰지못한다고 올렸었으나 몇가지 해결 방법을 발견하게 됐습니다. 여러가지 해결방법이 있었으나 그 중 가장 간결해보이고 짧은 소스코드를 추가하여 해결하는 방안을 제시하겠습니다. - Array.prototype.forEach //아래의 조건문을 삽입 함으로서 forEach()를 사용 할 수 있다. if(window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } const tab = document.querySelectorAll("li"); tab.forEach(function(tabs) { tabs.addEventL..

태그는 리스트 컨텐츠를 나열할 때, 혹은 여러개의 간단한 탭버튼을 만들때 등 다방면으로 사용됩니다. 그렇다면 같은 클래스명을 가진 태그를 어떻게 동일한 이벤트로 처리할 수 있을까요? 'tab' 이 라는 클래스명을 가진 li태그 5개에 'active'라는 클래스를 toggle 하는 방식을 예시로 들겠습니다. tab tab tab tab tab let tab = document.querySelectorAll(".tab"); //1. tab 이라는 변수에 document.querySelectorAll(".tab")을 할당 //-위처럼 처리해줄 경우 'tab'이라는 클래스를 가진 모든 요소를 유사배열로 가져옵니다. for(let i = 0; i < tab.length; i++) { tab[i].onclick =..

웹을 제작하는데 있어서 반응형 웹(Responsive)은 기본이 된 만큼 그에 따른 CSS스킬도 중요해졌습니다. 태그를 사용한다면 'width: 100%; height: auto;' 로도 해상도에 따라 간단하게 종횡비 유지가 가능하지만 상황에 따라 태그를 사용하지 못하는 경우가 발생하고는 합니다. 그럴때 css의 background 속성으로 이미지를 대체하게 된다면? 높이값을 필수적으로 기입해줘야 하기 때문에 위의 'width:100%; height: auto;' 는 효력을 발휘하지 못하게 됩니다. 이럴때 사용할 수 있는 것이 CSS3의 함수인 calc()입니다. 가로 500px, 세로 400px의 이미지를 해상도에 따라 반응하여 종횡비를 유지해야 하는 이미지가 있다고 예를 들어 보겠습니다. .bg { ..