그누순정용 반응형 미디어 css 정보
그누순정용 반응형 미디어 css첨부파일
본문
얼마전 @웹메이킹 님이 언급한 css 와 예전에 @sinbi 님이 동기부여를 주었던 것까지 포함하여
유튜브, 유튜브쇼츠, 유튜브90도회전, 유튜브270도회전, mp4, mp3 까지의 반응형 태그를 가능하게 하는 기능을 오직 css 만으로 구현하였습니다.
사용방법은
본문이나 댓글의 에디터나 텍스트 옵션을 html 모드로 주고 div 의 class 만 적용하면 되겠습니다.
----------
기존에 반응형으로 사용했던 position 이나 padding 은 사용하지 않고 자바스크립트도 없으므로 말 그대로 거저먹기입니다.
가장 먼저 https://sir.kr/g5_plugin/11459 이 hook 이 깔려 있어야 합니다.
그리고 첨부 css 파일을 본인의 서버에 업로드한 후 view.skin.php 의 적당위치에 아래처럼 css 를 적용해 주세요.
저는 view.tail.skin 의 아무 적당위치에 주는 것을 선호합니다.
<link rel="stylesheet" href="css경로">
개인적으로 캐시 문제 때문에 js 파일이나 css 파일은 아래처럼 쿼리스트링을 붙여줘서 사용하고 있습니다.
<link rel="stylesheet" href="css경로?time=<?php echo date('YmdHis'); ?>">
----------
유튜브 일반형 (16:9)
http://wittazzurri.phps.kr/add_board/12
<div class="yt"><iframe src="https://www.youtube.com/embed?playlist=Km71Rr9K-Bw&loop=1&autoplay=1&vq=highres" allow="autoplay" allowfullscreen></iframe></div>
----------
유튜브 쇼츠 (9:16)
http://wittazzurri.phps.kr/add_board/14
<div class="yts"><iframe src="https://www.youtube.com/embed?playlist=jxh4ltanKOg&loop=1&autoplay=1&vq=highres" allow="autoplay" allowfullscreen></iframe></div>
----------
유튜브 일반형 90도 회전
http://wittazzurri.phps.kr/add_board/22
<div class="yt-90"><iframe src="https://www.youtube.com/embed?playlist=27R3EyTW_MY&loop=1&autoplay=1&vq=highres" allow="autoplay" allowfullscreen></iframe></div>
----------
유튜브 일반형 270도 회전
http://wittazzurri.phps.kr/add_board/27
<div class="yt-270"><iframe src="https://www.youtube.com/embed?playlist=L7zcOcZSoD0&loop=1&autoplay=1&vq=highres" allow="autoplay" allowfullscreen></iframe></div>
----------
mp3 기본형
http://wittazzurri.phps.kr/add_board/20
<div class="mp3"><audio src="mp3경로" autoplay loop controls controlslist="nodownload"></audio></div>
----------
mp4 기본형
http://wittazzurri.phps.kr/add_board/16
<div class="mp4"><video src="mp4경로" autoplay loop controls controlslist="nodownload"></video></div>
----------
주의사항은 html 을 입력할 때
<div><iframe></iframe></div>
위와 같이 해야지 아래처럼 하면 부지불식간에 라인사이에 <p></p> 가 끼어들어서 메기나건빵이 될 수 있습니다.
<div>
<iframe></iframe>
</div>
----------
HOOK 함수를 익명함수로 만들었으므로 55832 이상이어야 합니다.
css 를 열어보면 그누순정이 아닌 다른 웹페이지에서 적용하는 것도 금방이란 걸 알 것입니다.^^
18
댓글 전체
감사합니다.
css 만이라 편할 거에요
우와~ 멋지십니다. 잘 황용해 보겠습니다.
scss 문법이 중간 프로세스 없이 css 에 그대로 적용되면 참 좋을텐데요.
이건 클래스 이름이 짧아서 기존에 이 이름이 있다는 걸 전제하고
#bo_v_con .yt 같이 엄밀성을 줘야 안전하거든요.
감사합니다.
감사합니다
감사 합니다.
감사합니다
추천합니다.
이번주에는 광분 업뎃했네요.
19레벨인데 다음주에 20레벨로 뛰면서 1등으로 올라가고 싶은 욕심 때문에...쿨럭
감사합니다. 시기적으로 딱 css 반응형 공부하고 있을때 기가막힙니다. 운이좋았어요!
예 감사합니다
감사합니다.
감사합니다
웅프님 감사합니다
잘은 모르겠지만 멋진것 같네요. 다음에 꼭 사용해 보겠습니다.
감사합니다.
때가 되면 사용하셈
감사합니다
감사합니다
좋은 정보공유 진심 감사드립니다. 추천꾹!
감사합니다.
감사합니다.
감사합니다
늘 유용한 걸 만들어주셔서 감사합니다. 새해 복 많이 받으세요^^
감사합니다
경로가 /home/service0/www/danggi.co.kr/theme/tailwind0.3/css 인데 어떻게 경로 지정해주죠?
자기소개 미공개인 분에게는 댓글로 질문받지 않습니다.^^
자기소개 수정했습니다~
죄송하지만 아직까지 미공개입니다.^^