반응형 HTML5 [html] 따라다니는 이미지 버튼 만들기 홈페이지 양옆 또는 맨아래에 따라다니는 이미지 만드는 방법입니다. 버튼에 position:fixed를 주면 현재 화면에 버튼이 고정되며, 스타일에서 top,left 등으로 위치를 정해주면 됩니다. html 부분 html 부분은 btn이라는 클래스로 잡아두고 간단히 작성했습니다. css부분 .btn{ position:fixed; right:10px; bottom:30px; } css 부분은 btn에 position만 fixex 해두고 오른쪽에서 10px 떨어진곳, 바닥에서 30px 떨어진 쪽에 버튼이 고정됩니다. 2022. 9. 22. [CSS] 반응형 중앙정렬 (transform 이용) 반응형일때 이미지나, 배경의 중앙정렬이 골치아플때 자주 이용하는 기법. 부모형태를 작성하고 .boxcenter 부분을 이용 하면 된다. HTML 부분 box style 부분 .container { position: relative; width:300px; height:200px; background:red; margin:0 auto; } .boxcenter{ position: absolute; top:50%; left:50%; width:30%; height:30%; background:blue; text-align:center; transform: translate(-50%, -50%) } 결과 2022. 9. 6. [HTML] 웹에서 유튜브 영상 불러오기 웹에서 영상 재생하고 싶을때 사용합니다. 영상을 자신의 유튜브채널에 업로드 하시고, 재생중인 영상에 마우스 오른쪽 클릭하면 소스코드 복사 클릭 하시면 소스코드가 복사됩니다. [원본 복사 영상 코드] 기본적으로 위처럼 복사되는데 복사된 유튜브 영상을 자동재생, 소리뮤트 하고싶을땐 영상 코드 뒤에 autoplay=1, mute=1 을 넣어줍니다. [수정 코드] autoplay, mute처럼 유튜브 매개변수들은 https://developers.google.com/youtube/player_parameters?hl=ko YouTube 내장 플레이어 및 플레이어 매개변수 | YouTube IFrame Player API | Google Developers YouTube 내장 플레이어 및 플레이어 매개변수 개요 .. 2022. 9. 5. [Jquery] 이미지 떨림효과 주기 마우스 올렸을때 이미지가 떨리는것처럼 보이는 효과 입니다. 이미지를 icon 클래스의 div로 감싸주었습니다. 스크립트 하단 쪽에 스크립트 넣어줍니다. 2022. 8. 25. 이전 1 2 다음 반응형
