반응형 HTML5, CSS23 [CSS] 반응형 중앙정렬 (transform 이용) 반응형일때 이미지나, 배경의 중앙정렬이 골치아플때 자주 이용하는 기법. 부모형태를 작성하고 .boxcenter 부분을 이용 하면 된다. HTML 부분 box style 부분 .container { position: relative; width:300px; height:200px; background:red; margin:0 auto; } .boxcenter{ position: absolute; top:50%; left:50%; width:30%; height:30%; background:blue; text-align:center; transform: translate(-50%, -50%) } 결과 2022. 9. 6. [HTML] 웹에서 유튜브 영상 불러오기 웹에서 영상 재생하고 싶을때 사용합니다. 영상을 자신의 유튜브채널에 업로드 하시고, 재생중인 영상에 마우스 오른쪽 클릭하면 소스코드 복사 클릭 하시면 소스코드가 복사됩니다. [원본 복사 영상 코드] 기본적으로 위처럼 복사되는데 복사된 유튜브 영상을 자동재생, 소리뮤트 하고싶을땐 영상 코드 뒤에 autoplay=1, mute=1 을 넣어줍니다. [수정 코드] autoplay, mute처럼 유튜브 매개변수들은 https://developers.google.com/youtube/player_parameters?hl=ko YouTube 내장 플레이어 및 플레이어 매개변수 | YouTube IFrame Player API | Google Developers YouTube 내장 플레이어 및 플레이어 매개변수 개요 .. 2022. 9. 5. [HTML5, CSS3] border 활용법 기본적인 형태 말고 다른 활용법도 있어서 작성해봅니다. 한면만 테두리 작성하기 .box1{border-top:1px solid #000;} 박스 윗면만 테두리가 작성이됩니다. 윗면만 작성가능하듯이 left, right, bottom 으로 바꿔서 사용 가능합니다. 둥근 테두리 작성하기 직각 테두리가 아닌 둥근테두리 사용법은 border-radius를 사용합니다. .box1{border:1px solid #000; border-radius:10px;} border-radius 값이 커지면 커질수록 더 둥글해 집니다. 적용 값 입니다. 2022. 8. 7. [CSS3] border 사용해서 테두리 넣기 1. 기본적인 사용법 소개 .box1{border:1px solid #000;} //테두리 굵기, 테두리 방식, 테두리 색상 순으로 작성 합니다. 2. 테두리 방식 dotted -점선 dashed - 점선인데 dotted 보다 좀 긴점선 solid - 실선 double - 2줄 여러가지가 있는데 보통 solid 를 가장 많이 사용한다. 3.HTML 작성, 차이점 확인 div{width:200px; height:50px;} .box1{border:5px solid #000;} .box2{border:5px dotted #000;} .box3{border:5px dashed #000;} .box4{border:5px double #000;} 먼저 박스크기는 동일하게 작성, 방식만 다르게 작성했습니다. bor.. 2022. 8. 6. 이전 1 2 3 4 5 6 다음 반응형
