웹:WEB (12) 썸네일형 리스트형 유튜브 동영상 반응형 사이트에 적용하기 (width:100%) ▒ 유튜브 동영상 반응형 사이트에 적용하기 (width:100%) 반응형에서는 각 기기마다 보여주는 동영상의 크기가 다르기 때문에 비율이 조금만 틀어져도 나머지 영역이 까맣게 출력되는 것을 경험해봤을 것이다. (챙피하지만 한때는 각 사이즈별로 동영상 크기를 조절하느라 애먹은 적도 있었다.) 그러나 이러한 문제를 한번에 해결할 수 있는 유튜부동영상주소 이제 웹페이지의 가로 크기에 따라 가변적으로 동영상의 크기가 변하는 것을 알 수 있다. 모두 동일한 방법으로 사용이 가능하나 이 두 태그는 요즘 거의 사용하지 않는다. 태그 적용 / 유튜브가 아닌 동영상 파일을 직접 업로해서 쓸 때 ... ... 너무 간단하쥬? 그럼 모두 즐코딩 ^^ CSS 선택자 nth-child 와 nth-of-type 사용법 및 차이점 ▒ CSS 선택자 nth-child 와 nth-of-type 사용법 및 차이점 nth-child와 nth-of-type의 사용법은 동일하나, 결과물의 차이가 분명있다. 사용법만 제대로 안다면 아이디와 클래스 값을 굳이 정의 하지 않아도 코드가 간단명료 해진다. 일단 예제부터 보도록 하자! (하단에 HTML예제파일 다운로드있음) 예제1) ul li 세번째 요쇼의 컬러를 #ff0000으로 변경해라 nth-child 나는1번 나는2번 나는3번 nth-of-type 나는1번 나는2번 나는3번 과연 결과는 같을까? 이미 어느정도 예상을 했겠지만, 당연히 결과 값은 다르다. nth-child는 요소 안에 있는 부터 카운팅 하지만 nth-of-type는 요소만을 카운팅한다. 정리하면 nth-child는 유형에 관계없.. 웹폰트 적용 방법과 웹폰트 확장자 알아보기 웹폰트 적용 방법은 크게 구글에서 제공하는 소스삽입 방법과 로컬(서버) 에서 불러오는 방법 두가지가 있는데, 그 전에 웹폰트 확장자에 대해서 간단히 알고 넘어가자! ■ 다양한 웹폰트 확장자 아래의 표처럼 ttf/otf, woff, woff2, eot 등의 확장자를 볼 수 있는데 도대체 이것은 무슨 뜻인지 알고 쓰는 사람은 별로 없다. 부끄럽지만 나도 그런 사람 중 하나였다; 그러다 내가 사용한 웹폰트가 적용되지 않는 웹브라우저를 발견했고 부랴부랴 검색신공을 발휘했다. ㅎㅎ ttf : 애플과 마이크로 소프트가 개발한 글꼴 표준 (Trutype) oft : 확장 가능한 컴퓨터 글꼴 woff / woff2 : 웹페이지에서 사용하기 위한 글꼴 eot : 웹에 포함 된 글꼴을 사용하도록 설계 확장자 IE9이상 I.. 웹폰트 무료로 변환하는 방법 구글 웹폰트에서 제공하는 링크타입이나 임포트 타입의 소스를 삽입하면 세상 간편하고 속시원하겠지만, 속도나 안정성을 생각한다면 로컬(서버)에 웹폰트를 심는게 좋다. 그러기 위해서는 일단 여러타입의 (eot, woff, woff2 등) 웹폰트가 준비 되어 있어야 하는데 없어도 걱정하지말자! 무료로 웹폰트로 변환해 주는 사이트가 있다. ※ 여기서 잠깐 우리가 폰트를 사용할 때 저작권이 있듯이 웹폰트도 저작권이 있다. 아무 폰트나 다 써도 좋다는 뜻은 아니니 참고하시길 ^^ ① 일단 구글에서 무료로 배포하는 웹폰트를 다운 받는다. 구글폰트사이트 → 사이트에 접속 후 원하는 폰트를 선택하면 (+버튼) 오른쪽 하단에 팝업이 뜬다. 그리고 다운로드 아이콘을 클릭하면 OK ② 이제 변환사이트에 접속한다. 웹폰트변환사이.. 이전 1 2 다음
