본문 바로가기
[coding] 유튜브 코드에 추가하기 유튜브 반응형 높이에 대한 스크립트를 이야기 하다가 문득 유튜브를 코드에 추가하는 법을 상세하게 다루고 싶어서 포스팅한다. 1. 원하는 유튜브 영상 페이지로 간다. 2. 해당 영상 위에서 오른쪽 마우스 > 소스 코드 복사 3. 복사해서 붙여넣기 하면 아래와 같은 코드가 붙여넣어질것이다. autoplay; 옵션은 자동으로 영상을 재생하는 옵션. 4. 영상사이즈를 디바이스에 맞게 하기위해 div로 감싼후 스타일을 지정하면된다. 5. 유튜브 디바이스별 높이 사이즈 정의 스크립트 참고 : jintrue.tistory.com/entry/script-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%B0%98%EC%9D%91%ED%98%95-%EB%86%92%EC%9D%B4-%EC%A0%95%EC%9D%98
[script] 유튜브 반응형 높이 정의 요즘 사이트에 역동적인 효과를 위해 동영상 유튜브를 많이 사용한다. 모바일 디바이스를 위해 유튜브 높이를 조절해줘야한다. 유튜브 영역에 name을 videoHeight 정의한후 아래의 스크립트를 해당영역 뒤에 추가해주면 된다. 디바이스별로 삽입한 유튜브의 높이를 상황에 맞춰 조절하는 스크립트. html javascript $(window).resize(function () { updateYtboxHeight(); }) updateYtboxHeight(); function updateYtboxHeight() { $('[name="ytFrame"]').each(function (index, val) { let wid = $(val).outerWidth(); console.log('w',wid); let he..
[css] display flex 크로스브라우징 display: flex;를 많이 사용 하는 추세인데 이에 맞게 크로스브라우징을 해야한다. 가급적이면 display: table;이나 float: left;를 사용하려 하지만 display: flex;가 주는 스타일의 간편함 때문에 계속 찾게 되는 것 같다. 아래는 기본적으로 flex할 대상의 부모에게 flex 해주는 스타일이다. ul { display: -ms-flexbox; display: -webkit-box; display: flex; } flex 대상의 각각의 높이가 다른 정렬 - top으로 하기 li { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } - center로 하기 li { -webkit-box-a..
[javascript] 디바이스별로 이미지 적용하기 예시) PC기준 디폴트 이미지 명 : imageName.png 테블릿 이미지 명 : imageName_TA.png 모바일 이미지 명 : imageName_MO.png 랩탑 이미지는 있으면 imageName_LT.png 로 준비할 것. var BREAK_POINT_CNT = 4; var VIEW_TYPE; var PREV_VIEW_TYPE; var DESKTOP_START_POINT = 1440; var LAPTOP_START_POINT = 1024; var TABLET_START_POINT = 768; var MOBILE_START_POINT = 480; function setViewType() { //var wid = $('html').prop('scrollWidth'); var width = wind..
[css] font 설정 스포카산스네오를 예로 들어 설명하겠다. 1. 적용하고자 하는 폰트 css 파일을 만든다. SpoqaHanSansNeo.css @charset "utf-8"; /* * 스포카한산스네오 */ @font-face{ font-family:'SpoqaHanSansNeo'; font-weight: 300; src:url(SpoqaHanSansNeo-Regular.eot); src:url(SpoqaHanSansNeo-Regular.eot?#iefix) format('embedded-opentype'), url(SpoqaHanSansNeo-Regular.woff) format('woff'), url(SpoqaHanSansNeo-Regular.ttf) format('truetype'); } @font-face{ font..
[publishing] display: grid; 에 대하여 display: flex; 와 비슷한 성질인 듯하나 display: grid; 는 말그대로 웹 디자인에서 사용하는 그리드 개념과 비슷하다. flex 처럼 부모에 display: grid;를 설정 한 후, 그 안의 items을 정렬하는 스타일을 추가한다. 1 2 3 4 5 6 7 8 grid-template-columns: repeat(4, 1fr); grid-template-columns 는 각 그리드 아이템의 너비를 결정한다. 테이블에서 column를 생각하면 쉽다. grid-template-columns: repeat(4, 1fr); 은 grid-template-columns: 1fr 1fr 1fr 1fr;와 같은 말이다. - repeat()를 사용하면 그리드가 많이 분할될 경우 간략하게 스타일을 추..
[etc] 전체 페이지 캡처 1. 전체 캡처하고자 하는 페이지에서 개발자도구 활성화 단축키 : f12 (ctrl + shift + i) 2. Network 모드에서 ctrl + shift + p 3. 아래와 같은 인풋창이 나온다. 4. capture라는 단어를 입력하면 Capture full size screenshot이 나오고 클릭을 하게되면 해당 페이지의 전체를 캡처하여 png 파일로 저장된다.
[plugin] 슬라이드 플러그인_keen-slider.js keen-slider.js는 가볍고 무료인 슬라이드 플러그인이다. 여러가지 옵션을 통해서 UI를 개선할 수 있다. 기존엔 swiper와 bxslider를 주로 사용했었는데 이번 기회로 keen-slider.js를 사용해 보아야 겠다. 1. keen-slider github : github.com/rcbyr/keen-slider rcbyr/keen-slider The HTML touch slider carousel with the most native feeling - rcbyr/keen-slider github.com 2. keen-slider homepage : keen-slider.io/ keen-slider keen-slider.io

티스토리툴바