본문 바로가기
반응형

CSS5

유튜브 동영상 크기맞추기(모바일에서 iframe -아이프레임- 크기 맞추기) 유튜브 동영상 크기맞추기(모바일에서 iframe -아이프레임- 크기 맞추기) 유튜브 동영상 등 iframe 을 웹페이지에 넣을 때 pc버전의 경우 화면 해상도가 커서 문제가 되지 않으나 모바일 웹의 경우 가로, 세로가 고정된 iframe(아이프레임) 을 넣을 경우 프레임이 화면 밖으로 나가는 문제가 생기게 된다. 이럴때 css 설정을 통해 해결이 가능한데, 아래 설명을 따라 하면 된다. - css 영역 .mainVideo 클래스를 설정해주고, 속성을 지정해준다. .mainVideo 내의 ifrmae(아이프레임) 속성을 설정해주면 해당 태그 내부의 iframe(아이프레임)이 속성을 따라간다. .mainVideo { margin-top:20px; position: relative; width: 100%; p.. 2020. 3. 16.
css label 이용해서 radio, checkbox checked 설정하기 - 텍스트 클릭해서 체크하기 css label 이용해서 radio, checkbox checked 설정하기 - 텍스트 클릭해서 체크하기 form 에서 radio(라디오) 나 checkbox(체크박스) 선택시 체크(checked)가 되는데 해당 input을 선택하지 않고 옆에 텍스트를 선택했을때도 체크(checked)가 작동되게 하는방법 태그로 해당 input 을 감싸주면 된다. 예제 ) 라디오 체크박스 2016. 6. 28.
아이콘 배경처리해서 큰이미지 잘라보여주기 아이콘 배경처리해서 큰이미지 잘라보여주기 이미지 한개에 여러개의 아이콘을 넣어놓고 원하는 영역만 보여줄때 아래와 같은 스타일을 이용할 수 있다. .samplebox { display:block; overflow:hidden; position:absolute; top:50%; z-index:9; width:53px; height:51px; margin:-26px 0 0; background:url("/images/sample-ico1.png") 0 -23px no-repeat; text-indent:100%; white-space:nowrap; cursor:pointer;} .samplebox { //-> 클래스 선언 (ID)도 무관 display:block; //=> block화 해서 영역을 확보한다. .. 2016. 6. 24.
jquery mobile demo - Checkboxradio widget(체크박스, 라디오 위젯) jquery mobile demo - Checkboxradio widget(체크박스, 라디오 위젯)* 체크박스- 기본설정체크박스 - 작은폰트(Mini size)체크박스체크하기 - 세로나열하기(vertical group)세로정렬 : 체크하기1체크하기2체크하기3 - 가로나열하기(horizontal group)가로정렬 : 체크하기1체크하기2체크하기3 - 체크박스 우측위치(Icon postion)아이콘우측 : 체크하기1체크하기2체크하기3 - 체크박스 사용제한(Disabled)체크박스 - 강조형(Enhanced)체크하기 2015. 3. 13.
jquery mobile demo - Button widget(버튼 위젯) jquery mobile demo - Button widget(버튼 위젯)버튼 사용하기 예제 - 강조형(Enhanced)Input Value - 모서리 라운드주기(Corners)Input Value - 아이콘만 나오게 하기강조 - 아이콘만표시 - 그림자 옵션(Shadow)강조형 - 한줄에 표시(Inline)강조형 - 작은폰트(mini)강조형 - 아이콘과 함께(Icon)강조형 - 아이콘 위치 설정(Icon position) 강조형-왼쪽강조형-오른쪽강조형-위강조형-아래강조형-아이콘만 - 사용불가(Disabled)강조형 2015. 3. 12.