안녕하세요

보호되어 있는 글입니다.

youtube영상을 반응형으로 화면 크기에 맞추어 변하도록 하는 방법을 익힙니다. 같은 원리로 Kakaomap을 삽입할 수 있습니다. [220622 반응형 youtube, Kakaomap, YTPlayer] [ 220622 html / css / js ] YTPlayer 를 활용하여 background에 동영상을 넣고 전체화면 버튼을 만듭니다. 유튜브 동영상을 반응형으로 만드는 방법입니다. iframe에 원하는 youtube 소스코드를 복사하고 붙여넣습니다. https://www.youtube.com/embed/21ZNI_fYw0s" title="utb - Chantiers d'avenir - Rosny-sous-bois" frameborder="0" allow="accelerometer; autopla..

transform-origin을 활용하면 회전 축을 직접 지정할 수 있습니다. background video를 적용하는 방법도 복습합니다. [220621-tranform-origin 적용모습] [220621-tranform-origin예시-html] [220621-fixed background를 활용하여 색상이 차오르는 연출을 합니다.] 한 배경은 grayscale()을 적용하고 다른 배경을 겹치도록 위치하여 스크롤을 내림에 따라 색상이 차오르는 연출이 가능합니다. transform-origin 속성으로 rotate의 기준점을 정할 수 있습니다. bottom의 center를 기준으로 -30deg 회전시킵니다. .container figure img { transform-origin: bottom cent..

이번 주는 지금까지 배운 내용을 복습합니다. 예비군이 있기 때문에 모든 수업을 다 들을 수 없고 시안을 만들 시간도 촉박합니다. 학원에서는 가능한 선에서 최선을 다하고 집에서 혼자 할 수 있는 부분을 보충해야겠습니다. [220620-banner와 form 태그를 만들었습니다.] [ 220620-html / 220620-css / 220620-js ] html 에서 space는 입니다. & 는 & 입니다. search는 form 태그를 통해서 만듭니다. action에 입력받을 값이 들어가게 됩니다. input에는 내용에 들어갈 형식을 정합니다. input에 입력한 값을 form의 action으로 전달하기 위해서는 button 태그를 이용합니다. #searchForm input[type="text"] 원하는..