아재의 쓴소리 : html 부터 제대로 배워라

§

매주는 아니지만 토요일 아침이면, 코드를 좀 봐달라는 freelancer 들로부터 연락을 받게 되는 경우가 종종 있습니다.

한국 프리랜서분들은 아니고 주로 freelancer.com 같은 곳에서 일하는 인도 개발자들 입니다.

사실 이런 프리랜서 사이트, 특히 freelancer.com 같은 경우 프리랜서들의 질이 떨어지기 때문에 실력 좋은 프리랜서들과의 인맥유지가 상당히 중요합니다. 도움을 주면 돈을 지불하겠다는 친구들도 있지만, 그 가난한 나라에서 힘들게 사는 친구들에게 제가 돈을 요구 할 수 는 없는거고, barter (물물교환? 물물교환은 아니고 서비스 교환?) 을 합니다.

‘알았어. 그거 고쳐줄테니 너는 이 플러그인 코드 살펴보고 이 기능과 관련된 php 코드 좀 뜯어서 보내줄래?’ 이런식인거죠.

참고로 freelancer.com 에서 쓸만한 인력은 상위 5% 정도도 되지 않습니다. php 를 잘한다고 하지만 워드프레스에 대해 전혀 모른다던지, 워드프레스 전문이라고 주장하지만 겨우 테마나 좀 고칠줄 안다던지. 특히 front-end 쪽은 상위 1% 도 겨우 jQuery 나 조금 스크립팅 할 줄 아는 수준입니다. (front-end 개발자 찾기가 가장 힘듭니다. freelancer.com 에 제대로 된 front-end 개발자는 없다고 봐도 됩니다.) 이렇기 때문에 평소 인맥을 유지하는게 상당히 중요합니다.

암튼 오늘 아침에 저에게 연락을 준 친구는 제가 5년전 부터 알고 지내는 인도 개발자 입니다.

Joomla 쇼핑몰 사이트를 하나 만들고 있는데, 토글버튼을

<a id="toggle" href="#"></a>

이런식으로 쳐놓고,

