Program/Html & CSS9 유튜브 동영상 크기맞추기(모바일에서 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)그라데이션 색상표 - hex code [홈페이지/인터넷쇼핑몰 만들기](HTML)그라데이션 색상표 - hex code #FFF5E6 #FBCF8E #FDC77D #FF9A00 #D67500 #FBEAEE #F1D6DD #F5B0C2 #F690A6 #EDFBD7 #CCE5A3 #BBE18C #A4D967 #4FA601 #E0F0FF #CCD6E0 #BCCAD5 #7C98AE #FFFFD5 #FFFF7D #FFFF0D #D1CB00 #B3AD00 #F6E6F6 #EBDBEB #DCB4DC #D183D1 #9B559B 2020. 1. 29. [홈페이지만들기] css ul li를 이용한 가로메뉴 [홈페이지만들기] css ul li를 이용한 가로메뉴 menu1 menu2 menu3 menu4 menu5 2019. 9. 24. 펜톤컬러 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. 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. [HTML/CSS]ul li 테두리 만들기 리스트(ul>li)의 테두리를 hover로만 테두리 색 바꾸기. 가로나 높이 변화 없이, 스크립트 없이 가능 그리고 실체 가로로. 가로길이 50px 세로로. 세로길이 50px 하나의 실체 테두리 5px로 확인사살 결론: 1픽셀만 가능 2015. 1. 16. 이전 1 다음
