반응형 페이지에서 가로폭이 달라져도 유튜브 영상의 가로 세로폭을 일정한 비율로 유지할 수 있도록 하는 방법입니다. 먼저 html에서 유튜브 공유 태그 을 로 한번 감싸줍니다. HTML css 에서는 이렇게 추가해줍니다. CSS .youtube-wrap{ position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom: 5px; } .youtube-wrap iframe { position: absolute; width: 100%; height: 100%; } 만약 유튜브 양쪽에 간격을 주고 싶은 경우, .youtube-wrap 클래스 바깥쪽에서 padding을 추가해주면 됩니다.
간단한 탭메뉴 구현법을 소개합니다. See the Pen 간단 탭메뉴 by Darim (@chocoleaf) on CodePen. JQuery를 선언해야 제대로 작동합니다. css ul.tabs{ margin: 0px; padding: 0px; list-style: none; } ul.tabs li{ background: none; color: #222; display: inline-block; padding: 10px 25px; cursor: pointer; } ul.tabs li.current{ background: #ededed; color: #222; } .tab-content{ display: none; padding: 15px 0; border-top:3px solid #eee; } .tab-..
반응형 웹작업에서 모바일 화면에서만 테이블에 횡스크롤을 적용하는 방법입니다. 먼저 table을 div 태그로 감싸줍니다. /* 테이블이 들어갑니다 */ CSS에서는 가로 스크롤을 적용하고자하는 크기의 화면을 미디워쿼리로 설정해줍니다. table을 감싼 div태그에 다음과 같이 설정해준뒤, table에는 width:auto; 를 설정해줍니다. @media screen and (max-width: 765px) and (min-width: 300px){ .table-container{ width:100%; overflow-x:auto; white-space: nowrap; } table{ width:auto; } } *참고로 모바일에서는 스크롤이 안보이는 경우가 있는데, 그런 경우엔 이렇게 설정해줍니다. 모바..