css 만으로 모달창 띄우기

§

워드님의 글을 하나 보고,

http://www.thewordcracker.com/jquery-examples/jquery-텍스트-클릭-시-div를-팝업으로-표시하는-방법/

워드님이 약간 기분 나쁘실 수 있지만, 그래도 짚고 넘어가야 할 것 같아, 이 글을 쓸까말까 고민을 조금 하다가 씁니다.

짚고넘어가야 한다고 생각한 이유는,

1. 물론 의도하지 않으셨겠지만, 피해자가 발생할 수 있고
(사실 저는 피해를 본적이 있습니다. 그것도 여러번 ㅠㅠㅠ)

2. 웹개발을 처음 시작하시는 분들에게 도움이 되리라 생각해서 입니다.

일반분들이 말씀하시는 팝업창은 전문용어/올바른 용어로, 모달 (modal)창 이라고 합니다.

UI 개발시, 특히 모바일에서 매우 중요한 요소 입니다.

모달창

워드님의 글에서 자스 (javascript) 를 이용해 모달창을 띄우는 방법을 소개하고 계신데, 일단 jQuery 로 a href 를 클릭시 toggle 되는 소스 코드를 적어놓으시고, 아래는 바닐라 javascript 으로 모달창을 띄우는 코드를 소개하고 계셔서 이게 서로 무슨 연관인지 이해를 못했습니다.

두개의 코드가 서로 아무런 상관도 없는데, 이게 뭔가 싶어서 약간 혼동이 온…

암튼 그게 중요한건 아니고, jsFiddle 에 모달창 소스 코드를 적용하셔서 소개하고 계셔서 살펴보았는데,

http://jsfiddle.net/b68Xb/2658/

이 방식이 욕이나 구타를 유발하는 코드라… 이건 짚고 넘어가야 겠다는 생각이 들었습니다.

<div id="light" class="white_content">Lightbox 콘텐츠입니다. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">닫기</a></div>

보다시피 html 과 javascript 이 서로 엉켜있는 일명 “스파게티 코드” 혹은 “dog food code” 입니다.

inline javascript 으로 onclick 시 해당 div 에 style 을 먹이는 단순한 코드인데, 이런 유형의 inline javascript 이 예전에 그누보드에 산재해 있어서, jQuery 와 충돌을 가져왔고, 수도 없이 많은 삽질을 해야 했습니다.

지금도 그때 생각만 하면 에이 십할 하고 욕이 나옵니다. 이건 뭐 그누보드 javascript 을 다 뜯어고칠 수도 없고, 그렇다고 jQuery 를 안쓸수도 없고, 개짜증 났었습니다.

javascript 을 쓰려면 function 화 해서 써야지, 지금이 90년대도 아니고, 왜 이런 스파게티 짬뽕 같은 inline javascript 코드들이 아직도 인터넷에 돌아다니는지 모르겠습니다. (화나요.)

또다른 문제? 문제라기보다는 제가 좀 이해가 안되는 부분이, 모달창 하나 띄우자고 javascript 을 이용한다? 왜? 그냥 css 만으로도 얼마든지 모달창 띄울 수 있고, 요즘은 다들 css 로 모달창 띄우거든요.

랭커님이 분명 이글 읽으시면서, ‘에이.. css checkbox 핵 으로 할려고 그러는거죠? 그건 나두 아는데? ㅋㅋㅋ’ 이러실 것 같아서, checkbox 핵 없이 하는 방법을 소개해 드립니다.

소스코드는 어떻게 작동하는지 살펴보시고 여기서 퍼가실 수 있습니다.

https://jsfiddle.net/mspsys/L5fLrwnh/

checkbox 핵 쓰면 css 복잡하고 알아보기 힘들어진다고 랭커님이 은연 중 저한테 컴플레인 하시는 것 같아서, checkbox 핵 없이 아주 간결하게 작성했습니다. 워드님이 javascript 으로 모달창 띄우시면서도 사용하신 css 보다도 더 간결합니다.

이 정도면 랭커님도 ㅇㅈ? 불평 안하실거죠? ㅋㅋㅋㅋ

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , ,

카테고리: ,

Ω

