본문 바로가기
반응형

즐거움 넘치는 IT 세계/코드로 만드는 디자인69

[ 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.
[ 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.
[ CSS 입문 ] position 속성 | 개요 position 속성은 태그의 위치를 잡는 속성이며 5가지의 값을 갖습니다. CSS를 공부하면서 가장 어려웠던 부분이고 실무에 있어서도 많이 사용되는 속성으로 꼭 정확하게 공부할 필요가 있는 속성입니다. 기본적인 html로 레이아웃을 잡는다면 그 안에 요소들은 이전 margin, padding속성과 더불어 position속성으로 위치를 잡게 되는 경우가 많으며, 이 속성을 잘 이용하면 다양한 화면 구성을 할 수 있습니다. static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임으로 설정해 줄 수 없습니다. absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. relative : 원래 있던 위치를 기준으로 좌표르르 지정합니다. fixed : 스크롤과 상관없이.. 2018. 9. 18.
[ CSS 입문 ] clear속성 | 개요 float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 중간에서 끊기(제거)위해 사용됩니다. 방향에 따라 3가지 속성으로 사용됩니다. left : 왼쪽 부유 제거 right : 오른쪽 부유 제거 both : 양쪽 모두 제거 | 예제 This is first line with floating image. This is second line with cleared property. | 결과값 This is first line with floating image. This is second line with cleared property. | 레이아웃에서의 clear float 속성이 레이아웃에서 많이 사용되고 있는데, clear속성도 float를 레이아웃에서 사용하며 발생되는 문제를 해결하기 위.. 2018. 9. 17.
[ CSS 입문 ] float 속성 | 개요 float 라는 단어는 원래 '뜨다'라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. inherit : 부모 요소에서 상속 left : 왼쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right : 오른쪽에서 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear속성이 있으면 페이지 흐름이 달라짐. none이 아니라면 display속성은 무시. none : 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display속성은 무시 됩니다. (none 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니.. 2018. 9. 16.
[ CSS 입문 ] display 속성 | 개요 display 속성은 요소를 어떻게 보여줄 것인가를 결정합니다. 주로 4가지의 속성값을 사용하고, 이외에도 다양한 속성값들이 존재하는데 실무에서도 객체들을 보여주는 방식에 따라 다양하고 많이 사용되는 속성 중 하나 입니다. 입문부분이기에 기본적인 속성값 4가지만 소개하겠습니다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inline-block : block과 inline의 중간형태 | 사용법 none 태그가 보이지 않게 되고, visibility 속성중 hidden 으로 설정한 것과 달리 영역조차 사라지게 됩니다. block , 태그 등이 이에 해당됩니다. 가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈이 되어 보입니다. wid.. 2018. 9. 15.
반응형

티스토리툴바