반응형 html11 Bootstrap 기초 class 사용 + Javascript 조작하기 연습 이전 포스팅에서, 부트스트랩을 이용한 레이아웃 구성을 살펴봤습니다. container, row, column에 대해서 살펴봤습니다. 이번에는 약간 더 나아가서 이를 이용해서 간단한 레이아웃을 구성하는 연습을 해보려고 합니다. 그리고 이후에 Javascrip로 핸들링까지 해보려 합니다. Bootstrap 기초 class 사용 + Javascript 조작하기 연습 초보인 경우 이 포스팅을 진행하기 전에, 이전 내용을 먼저 확인하면 도움이 됩니다. 부트스트랩 Layout의 시작 - BreakPoints, Container, Grid 부트스트랩 Layout의 시작 - BreakPoints, Container, Grid Bootstrap은 그냥 예제 코드를 가져다 복붙해서 사용하는 아주 편리한 방식을 제공합니다... 2022. 12. 26. 반응형으로 Youtube 영상 삽입하기(Responsible youtube Embed) youtube 영상을 웹 페이지 내에 '퍼가기'를 해보면 정작 사이즈가 정해져 있어서 모바일 반응형으로 동작하지 않습니다. Mobile이 대세인데, 뭔가 조금 불편하죠. 그래서 이번에는 유튜브 영상을 모바일 반응형으로 퍼가는 방법을 한번 정리해보겠습니다. 저도 까먹을 때 마다 참고하면서 HTML + CSS 코드를 작성하거든요. 유튜브에서 아무 영상을 하나 골라봤습니다. 조만간 개봉한다는 트레일러 영상입니다. (Imax로 보고 싶어요!!) 보통 블로그나, 카톡 등에서 공유할 때는 영상 하단의 [공유] 버튼을 누르고 팝업되는 창에서 [복사] 버튼을 누릅니다. 그러나, 잘 아시다시피 웹 페이지에 삽입(Embed)하기 위해서는 소스 코드를 복사해가야 합니다. 공유 창에서, 소스코드 아이콘을 표시되는 '퍼가기' .. 2022. 12. 5. VSC(Visual Studio Code) Language = ko 세팅하기 최근에는 VSC(Visual Studio Coode)를 자주 사용하고 있습니다. 물론 사용 목적에 따라서 Sublime Text나 Atom을 사용할 때도 있습니다. VSC를 사용하면서 Emmet을 이용해 HTML 문서를 생성하다보면 자동생성된 부분을 로 변경하곤 합니다. 매번 변경하는 게 귀찮아서 세팅하는 방법을 메모해 놓아봅니다. 새 파일을 하나 만들고 !(느낌표) 찍고 Tab 키를 누르면 Emmet에 의해 아래처럼 HTML 템플릿 코드가 자동생성됩니다. 정말 편한 기능이죠. 그런데, lang="en" 으로 표시됩니다. en은 당연히 english의 약자. 비영어권의 불편함(?) 같은 거죠 뭐 그냥 사용해도 크게 무리는 없지만, 그냥 습관적으로 랭귀지를 ko로 타이핑 하고 변경해서 사용해왔습니다. 같은.. 2022. 11. 21. 이전 1 2 3 다음 반응형
