전체 글 (444) 썸네일형 리스트형 [CSS3강좌] 33강 폰트가 깨져 보일때 해결법(IE) - 이번 강좌에서는 폰트가 깨져 보일 때 조금이나마 보완해보는 방법을 알아보도록 하겠습니다. - 웹이 발달이 많이 되면서 한글도 많은 무료 폰트들이 생겨났습니다. - 그래서 웹에서 활용할 폰트가 많이 생겨 좋아진 것도 사실입니다. 1. 에스코어 드림 주소 : www.s-core.co.kr/company/font/ 에스코어 에스코어는 디지털 혁신을 위한 고급 프로페셔널 서비스를 제공합니다. 매니지먼트 컨설팅과 소프트웨어 테크놀로지 서비스 오퍼링을 살펴보세요. www.s-core.co.kr - S-Core에서 제공하는 폰트입니다. - 이폰트의 장점은 꽉 찬 직사각형 구조의 고딕체로 제목용 글꼴로 사용하시면 좋습니다. - 특히 9가지의 다양한 두께를 지원하는 몇 안 되는 폰트 중 하나죠. - 위의 이미지는 모.. [CSS] Animista - CSS애니메이션 테스트 사이트 animista.net/ Animista Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use. animista.net 다양한 CSS 애니메이션을 테스트해볼수 있는 사이트입니다. 특히 CSS코드로 바로 지원을 해주기 때문에 난이도 높은 애니메이션을 실행시키기 너무 좋은 사이트죠. 그리고 animation속성 중 이해가 어려운 animation-timing-function까지도 잘 표현해주기 때문에 너무 활용하기 좋은 사이트입니다. 1. 첫번째로 마음에 드는 애니메이션을 찾습니다. - 바로 위의 파트에.. [Brackets] 브라켓 플러그인 - Brackets Synapse - Brackets Synapse : 서버에 바로 접속해서 파일의 코드를 수정할 수 있도록 해주는 플러그인 1. 설치 - 플러그인 설치 아이콘을 누릅니다. - 검색에 [brackets synapse]라고 검색한 후 [설치]버튼을 누릅니다. - 설치가 다 되면 [설치에 성공했습니다]라는 경고창이 뜹니다. - 그러면 [닫기]버튼을 눌러줍니다. 2. 서버 설정 - 설치가 다 되면 [플러그인설치]아이콘 아래에 [S]자로 되어 있는 [synapse]아이콘이 있습니다. - 그 아이콘을 클릭해주세요. - 버튼을 누르고 나면 Synapse의 [Server List]가 보입니다. - 혹시 위에 보이는 아이콘이 잘 안보이면 검은 라인을 늘려줍니다. - 위의 영상처럼 왔다갔다 하면 아이콘이 다 보일겁니다. - [+]버튼을 .. [jQuery] 웹사이트에 사용가능한 팝업 혹은 모달창 5개 모음 제이쿼리 혹은 자바스크립에서 사용가능한 팝업 혹은 모달창을 알아보도록 하겠습니다. 홈페이지 제작시 많은 도움이 되니 사용하시길 바랍니다. 1. lightbox 주소 : lokeshdhakar.com/projects/lightbox2/ - 가장 유명한 팝업으로 lightbox가 있습니다. 처음 소셜커머스가 나왔을때 히트쳤던 플러그인이죠. - 사용법까지 주소에 잘 되어 있으니 확인해보세요. 2. fancybox 주소 : fancyapps.com/fancybox/ - fancybox역시 유명하게 잘 사용했습니다. - 라이센스가 무료이기 때문에 잘 사용하시면 좋을 듯합니다. 3. colorbox 주소 : www.jacklmoore.com/colorbox/ - 스타일까지 5가지로 해놔서 골라서 쓸수 있는 플러그인.. [jQuery] 웹사이트에 사용가능한 슬라이더(Slider) 8가지 모음 제이쿼리 혹은 자바스크립트로 구성된 슬라이더 관련 플러그인을 알아보겠습니다. 1. SwiperJS - 주소 : swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com - 타이틀에도 써있듯이 가장 모던한 모바일 터치슬라이더를 표방하는 플러그인입니다. - 장점은 굉장히 많은 옵션이 있다는 점이고, 단점 역시 굉장히 많은 옵션이 있다는 점입니다. - 모바일사이트에서만 사용하는 것이 아니라 PC웹, 반응형웹 어디서든 사용하기 편하게.. [CSS3강좌] 32강 Background-clip과 mask효과 1. background-clip 속성 - background-clip속성은 요소 내에서 background관련(배경)이 확장되는 정도를 지정합니다. 1) 속성 값 정리 속성값 설명 border-box 기본값, 테두리(border)까지 배경색 혹은 배경이미지가 지정됨 padding-box 패딩영역까지 배경색 혹은 배경이미지가 지정됨 content-box 요소까지만 배경색 혹은 배경이미지가 지정됨 See the Pen CSS background-clip by OSSAM (@5ssam) on CodePen. - 첫 번째 박스는 기본값인 border-box여서 테두리까지 배경색이 지정됩니다. - 두번째 박스는 padding-box여서 패딩까지만 배경색이 지정되고 테두리 파트는 빠집니다. - 세번째 박스는 co.. [JS강좌] 12강 자바스크립트 기본내장객체 - Array - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=lAnrCuVxNWc * 기본내장객체 종류 설명 String 문자열 객체 Number 숫자 객체 Math 수학 객체 Array 배열 객체 Date 날짜시간객체 - 기본내장객체는 첫글자를 대문자로 작성하는 것이 규칙 1. Array 객체 선언 - 배열은 값을 여러개 나열해서 담는 공간을 의미합니다. 1) 변수식 선언 ## 문법 var 변수명 = [값1, 값2,...]; ## 예시 코드 - 변수 arr01에 10, 20, 30이라는 값을 나열해서 담았습니다. - 결과값을 문서에 출력하고, 값의 타입도 알아보는 코드를 작성하였습니다. ## 코드 결과 - 값은 10,20,30을 잘 반환하였고, 값의 .. [포토샵] 6강 포토샵 자동화 기능 - Action과 Batch - 오쌤의 니가스터디 1. Action패널 - Action이란 포토샵에서 사용되는 작업을 저장하여 다른 이미지에도 적용시킬 수 있는 것을 의미합니다. - 예시에 사용될 이미지 : 출처 pixabay.com/ ## 사진크기가 가로 1280px인 사진들을 가로 400px로 바꾸는 작업 1) 우선 적용할 사진을 포토샵으로 불러옵니다. - 나눠드린 파일 중 [aurora-borealis-1839582_1280.jpg]를 포토샵으로 불러왔습니다. 2) [Window]메뉴-[Action] 클릭 - 위의 그림과 같은 포토샵의 [window]메뉴카테고리에서 [Action]을 눌러 Action패널을 꺼냅니다. 3) [Action]패널 확인 - 우측상단에 [Action]패널이 뜨는 것을 보실 수 있습니다. 4) 액션들을 모아줄 그룹폴더 생성 .. 이전 1 ··· 37 38 39 40 41 42 43 ··· 56 다음
