html 9

[삽잡이::html] GNB와 LNB에 대해서

웹 페이지들을 들어가게 되면메뉴들을 접할 수 있습니다.이때 이 메뉴들에도 특징들에 따라명칭을 다르게 부른다는 사실을 아십니까!?오~ 뭐야~ 뭐야~ 위의 그림과 같이 3가지의 Main Menu들이 있다고 생각해봅시다.이 Main Menu안에는 3가지의 Sub Menu들이 존재합니다. 이들을 우리는 아래와 같은 명칭으로 이해할 수 있습니다. GNB란, Global Navigation Bar의 약자입니다.Main 메뉴라고 생각하시면 될 듯합니다. 어떠한 메뉴를 누르더라도 변화 없이 고정되어있는 메뉴말입니다.즉, 모든 부분에 나타나고 있는 전역적인 Navigation Bar입니다. LNB란, Local Navigation Bar의 약자입니다.GNB에 속한 Menu Bar를 누를 경우소제목 형식으로 나오는 Sub..

[삽잡이::javascript] Javascript에서 PHP 변수 사용하기

애초에 PHP는 Server를 위한 언어이고 Javascript는 Client (Browser)를 위한 언어입니다. 둘의 성격은 다릅니다.서버와 클라이언트... 특히나 Client에서 Server로즉, Javascript에서 PHP로 데이터를 보낸다고 하더라고Server에서 바로 받는다는 보장이 없기에우리는 Ajax와 같은 녀석들을 통해 Server에 값을 전하고 응답을 기다려서 처리하곤합니다. 그런데, Server에서 Client로 보내는 것은 그럼 어찌할까요? 그래서 PHP 데이이터를 Javascript에서 어떻게 사용할 수 있을지 생각해봤습니다. 으아~~ 두뇌 풀가동~ 우선은 직접적으로 echo문을 활용하여');?>Colored by Color Scriptercs 대략 이러한 코드를 통해 설명했던 ..

[삽잡이::html] 안보이는데 전송은 한다! 히든 필드(Hidden Field)

태그 자체가 사용자 입력부분과 전송 기능을 제공해주는 태그라고 이해할 수 있습니다.해당 태그 안에는 hidden이라는 속성이 있는데요,Hidden이라는 언어 자체가 숨기는 의미가 있습니다.예 그렇습니다.화면에 출력은 되지 않지만,데이터를 보낼 때 유용하게 사용할 수 있습니다.아래 좋은 예시가 있습니다.같이 살펴보시죠~ 우와와 (출처_ w3sschools)HTML Element들을 보게 되면demo_form에 이름을 입력받을 수 있는 Text Box와제출할 수 있는 Submit 버튼이 있습니다.그런데 이상합니다. 하나가 남지요...뭐야 뭐야 예 그렇습니다.바로, Hidden Filed입니다.value 속성에 있는 값을 넘겨주게 됩니다.결과를 한번 볼까요!?우와~ 안보였던 country가 보이네요~ hidd..

html과 PHP 그리고 Javascript의 관계

html과 PHP 그리고 Javascript 언어의 관계를 한번 쉽게 이해해보는 시간을 가져보겠습니다. 와~~~ html은 웹페이지를 위한...로 이루어진 요소들이 어울여저 있는 언어입니다. 우리가 보는 웹 페이지에 요소들에 맞게이쁘게 정보들이 출력됩니다. 예 그렇습니다.그런데, html을 통해 실행된 화면은 변함 없이 html 요소에 맞게 동일하게 출력 됩니다.몇 백번, 몇 천번을 들어가도 말이죠. 몇 천번을 들어가봤는데... 똑같아.... 그런데, 이 때 Javascript와 같은 Client Side Script 언어를 사용하여HTML 언어로는 할 수 없는 동적인 Action들이 가능해집니다. 마우스가 움직이는 곳마다 색깔이 칠해진다던지,어떠한 Error가 발생했을 경우 Alert 창을 띄워준다던지..

[삽잡이::javascript] 요소를 찾아 씹어먹겠어! 속성 선택자