이 hash tag ( # ) 이 url 에서 보이게 되면 jQuery 가 작동을 안해서

jQuery 에서 event.preventDefault(); 를 먹이니 url 에서 hash tag ( # ) 는 사라졌는데, jQuery 코드가 아예 작동을 안한답니다.

A 를 하면 B 가 안되고, B 를 하면 A 가 안되는, 이런 상황인거죠. 해결방법이 없는 듯 하고, jQuery 를 다시 짜야 되는거 아니냐고 합니다. 해결책을 구하는건 아니고, 은근 내가 이 코드를 다시 짜주길 바라는듯…

일단 jQuery 코드를 보내왔는데, 하… 도대체 뭔짓을 한건지.. ㅋㅋㅋ 한참을 들여다 봐야 했습니다.

그리고 저는 해결책으로 딸랑 이 html 한줄을 고쳐서 보내줬습니다.

<button id="toggle"></button>

그랬더니 조금 후 연락이 와서 jQuery 가 이제 제대로 작동은 하는데, 버튼이 다 깨져버렸답니다. 자기도 버튼 태그를 넣으면 되는건 알았지만, (정말로? 어디서 jQuery 코드나 퍼다가 붙여넣었겠지 늬가 설마 그 걸 알았다고? ㅋㅋㅋ) 그래서 이걸 버튼태그를 사용 안하고 해결하려고 한거랍니다.

‘웃기고 있네. 퍼온 소스에 버튼이 <a> 로 작성되어있으니까 그대로 가져다 쓴게 아니고? ㅋㅋㅋㅋ’

암튼 이 버튼이 깨진걸 어떻게 고치냐고 합니다. 아오 이 븅시나… ㅋㅋㅋ

#toggle { 
padding: 0;
outline: 0;
border: none;
cursor:pointer;
}

너가 지금 이 css 4개 넣는게 힘들어서 몇시간동안 그 jQuery 코드를 수정하려고 했단 말이지? 그 친구 꿀먹은 벙어리 됨. ㅋㅋㅋ

뭐, 그랬을수도 있는거죠. 그랬다고 쳐줘야죠. ㅎㅎ

사실 jQuery 메뉴나, 모달창 예제들이 거의 전부다 이 anchor tag 을 사용하고 있습니다. 그것도 아주 오래전 부터, 처음 jQuery 예제가 나올때 부터 그랬습니다. 그 이유는 저도 잘 모르겠습니다만, 인터넷에 돌아다니는 jQuery 예제들이 거의 메뉴예제인 경우가 많기 때문이기도 합니다. 메뉴라면 약간의 논란이 있을 수 도 있지만, <a> 태그를 쓰는게 맞다고 생각합니다.

이런식으로.

<a href="#" class="login header-button animatedClick boss-tooltip" data-target="LoginBox" data-tooltip="login"><i class="bb-icon-exit"></i></a>

위 경우는, 메뉴의 드랍다운 부분에 tool tip 을 <a> 태그 로 작성한건데,

https://kopress.kr/topic/번역파일이-테마에-안-입혀집니다/

버튼 태그를 쓰는게 옳다고 볼수도 있지만, <a> 태그도 사용가능하다고 저는 생각합니다.

하지만 대부분의 경우, navigation 메뉴가 아니라면, anchor 태그는 문서를 identify 하고 href 로 이동을 시키는 기능을 하는게 원칙입니다. 그래서 이 anchor tag 에 href 를 hash ( # ) 로 붙여서 이런 UI 를 작동시키는 버튼으로 사용하는 건 W3C 규정/규격 상 올바른 사용 방법도 아닙니다.

www.w3.org/MarkUp/1995-archive/Elements/A.html

결국, 이런 경력이 꽤 된 개발자들도, 이 html 의 <a> 태그 하나 조차도 제대로 이해하지 못하고 있는 것 입니다.

어느 분야나 다 마찬가지 겠지만, 기본에 충실해야 합니다. Front-end 개발자가 아니더라도 front-end 개발을 하게 되는 경우가 있고, 그래서 모든 웹 개발자들은 웹의 기본 중 가장 기본인 html 부터 제대로 학습했으면 좋겠습니다.

개발자들이 html 태그만 제대로 숙지하고 있어도 이런 황당한 어려움을 겪게 되는 일은 없습니다.

HTML 을 배우자

www.w3schools.com/tags/default.asp

html, 이거 어려운거 아니거든요. 이해하기 매우 쉽거든요. 단지 아무도 관심이 없을 뿐 입니다.

hackya 는

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

Tags: , , , ,

카테고리: , ,

Ω

10 Comments

  • bastcode says:

    어느 강사분이 이런 말을 하더군요.
    기초는 쉬워서 기초가 아니라 중요해서 기초이다.
    참고로 a 태그의 href 작동 안시키는 방법으로는
    a href=”javascript:;”
    이렇게 하면 작동 안합니다.

  • dung_eni says:

    좋은글 감사드립니다. 크로스 브라우징 개념을 이해하고 싶어 우연히 방문했다가 좋은글들 많이 보고 갑니다. 앞으로도 종종 찾아와서 보고 가겠습니다.. 감사합니다 !

  • 초록송아지 says:

    블로그 한지 8일이 되가는데, 여기서 공부좀 해야겠네요.
    a href빼고 나머지는 모르겠네요 ㅋㅋㅋ

  • Freedom says:

    안녕하세요 프런트엔드 공부하고 있는 사람입니다.
    제대로 된 프런트엔드 개발자를 찾기가 어렵다고 하셨는데, 좋은 프런트엔드 개발자가 갖춰야 하는 요건이 뭐가 있을까요?

    • Matthew says:

      좋은 front-end 개발자라면 전부다 대답할 수 있어야 한다며 매우 비현실적인 질문들을 나열해 놓은 문서들도 있는데 (한마디로 엄청나게 난이도 높은 질문들만 쭉 나열해놓은), 제 사견으로는 아래 질문 목록이 적당한/공정한 질문목록이라 생각됩니다.

      https://github.com/khan4019/front-end-Interview-Questions

      단지 웹개발쪽이라면 hoisting 과 bubble event/bubbling 에 대한 질문이 빠져있고, DOM 쪽 질문도 부족한 반면 fibonacci function 에 대한 질문이 보입니다. (fibonacci function… ㅋㅋㅋ 웹쪽에서는 절대 필요없는/사용할 일 없는 개념입니다.)

      좋은 front-end 개발자 == 개발팀에 맞는 개발자 입니다.

      개발팀이 angular 쓰고 있는데 나는 react 을 쓴다. 이러면 나는 좋은 개발자가 아닌거죠.

      자스 (javascript) 쪽은 인터뷰시 실력을 어느정도 가늠할 수 있는데 (js fiddle 열어놓고 UI 좀 짜보라고 시키면 금방 실력수준을 알아볼 수 있습니다) 면접시 확인하기
      어려운 부분은 css 입니다.

      사실 자스 보다 css 코딩이 더 중요해지는 플젝도 많고, front-end 개발자의 css 실력이 구멍인 경우, 오너/플젝 매니저 입장에서 매우 난감해 집니다.

  • nsut5 says:

    폼이 아닌데 button 요소를 그대로 사용하면 의미에도 맞지 않고 크로스 브라우징 문제도 생깁니다. 일부 브라우저에서 사용자가 다른 폼 컨트롤에서 해당 버튼을 의도치 않게 작동시킬 수 있습니다. button[type=button]을 쓰세요. 이것도 기본 중에 기본입니다.

    • Matthew says:

      “폼이 아닌데 button 요소를 그대로 사용하면 의미에도 맞지 않고” – 그건 본인만의 생각이구요,

      W3C 에서는 아무 문제 없다는 것 이 공식 입장입니다.

      The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events.

      https://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

      “일부 브라우저에서 사용자가 다른 폼 컨트롤에서 해당 버튼을 의도치 않게 작동시킬 수 있습니다.” – 이건 button 요소의 문제가 아니라 본인이 코딩을 제대로 할줄 몰라서 발생하는 문제입니다.

      • nsut5 says:

        1. “W3C 에서는 아무 문제 없다는 것 이 공식 입장입니다.” -> 그건 본인만의 생각 이시고요.

        해당 내용은 input[type=text], button[type=button] 따위의 폼 컨트롤들을 염두한 것입니다. 공부해보셨으면 아셨을 텐데요? 모르면 모른신다고 하세요.

        의미에 맞게 사용하라고 인도 개발자 분을 비난하더니 아무 이유 없이 button[type=button]을 거르고 button[type=submit]을 사용한다? 어처구니가 없군요. 설마 button 요소의 type 속성 기본 값이 submit 인 것을 모르시나요?

        2. 이건 button 요소의 문제가 아니라 본인이 코딩을 제대로 할줄 몰라서 발생하는 문제입니다. -> 이건 본인이 코딩을 제대로 할 줄 몰라서 발생하는 문제입니다.

        일부 브라우저에서 form 요소 없는 input[type=text] 요소 사용시 본인 처럼 막무가내로 button[type=submit] 요소를 사용하면 해당 폼 컨트롤에서 엔터를 누를 경우 그 막무가내로 사용한 button[type=submit] 요소가 눌립니다. 운 좋은 사용자는 아주 기쁜 경험을 얻어갈 수 있겠네요. 묻겠습니다. 코딩을 해보셨긴 했나요?

        브라우저별로

        특정 요소들이 존재할 경우들에 대하여 엔터를 눌렀을 때 폼 전송이 되는 경우, 폼 전송이 안 되는 경우와 결과적으로 버튼이 의도치 않게 눌릴 수 있는 경우에 대해 얼마나 분석해보셨나요? 설마 무작정 사용하고 계셨던 건 아니겠지요? HTML부터 제대로 배우세요.

        기분 나쁘신가요? 인터넷이라고 마음대로 남 뒷담화 까는 것은요? 비판이라 하시지는 않겠죠? 개발자 실력이 후달리면 쌍욕을 먹어도 다행인 건가요? 아니죠. 그럼 저는 벌써 님에게 쌍욕을 한 바가지 날렸을 겁니다. 개발자에게 필요한 건 태도 하나이면 그뿐입니다. 최소한 저 개발자분이 그건 본인보다 좋을 것 같네요.

      • 0857433291 says:

        아, 까먹은 게 있네요. 본인이 링크한 명세의 문단에 걸린 섹션 눌러 보셨나요? 해당 예제에서도 button[type=button]을 사용하고 있네요?

        애초에 딸랑 명세 링크 하나 걸어 놓고 두루뭉실한 부분을 본인 사정에 맞게 싸게 싸게 해석해놓고 배째라 하는 것에서 이미 전혀 공부되어 있지 않다는 것을 반증합니다. 만약 명세가 button[type=submit]만을 사용하라 강제하였다고 만에 하나를 가정하더라도 공부해본 사람은 압니다. 그건 잘못 설계된 것이라는 것을요.

        의미에 맞게 사용하려면 button[type=button]이 우선적으로 고려되어야 합니다. 명세뿐 아니라 검색하셔서 그에 준하는 레퍼런스들과 개발자들의 의견을 찾아보세요. 그 전에 애초에 직관적으로도 알 수 있는 문제인데 말이죠. 한 번이라도 고민해보셨을까요?

Leave a Reply

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