8 Comments

  • codei says:

    퍼가요~

    응용해서 안에 메세지를 액션별로 다르게 나오도록 만들었습니다 ㅎㅎ
    confirm() 기능까지 만들긴 했는데 조금 더 연구 할 부분이 있네요 ㅎㅎ

  • 워드님이야 전문 개발자가 아니고 좋은 글 있으면 번역해서 포스팅하는 수준이니 가끔은 깔끔하지 못한 코드도 그대로 소개되는 것 같습니다. 그래도 일반인들은 고마워해야겠지만. ^^;;;

    그나저나 제가 글 읽어 내려가면서 “ㅋㅋㅋ” 이러고 있을 줄 어떻게 아셨을까요? 이유까지 맞히시고 이제는 메튜님 신기(神旗)도 내리셨나요? ㅎㅎ

    음… 위에서 소개해주신 방법은 대박이네요. 소스 하나에 여러가지 Tip 이 녹아있는거 같아요. ㄷㄷㄷ (덕분에 최근 삽질했던 UI 개발에 있어서 힌트도 얻었는데요. 이미 만들었기 때문에 귀찮아서 다음에 기회 있으면 적용하는걸로)

    CSS 의 저런 속성들은 언제고 한번 훑어본적이 있는거 같은데 그 놈의 IE 때문에 7~8버전까지 호환성 보장이 안되면 쳐다도 안보니… 저런게 있었는지도 가물가물. 예전에 메튜님께서 구버전 IE 크로스브라우징에 투자할 시간에 새로운 기술을 습득하라고 하셨던게 요즘에서야 납득이 가네요.

    예전에는 “그게 무슨 말이야~ 한국에서는 IE 가 갑인데. 어림없는 소리지…” 라고 생각했었거든요. 후회막심!! ^^;;;

    • Matthew says:

      “신기(神旗)도 내리셨나요?” – 음 반대인데요.

      무당들이처음 신 받으면 신기 (神旗) 내려서 용하다고 하잖아요. 저도 2011년 2월에 “신받아서” 무지 용했었습니다.

      3월 11일에 엄청난 일이 일어난다 라고 하면서 날짜까지 정확하게 찝어서 말하고, “내가 지진이 나는 모습을 보았어. 미국 북쪽.” 이라고 제 와이프하게 말한 바로 다음날 알라스카에서 엄청난 규모의 지진이 나서 제 와이프가 저한테 전화도 하고 그랬습니다. 신기하기도 하고, 무섭기도 하니까.

      이름이 David Daugherty 였나. 미국에 문선명을 보좌하는 통일교 목사가 하나 있었는데, 이 사람이 저를 찾아왔길레, 당신의 믿음은 잘못된거다. 길거리로 나가자. 사도행전에 보면 제자들이 아픈사람을 치유하지 않느냐? 나랑 같이 나가서 내가 아픈 사람들을 치유하겠다. 문선명이 재림예수면 당신도 나와 똑같이 아픈 사람들을 치유할 수 있어야 해. 그렇지? 언제 나갈까? 이랬더니 깨갱. ㅋㅋㅋ

      (저는 그때 예언도 하고, 아픈 사람도 치유하고, 완전 날이 제대로 서 있었습니다.)

      무슨 이유에서인지 이 사람이 저에게 계속 연락을 하고 그랬는데, 그해 겨울이나 그 다음해 초에 문선명이 평양에 가는 스케줄이 잡혀 있었습니다.

      자기가 문선명을 보좌해서 평양에 다녀온다고 하길레, 못갈걸? 평양가도 김정일을 만날수가 없어. 이세상 사람이 아니니까.

      이랬는데 정말 김정일이 그해 죽었고, 암튼 제가 생각해도 그 당시 제가 좀 쩔었었습니다. ㅋㅋㅋ

      (그 다음해에 문선명이 몸이 아파서 David 목사가 한국에 나간다고 했는데, 제가 David 목사한테 문선명은 죽음 목숨이다 라고 말하기도 했었습니다.)

      그렇지만 모든 무당들이 그렇듯, 저도 순수한 마음을 계속 유지하지 못해 그런건지, 아니면 원래 이렇게 잠깐만 신기(神旗) 가 유지되는건지, 이런 능력 같은건 소멸되더라구요.

      그래서 반대라구요. 지금은 무당 아니고 그냥 일반인. ㅋㅋㅋㅋ

      모달창은 css 말고 그냥 html 만으로도 만들 수 있어요.

      https://developers.google.com/web/updates/2013/09/dialog-element-Modals-made-easy?hl=en

      예제: http://demo.agektmr.com/dialog/

      이렇게 html5 만으로도 모달창을 띄울 수 있는데, 문제는 크롬 하고 Safari 말고 다른 브라우져들의 기술력이 크롬을 따라오질 못해서 몇년째 이걸 못 쓰고 있는 상태 입니다.

  • 플렉 says:

    해당 코드가 IE10 이하에서는 z-index 문제인지 제대로 작동하지 않네요.
    혹시 스크립트 없이 해결 가능 할런지요?

    • Matthew says:

      모달창의 z-index 를 -1 으로 주시면 작동합니다.

      IE9 은 css transition 이 먹지 않아서 모달창의 fade in/out animation 은 css 만으로 불가능 합니다.

      이 부분은 script 쓰셔야 합니다. 그런데 jQuery 사용하시면 .fadeTo() 한줄만 넣으면 됩니다.

      https://api.jquery.com/fadeTo/

  • SGLee says:

    MVC를 어떻게 녹여내느냐는 관점의 차이도 있고, 한 명이 개발하느냐 팀이 개발하느냐 팀들이 개발하느냐에 따라 효율이 달라져서 뭐가 맞다 틀리다 말하기가 힘들지만…

    위드님이 소개하신 코드가 css만으로 모달을 띄우는 것 보다 좋지 않다고 할 수 없습니다.(개밥 코드라고 쓰셨지만요…)

    이유는 이렇습니다.

    자바스크립트에 디자인이 들어가는 것이 가독성을 떨어뜨리는 것과 마찬가지로 CSS에 이벤트를 넣는 것 역시 가독성을 떨어뜨립니다.

    자바스크립트 코드를 함수화 시키는 이유는 재활용에 있겠지요. 만약에 딱 한번만 쓴다면 인라인이 훨씬 가독성이 좋습니다. 그건 css도 마찬가지죠. 예를 드신 개밥코드를 보면…

    “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none'”

    이 코드가 왜 개밥코드인지 잘 모르겠습니다. 이 코드가 재활용 된다는 어떤 보장도 없어요. 만약에 light를 ID로 갖는 단 하나의 페이지에 이 코드가 사용되어 진다고 하면, 함수화 시키는 것이 훨씬 가독성이 떨어지게 됩니다. 그건 단 한줄의 style을 위해서 global.css에 class 혹은 id로 정의를 하는 것과 마찬가지입니다.

    위의 코드는 클릭을 했을 때 light와 fade를 숨긴다는 뜻입니다. 왜 개밥코드일까요? 게다가 이 코드는 모든 브라우져에서 작동됩니다.(20년 전에도 쓰였던 코드이니까요) 어떤 라이브러리도 쓰지 않지요.

    왜 이 코드가 jQuery와 충돌이 날까요? 전 잘 모르겠네요.

    인라인 자바스크립트는 인라인 스타일과 마찬가지로 다른 사람이 만든 프레임워크에 없는 기능을 일시적으로 넣을 때 좋습니다. 사람이 바뀌어도 혼란스러울 일이 전혀 없지요. 하지만, 함수화 시켜서 파일에 넣고 쓰면, 기존의 라이브러리 관리 규칙이 사람이 바뀔 때 마다 바뀌어서 util.js, utilv2.js 혹은 modal.css, modal2.css 등 전체 코드 자체가 엉망이 됩니다.

  • Matthew says:

    헐ㅋ. Disqus 가 이글을 왜 스팸으로 규정했는지 모르겠습니다. 어느분이 오늘 자기 댓글이 스팸처리되는 것 같다고 해서 살펴보니 상당히 많은 수의 댓글들이 스팸처리 되고 있었네요. ㅠㅠㅠ

    특히 이 댓글은 매우 좋은 내용인데.

    많이 늦었지만 답변을 드리자면, “javascript:void(0)” onclick = 으로 시작하는 inline javascript 은 근대 js 작성에서 여러가지 이유로 best practice 가 아닙니다.

    1. inline javascript 은 자스코드가 unobtrusive 해야 한다는 강령을 어기며
    2. 모든 코드는 separation of the view and the controller 가 이뤄져야 한다는 점도 충족시키지 못합니다.

    MVC 까지 언급하는건 너무 나간거고, 단지 보여지는 부분과 기능이 섞이는걸 전문용어로 스파게티 코드 혹은 개밥코드라고 합니다.

    “왜 이 코드가 jQuery와 충돌이 날까요? 전 잘 모르겠네요.” – 3자 개발자 입장에서 inline code 가 덕지덕지 붙어 있어, 충돌나는 부분을 일일히 다 찾는데 너무나 큰 어려움이 존재 합니다. 그 얘기를 말한 것 입니다.

    이 부분은 오래전 (대략 10년에서 최소 5-6년전) Joomla 나 그누보드 같은 솔루션에 jQuery 를 붙이는 작업을 해본 개발자들이나 공감할 수 있는 부분입니다.

    CSS에 이벤트를 넣는 것 역시 가독성을 떨어뜨립니다. – 100% 동감합니다. 하지만 inline javascript 처럼 debug 이 어려워 지지는 않습니다.

Leave a Reply to Matthew Cancel reply

Your email address will not be published. Required fields are marked *