html에 있는 여러 Tag들에서 필요한 Element들을 찾아와야할 경우들이 많습니다. 이럴 때 jQuery의 속성 선택자를 사용할 수 있습니다. Element 요소 하나하나 다 가져다 사용하겠어!! 예전에 jQuery 홈피에서 Selector 보겠다고 썼던 글이 생각나군요. (참고_ [삽잡이::Javascript] 요소를 찾아야 jQuery를 씹어먹지~) 아무튼!올바른 요소를 선택해야 해당 요소를 가지고 지지고 볶을 수 있지 않겠습니까!? 자 우선 기본적으로 연산자를 생각해보겠습니다. '=' 연산자는 is 와 같습니다.예를 들어 name = '삽잡이'name이 삽잡이이면~ 이런 뜻으로 사용되는 연산자입니다. '!=' 은 not입니다. '^'은 통상적으로 XOR 연산으로 사용하는데jQuery 속성 선택..

[삽잡이::javascript] css에도 가상클래스가?! nth-child

세상에나... css에도 가상클래스가 있습니다.nth-child(n) 이라는 녀석입니다. n에 들어가는 숫자 번째의 자식 요소를 가리키게 됩니다. '도로명 안내시스템' 사이트에 잠시 다녀와봤습니다. 이때 내가 검색을 했을 때 일정한 개수로 결과 값이 나올까요? 아니죠... 이렇게... 일정하지 않을 때... 요소를 선택하기 위해서는 어찌해야할까요? 이때 이 친구를 부르는 것입니다. n번째 자식요소를 가리킨다!!! 굳~

[삽잡이::Javascript] Form으로 한큐에 요소 찾자

자 여러분... 저는 요즘 jQuery를 공부하고 있습니다. 그럼 어디 한번 기분좋게 Element 를 찾아 다이나믹하게 웹 화면에 힘 좀 줘볼까요!? ... 이렇게 막일 하시렵니까....?(* 노가다는 일본말인거 아시죠? 한글을 사랑합시다!) 그럴 필요가 없습니다... 물론 경우에 따라 요소 하나하나를 찾아서 가공해야할 때도 있지만,한번에 가져올 필요가 있을 때에는바로, Form Filter를 사용하면 됩니다. form은 말이죠 '서식', '방식', '종류' 및 '유형'이라는 뜻을 가지고 있습니다. HTML에도 Form 요소가 있는데요,text, checkbox, radio등의 형식들이 해당됩니다. 더 자세한 내용은 역시 공식 홈페이지를 보면 되겠지요!?(참고_ http://www.w3schools.c..

[삽잡이::Javascript] 요소를 찾아야 jQuery를 씹어먹지~

jQuery에 대한 설명입니다.(출처_ http://www.w3schools.com/jquery/jquery_intro.asp) 영어를 다들 잘 하실 것이라 믿습니다. 하하...뭐 보이시는것과 같이 JavaScript의 라이브러리이구요,기존의 JavaScript를 사용할때에 비해 쉽고 간편하게 사용하도록 도와주는 고마운 녀석입니다. JavaScript보다 쉽게 프로그래밍 할 수 있고, 더욱 역동적인 인터페이스를 제공해주는 라이브러리가 바로 jQuery라는 것이군! HTML에는 여러가지의 Tag들이 있습니다.(굳이 외우우셔도 되지만, 이것 저것 건드리다보면 자연스레 익혀질 것입니다.) 아무튼, 이 Tag들은 각각 맡고있는 기능들이 있지요.이때, 이 Tag라는 요소들을 쉽게 제어할 수 있는 기능을 제공해주는..

href target none (#none) 어이없는 삽질...

웹 개발 경험이 거의 없는데... 최근에 게시판을 만들며 삽질중이다... 글삭제 여기서 버튼을 누르면 게시글을 삭제하도록 만들기 위해 자바스크립트를 사용하여 이벤트를 걸어두었다. 뭐... jQuery를 사용하여 js파일에서 eventHandler로 'click.#btnDelete' : 으로 걸어두었다. if (confirm('해당 데이터를 삭제하시겠습니까?')) {// blah blah blah} else {return;} 그런데, 게시글을 선택하여 삭제를 하면 삭제가 되지만, 취소를 누를경우 url에 #none이 붙어버려 뒤로가려면 두번 눌러야되는 사서 고생이 필요했다. 뭐지... 뭘까... 그런데, 금방 해결했다. return 뒤에 false만 붙이면 될 것을... 껄껄... 나란녀석... 삽질...