본문 바로가기

HTML／CSS87

[HTML/CSS]유튜브 API 사용법( Youtube Iframe) 이번에는 유튜브 iframe 을 통한 웹페이지 영상 첨부를 해보겠습니다. https://stickode.com/detail.html?no=2679 스틱코드 stickode.com 위의 포스트를 즐겨찾기 하시면 '유튜브 API_html/javascript' 를 입력하여, 해당 코드를 사용할 수 있습니다. Youtube IFream API 사용법 입니다. YouTube Iframe API를 이용하면, 원하는 유튜브 영상을 웹페이지에 띄울 수 있습니다. javascript코드로 원하는 영상을 띄울 수 있어서 편리합니다. 위의 태그의 id를 통하여 iframe 영상 삽입이 가능합니다. 주의할 점 유저는 HTML5를 지원하는 브라우저를 이용해야 합니다 동영상 플레이어의 크기는 200 X 200 px 이상이어야 합.. 2021. 12. 25.
[HTML] 이미지를 원형으로 만들기 예제 안녕하세요 오늘 포스팅 주제는 네모 모양의 이미지를 원형으로 잘라서 사용 할 수 있는 예제입니다. 꼭지점 부분을 어느정도로 둥그렇게 만드냐는 border-radius 속성을 이용하면 됩니다. *결과 1. border-radius : 30px 2. border-radius : 90px 코드 원본은 스틱코드 링크에서 참고해주세요 https://stickode.com/detail.html?no=2658 스틱코드 stickode.com 스타일 태그 웹문서를 디자인하기 위해서는 스타일 태그를 이용하는 방법이 있습니다. 이렇게 생긴 스타일 태그를 head 태그 안에 넣어서 어떻게 꾸밀 것인지 정의 하는 것입니다. 예) 스타일 태그 안에 내용은 다르지만 형식이 같은 2줄의 코드가 보이실 겁니다. 선택자 { 속성 : .. 2021. 12. 21.
[HTML / CSS] 드롭다운 메뉴바 만들기 안녕하세요 오늘은 웹페이지에서 흔히 볼 수 있는 드롭다운 메뉴바를 만들어 보겠습니다. 웹페이지 상단에 메뉴바가 생성되고 Categories, Services 메뉴는 드롭다운 기능이 있습니다. 마우스 포인터를 올리면 드롭다운 되는 메뉴들을 확인 할 수 있습니다. *결과 먼저 아래 스틱코드 링크에서 코드를 가져옵니다. https://stickode.com/detail.html?no=2627 스틱코드 stickode.com *코드 전체 Home About Us Categories Category One Category Two Category Three Services Service One Service Two Service Three Service Four Service Five Service Six Cont.. 2021. 12. 9.
[HTML / CSS] 만들어져 있는 템플릿 적용하기 안녕하세요 구독자 여러분~ 오랜만입니다. 요즘 날씨가 점점 선선해지는거 같아요~ 다음주면 추석인데 다들 즐거운 추석 보내시구요~ ^^ 이번시간에는 타 유저가 만들어 놓은 기존 템플릿을 우리 프로젝트에 적용 시켜보는 작업을 해보겠습니다.~~!! 오픈소스로 공개된 템플릿 선정! https://startbootstrap.com/template/sb-admin SB Admin - Free Bootstrap Admin Template - Start Bootstrap Like our free products? Our pro products are even better! Go Pro Today! startbootstrap.com 2021. 12. 7.
[HTML / CSS] Navbar 메뉴바 만들기! 안녕하세요 지난 시간에는 부트스트랩을 다운받고 적용한 뒤 버튼을 만드는 예제를 배워보았어요, 이번시간에는 상단 메뉴바를 만드는 걸 해보아요~!! http://bootstrapk.com/getting-started/ 시작하기 · 부트스트랩 부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치 bootstrapk.com 부트스트랩을 다운 받지 않은 사람은 여기서 다운 받으시면 됩니다. 오늘은 부트스트랩을 사용하여 상단 메뉴바를 만들어 보겠습니다. 부트스트랩의 Navbar는 많은 웹페이지의 화면 상단에서 볼 수 있는 메뉴 바의 기본 틀을 제공합니다. 부트스트랩 사이트(.. 2021. 11. 13.
[HTML / CSS] CSS로 Tab menu 구현하기(JS x ) 안녕하세요. 오늘은 Tab menu를 한번 구현해 볼 것입니다. Tab menu를 구현하는 방법에는 여러가지가 있지만, 이번에는 JavaScript의 도움없이, HTML과 CSS만으로 구현하는 방법을 소개하겠습니다. 스틱코드를 사용하면, 여기서 작성된 코드를 손쉽게 사용할 수 있으니 참고해주세요~~ https://stickode.com/detail.html?no=2557 스틱코드 stickode.com 일단 파일구조는 다음과 같습니다. [연습용 웹페이지] 라는 폴더 안에 index.html 파일과 page.css라는 파일이 같이 들어있습니다. 여기서 [연습용 웹페이지]라는 폴더 명칭은 그리 중요한건 아닙니다. 중요한 부분은 같은 폴더 안에 위의 두 파일이 존재하고 있다는 것입니다. 각 폴더의 내용은 다음.. 2021. 11. 4.
[HTML / CSS] 부트스트랩 부드럽고 예쁜 버튼 사용하기 안녕하세요 ^^ 다들 잘 지내셨나요? 요즘 날씨가 점점 시원해지고 있는것 같아요~ 그럼 이번시간에는 부트스트랩을 사용하여 예쁜 형형색색의 버튼을 사용하는 방법에 대해 알아보겠습니다. 먼저 부트스트랩이 무었인지에 대해 알아보아요~ 1. 부트스트랩이란 부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적은 반응을 얻는 프레임워크이다. 라고 합니다. 다음으로 부트스트랩을 설치 해보아여 2. 부트스트랩 설치 https://getbootstrap.com/docs/4.4/getting-started/download/ Download Download Bootstrap .. 2021. 11. 2.
[HTML / CSS] 텍스트 세로 중앙 방향으로 중앙정렬 하기 안녕하세요 오늘은 HTLM과 CSS를 통하여 텍스트를 세로와 중앙 방향으로 중간정렬 하는 방법에 대해 알아보아요 텍스트는 어떻게 세로로 정렬을 할 수 있을까요? 텍스트는 기본적으로 display속성값이 inline이고 height가 정해지지 않았기 때문에 이미지와는 다른 방법이 필요합니다. 물론 이를 해결하기 위한 다양한 방법이 존재합니다. 이 모든 방법들 중에서 가장 대표적인 방법은 아래와 같습니다. 하나하나 확인해보세요. 1. 첫 번째, line-height를 사용하기line-height를 사용하면 가장 쉽게 중앙 정렬할 수 있습니다. 예를들어 height가 100px인 경우 동일하게 line-height값을 100px을 설정합니다. TEST 위 코드는 아래와 같이 출력됩니다. 보시는 것처럼 세로 정.. 2021. 10. 18.
[HTML / CSS] Lottie 이용해보기 안녕하세요. 이번 시간에는 Web에서 로티를 이용해서 애니메이션을 만들어 보겠습니다. 오늘은 바로 시작해보겠습니다. 1. 로티가 들어갈 html 태그를 생성합니다. 2. bodymovin library 준비하기 Lottie Docs 목록에서 Web 태그로 이동합시다. 아래 페이지에 링크로 들어갑니다. 라이브러리 소스를 다운해줍니다. 3. Lottie 파일을 준비한다. Lottie 파일을 준비하는 방법에는 2가지가 있습니다. 3-1. URL 방법 3-2. SON형태로 다운로드. 4-1. 로티를 넣을 파일.html 이렇게 준비하신 파일을 html, javascript에 아래처럼 작성해주시면 Lottie를 작성할 수 있습니다. 4-2. 로티 파일이 들어간.js var anmation = bodymovin.lo.. 2021. 9. 21.

티스토리툴바