전체 글 (17) 썸네일형 리스트형 설치없이 사용 가능한 온라인 무료 포토샵 20.2.7일 추가 포스팅 픽슬러가 전혀 새로운 버전의 온라인포토샵 프로그램을 내놓았다. (픽슬러는 플래시 플레이어가 설치되어야 정상작동 한다.) 신버전은 https://pixlr.com/e Photo Editor : Pixlr.com - free image editing online Looking for advanced photo editing capabilities right in your browser, Pixlr E is the next generation photo editor! No installation and registration required. Use for free on desktop, tablets & phones. pixlr.com 구버전은 https://pixlr.com/edi.. 제이쿼리(jQuery) 선택자 종류 ▒ 제이쿼리(jQuery) 선택자 종류 흔히 우리가 CSS에서 사용하는 선택자는 모두 사용이 가능하다고 생각하면 된다. 그 외에도 유용한 선택자가 무수히 많다. $(function() { $('#ex').css('color', '#cccccc'); //id값 ex가 선택자! }); ※ 선택자 안의 값은 ' '작은따옴표나 " " 큰따옴표로 묶는다. $('#id') id값 선택 $('.class') class값 선택 $('#id, .class') 다중선택은 쉼표로 구분 $('div') div요소 선택 $('div, p') 다중선택은 쉼표로 구분 $('div>p') div안의 p요소 선택 $('li:first-child') li요소의 첫번째를 선택 $('li:nth-ofy-type(2)') li요소의 두번째를.. HTML 페이지에 아이콘 넣는 방법 (fontawesome) ▒ 웹페이지에 아이콘 넣는 방법 (fontawesome) 단 한줄의 코드를 입력하고 아이콘마다 정해진 클래스를 추가하면 번거로운 이미지 작업을 하지 않아도 위와 같은 아이콘을 넣을 수 있다. ■ fontawesome 스크립트소스 얻기 | 홈페이지바로가기 간단한 회원가입 절차를 거치면 본인만의 스크립트소스를 제공하는 형식이므로 홈페이지에 방문해서 회원가입 절차를 진행해야 한다. 회원가입방법 더보기 무료버전을 선택한다. 본인의 이메일 주소를 넣은 후 Send Kit Code를 클릭한다 최종 이메일 주소 확인과 함께 링크하나를 보낸다고 한다. 이메일을 열어서 박스친 부분을 클릭한다. 사용할 비밀번호를 입력후 버튼을 클릭한다. 표시한 곳만 (이름과 성) 입력후 Lets's go! 버튼을 클릭한다. 최종적으로 본.. DIV 레이어 가로 세로 가운데 정렬 하기 ▒ DIV레이어 가로 세로 가운데 정렬 하기 가로 가운데 정렬은 text-align:center , margin:0 auto; 등 CSS가 작동이 잘되는 반면 세로 가운데 정렬은 그렇게 쉽지만은 않다. 그래서 코딩을 할 때마다 여기 저기 검색을 하면서 했었던 기억이...ㅎㅎ 아무튼 이 포스팅에서는 3가지 방법만을 소개 하지만 이 방법 말고도 여러 방법이 있다는 것을 기억하자! ■ position:absolute 연두색박스 가변적인(반응형) 요소에도 적용이 가능하나 크기가 없는 경우에는 적용이 안된다. 결과 ■ display:table / display:table-cell / vertical-align:middle | 인라인요소 가운데정렬 | 블럭요소 박스 ■ line-height 가운데정렬 감싸는 요소의.. 드림위버 없이 이미지맵 링크 만들기 드림위버는 과거에 많이 사용했던 프로그램이지만 현재는 무거운데다 느리고 이상한 오류와 함께 강제종료 되는 현상이 자꾸 나타나서 많이 쓰지 않는 추세라고 한다. (필자도 안씀) 드림위버의 딱 하나 좋은기능이라고 한다면 이미지맵 정도? 그렇다고 이거 하나를 위해서 덩치큰 프로그램을 설치하는 것도 참 부담스럽다. 게다가 유료다. 하지만 요즘 없는게 없는 시대 아니던가~ 온라인에서 정말 간단하게 이미지맵 주소를 획득할 수 있는 사이트가 있다. 이미지맵좌표값얻기→ ▒ 사용방법은? 사이트에 접속하면 생각보다 간단하게 사용방법을 터득할 수 있지만 혹시나 헤맬 수 도 있는 사용자들을 위해 캡쳐를 해보았다. ① 파일선택을 클릭 후 이미지맵 적용 사진을 불러온 후 업로드를 누른다. ② accept를 클릭한다. ① 원하는 .. 유튜브 동영상 반응형 사이트에 적용하기 (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.. 이전 1 2 3 다음
