본문 바로가기
반응형

즐거움 넘치는 IT 세계72

[ jquery 기초 ] jquery 셀렉터 - 기본 | 팩토리함수 '$()' 함수는 괄호안에 CSS선택자를 정의해 반환합니다. 하나의 함수로 여러가지의 종류의 객체를 생성할 수 있는 팩토리함수 입니다. 'jQuery()' 함수는 동일한 기능을 하며 타 언어에서 $의 중복을 피하기 위해 지원합니다. | jQuery 셀렉터 기본적으로 jQuery의 선택자는 CSS의 태그 선택자와 비슷합니다. 앞서 CSS 선택자를 하신 분들이라면 더욱 쉽게 이해하실수 있을꺼라 생각됩니다. 더 상세한 셀렉터의 사용 방법은 공식사이트에서도 확인하실 수 있습니다. Selector Example Selects * $("*") All elements #id $("#lastname") The element with id="lastname" .class $(".intro") All ele.. 2019. 8. 18.
[ jquery 기초 ] jquery란? | 기본 이해 jquery는 2006년 "John Resic"에 의해 디자인된 자바스크립트 라이브러리이다. 자바스크립트의 코드를 단순하고 간결한 상태로 개발이 가능하며, 동일한 코드의 반복과 복잡하고 많은 코드로 개발되던 기존의 작업에 비해 여러 가지 효과나 이벤트를 간단한 함수의 호출만으로 쉽고 빠르게 개발이 가능하도록 도와줍니다. | jquery의 특징 1) CSS 셀렉터 - html 문서의 구조를 명료하면서도 읽기 쉬운 형태로 표현 및 사용 가능 2) 플러그인 아키텍처 - 중복되는 기능과 코드가 엉키는 등의 오류를 피하고 산출물의 공유가 가능하며, 이미 많이 개발되어 공유되어 있는 플러그인들을 쉽고 빠르게 이용 가능 3) 메서드 체인 - 여러 개의 동장(기능)을 한 줄에 나열하여 임시 변수의 사용을.. 2019. 8. 17.
[ CSS 응용 ] DIV 중앙정렬 방법 총정리 | 개요 사이트를 디자인 하다보면 여러가지 정렬방식들이 기초적인 text-align속성과 position속성으로 정렬을 할 수 있다고 설명을 해드린적이 있습니다. 그렇다면 이번엔 조금 더 들어가 Div객체를 화면에 중앙에 정렬할 수 있는 부분을 살펴 보겠습니다. 여러가지의 방법들을 모두 정리하면 좋겠지만 많이 쓰여지는 방법을 정리해보도록 하겠습니다. | 예제 1. position:absolute와 margin값을 이용한 중앙정렬 이 내용의 장점이라함은 모든 브라우저상에서 표현이 가능합니다. 단, 고정적인 width값과 height값이 있어야지만 가능한 상태입니다. (IE7 이상) HTML부분 box 위와 같이 "container"라는 div 안에서 "div_box"라는 div를 중앙정렬 하기 위해 먼저 .. 2018. 11. 14.
[ 포토샵 ] 사진에 인스타그램 프레임 입히기 | 인스타그램 프레임 적용법 요즘 사진찍고 인스타그램 프레임을 장식한 사진들을 많이들 보실텐데요. 최근 아이유 '팔레트' 뮤비에도 나왔었죠. 뮤비를 보시면 약 1분쯤에 나오는 장면!! (아이유 팔레트 뮤비중 캡쳐) 바로 요 장면입니다! 저도 이 프레임을 만들려고 하였으나, 어랏? 다른 블로거님에게서 좋은 자료를 받아 저 역시도 공유하려합니다. 받아온 자료에서 약간의 수정을 통해 조금 더 쉽게 사용하실 수 있도록 하였습니다. 우선 위 자료를 다운 받아서 아래 내용을 순차적으로 따라해주시면 되겠습니다! | 결과물 미리보기 위에 이미지를 보면 바탕에 원하는 사진을 두고, (저는 저희 반려견 라떼를 쓸 예정이에용 ㅎㅎ) 본인의 인스타그램 계정명과 아래 텍스트까지 수정할 수 있도록 되어 있습니다! 그리고 더 나아.. 2018. 11. 3.
[ 포토샵 ] 인쇄용, 웹용 작업시 색상모드와 해상도 | 포토샵 새로 만들기 포토샵을 새로 켜면 '새로 만들기' 라는 창이 뜹니다. 저는 옛날에 이 창이 떳을때 도대체 어떤걸 만져야 하는건지를 몰랐고, 내가 작업하는게 무언인가에 따라 어떤 설정이 필요한지를 모른체 작업하다가 뒤늦게 알아차려 되돌릴수 없는 경우들이 많았습니다. 저와 같은 실수를 하시지 않도록 기본중에 기본이지만 작성하고자 합니다. 처음 포토샵을 켜서 새로 만들기를 하게 되면 있는 수치들은 이전에 작업했던 내용의 크기이거나,혹은 다른데에서 캡쳐, 복사 등의 행동을 했다면 그 행동한 녀석의 수치들이 기입되어 있는 경우가 있습니다.그럼 본인이 원하는 수치로 바꿀때 무엇을 생각해야할까요. 우선, 본인의 작업물이 어떤 결과물인지 생각할 것.무조건 이미지의 크기를 크게 만든다고해서 좋을것이 없습니다.물.. 2018. 10. 2.
[ CSS 응용 ] 유투브,비메오 영상을 반응형으로 만들기 (iframe, embed 반응형) | 개요 iframe 이나 embed 코드를 그냥 이용하면 절대값의 사이즈를 가지기 때문에 모바일이나 다른 환경에서는 반응형으로 잡히지 않을때가 있다. 이럴때 사용할 수 있는 코드를 정리하였습니다. | 예제 유튜브나 비메오등에서 영상을 퍼올때 iframe이나 embed형태로 가져온다. 가져온 태그를 div로 감싸준다. 감싸 안은 div 태그에 CSS를 적용하고, 안에 iframe에 기존에 있는 width값과 height값을 제거하고 다음 CSS를 적용한다. 위와 같이 태그에 바로 적용도 가능하고, 별도로 CSS를 분리하여 사용도 가능하다. 다음은 감싸안은 div태그에 class를 embed-container로 주고 정리한 내용이다. | 결과값 2018. 10. 1.
[ CSS 입문 ] cursor 속성 | 개요 cursor 속성을 이용하면 해당 태그 위에 마우스를 위치할 때 마우스 커서 모양을 마음대로 바꿀 수 있습니다. | 예제 Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help | 결과값 Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help 2018. 9. 19.
[ 포토샵 ] 간편하게 잡티, 여드름 제거하는 법 | 사진을 찍었는데, 트러블이 보일 때 해결법 친구들과 놀러가서 사진을 촬영 후 나중에 보니 여드름이나 트러블을 열심히 화장으로 가려봤지만 사진에 그대로 나타나 맘에 안드는 경우!이때 포토샵에서 아주 간단한 방법으로 보정을 할 수 있어서 소개해드리려 합니다.아주 간단하니 쉽게 따라하실 수 있으실꺼라 생각됩니다. | 결과물 미리보기( 이미지 출처 : 구글 http://google.com ) 위에 이미지를 보면 왼쪽은 잡티를 제거한 부분, 그리고 오른쪽은 잡티를 제거하기 전 입니다.잡티를 제거하실때 옛날부터 포토샵을 좀 해오신분들이라면 아실만한 '도장툴(Stamp tool)'은 사실 이런 사진에서 잘 못 사용했다간 음영이나 빛, 색상이 다른 부분을 잘못 복제하여 사용하게 된다면 오히려 사진을 망칠 수 있습니.. 2018. 9. 18.
[ CSS 입문 ] position 속성 | 개요 position 속성은 태그의 위치를 잡는 속성이며 5가지의 값을 갖습니다. CSS를 공부하면서 가장 어려웠던 부분이고 실무에 있어서도 많이 사용되는 속성으로 꼭 정확하게 공부할 필요가 있는 속성입니다. 기본적인 html로 레이아웃을 잡는다면 그 안에 요소들은 이전 margin, padding속성과 더불어 position속성으로 위치를 잡게 되는 경우가 많으며, 이 속성을 잘 이용하면 다양한 화면 구성을 할 수 있습니다. static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임으로 설정해 줄 수 없습니다. absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. relative : 원래 있던 위치를 기준으로 좌표르르 지정합니다. fixed : 스크롤과 상관없이.. 2018. 9. 18.
반응형

티스토리툴바