본문 바로가기
반응형

HTML12

유튜브 동영상 크기맞추기(모바일에서 iframe -아이프레임- 크기 맞추기) 유튜브 동영상 크기맞추기(모바일에서 iframe -아이프레임- 크기 맞추기) 유튜브 동영상 등 iframe 을 웹페이지에 넣을 때 pc버전의 경우 화면 해상도가 커서 문제가 되지 않으나 모바일 웹의 경우 가로, 세로가 고정된 iframe(아이프레임) 을 넣을 경우 프레임이 화면 밖으로 나가는 문제가 생기게 된다. 이럴때 css 설정을 통해 해결이 가능한데, 아래 설명을 따라 하면 된다. - css 영역 .mainVideo 클래스를 설정해주고, 속성을 지정해준다. .mainVideo 내의 ifrmae(아이프레임) 속성을 설정해주면 해당 태그 내부의 iframe(아이프레임)이 속성을 따라간다. .mainVideo { margin-top:20px; position: relative; width: 100%; p.. 2020. 3. 16.
div 태그를 이용한 표(테이블) 만들기 예제 div 태그를 이용한 표(테이블) 만들기 예제 div 태그를 이용한 표(테이블) 만들기 예제 - 가로 6cell * 세로 4cell div HTML Tag div CSS TAG /* DivTable.com */ .divTable{ display: table; width: 100%; } .divTableRow { display: table-row; } .divTableHeading { background-color: #EEE; display: table-header-group; } .divTableCell, .divTableHead { border: 1px solid #999999; display: table-cell; padding: 3px 10px; } .divTableHeading { backgrou.. 2020. 2. 6.
펜톤컬러 html 색상표 펜톤컬러 html 색상표 red #dd3232 blossom #fac6cc coral #ffb6ad papaya #f68b69 poppy #fbaf5f sunshine #ffef6c chartreuse #ced75c mint #d2efdb clover #a1ce5e moss #969a52 sage #dbdfc3 bluebell #aec6cc pool #a2d0cf lake #1a86a8 peacock #00919c royal blue #0065a9 night #002b54 beet #985396 plum #ccc1db cement #e3dfd6 gravel #b2b1a5 slate #58574b paper bag #c5ab89 chocolate #572c29 black #000000 luxe blush .. 2019. 8. 1.
javascript form select 변경시 페이지 이동하기 자바스크립트 javascript form select 변경시 페이지 이동하기 ----------------- 다음 구글 네이버 select 변경시 해당 페이지로 이동한다. 2019. 2. 27.
Class(클래스) 접근권한, 속성 public, protected, private Class(클래스) 접근권한, 속성 public, protected, private 클래스의 접근권한 publicpublic 단어처럼 공공의 것으로 이용, 어디서든 접근이 가능한 권한.클래스내는 물론 생성된 객체를 통해서도 접근 가능.상속받은 클래스와 이를 토대로 만든 객체에도 적용가능 protectedprotected 보호되는 정보, 범위내에서만 마음대로 사용이 가능한 권한.클래스 내부에서만 사용가능, 객체 접근불가. privateprivate 개인적인 정보. 자기자신이외에는 접근이 불가능.객체는 물론 상속받은 클래스, 객체모두 접근불가. 2016. 7. 14.
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.
UL li ul li 스타일 정의하기 li 스타일에 이미지 적용하기 ul { list-style-image: url('sqpurple.gif'); } li 스타일 없이 나오게 하기 ul { list-style-type: none; } 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.
jquery mobile demo - Home jquery mobile demo- HomejQuery Mobile은 웹사이트와 모든 스마트폰, 태블릿 및 데스크탑 장치에서 액세스 할 수있는 응용 프로그램을 수 있도록 설계된 터치에 최적화 된 HTML5 UI 프레임워크이다. Jquerymobile은 크게 4가지 분류로 나눌수 있다.1. 페이지 & 네비게이션- 페이지, 네비게이션, 페이지 로딩방식, 전환효과 등을 설정 할 수 있다. 2. CSS 프레임워크- 페이지 전체를 테마로 구분가능하며, 버튼, 아이콘, 그리드와 문서, 바(bar) 등을 클래스화 한다. 3. 위젯- 툴바, 네비게이션바, 탭, 패널, 팝업 이외에도 리스트, 펼침메뉴, 응답형 표(Table), 검색창 등을 손쉽게 설정할 수 있다. 4. 위젯적용- 체크박스, 라디오, 셀렉트 메뉴 등 폼관.. 2015. 3. 4.
[javascript]셀렉트폼으로 액션페이지 바꾸기 [javascript]셀렉트폼으로 액션페이지 바꾸기 form으로 값을 넘기는 중 select로 값을 선택하고 각기 다른 페이지로 값을 넘겨야 하는경우 스크립트로 값을 조정했다. ----------------- euckr utf-8 * 여기서 포인트는 "this.value" 셀렉트의 옵션값을 가져가라는 명령 2014. 12. 18.