마크 업의 선 마스터가되는 법 배우기

마크 업 또는 마크 업은 마크 업 또는 태그 지정 언어를 그대로 나타냅니다. HTML 및 CSS, 그리고 우리 모두는 웹 템플릿을 만들기 위해 레이블을 하나씩 열고 닫는 것이 얼마나 고통 스러운지 알고 있습니다.

물론 이에 대한 솔루션이 있습니다. 그중 하나는 IDE와 같은 자동 완성입니다. 드림위버 제길 블루 그리폰 그에게서 플러그인을 사지 않으면 짜증나 o 코모도 매우 무겁다… 요점은 옵션이 너무로드 된 IDE 또는 코드 편집기가 종종 상상할 수없는 방식으로 작업을 방해한다는 것입니다. 그런 경우입니다 드림위버 그래픽으로 생성 한 것을 쓰레기 코드로 채우고 무겁고 비싸고 추합니다. 블루 그리폰 무료이기 때문에 대부분 성가 시지만 옵션의 절반은 유료 사용자를 위해 예약되어 있습니다. 그리고 마지막으로 우리는 코모도 편집, 꽤 좋고 강력하며 옵션으로 가득하지만 무겁고 (중간에 100MB) 설정이 지루합니다.

웹 개발자 또는 웹 디자이너의 가장 좋은 무기는 수천 개의 무기가 위에있는 전쟁 탱크 스타일의 IDE가 아니라 간단한 텍스트 편집기, 일부 플러그인 및 아픈 사람처럼 입력 할 수있는 기능입니다. 젠 코딩 그리고 그들은 지금까지 만들어진 마킹을위한 최고의 도구를 손가락에 넣을 것입니다 (적어도 나에게는).

하지만 ... 도대체 뭐야 젠 코딩?

간단합니다. HTML 및 CSS에 대한 드롭 다운 추상화 레이어 역할을하는 특수 플러그인입니다. 자바 스크립트 가장 유명한 출판사 (메모장 ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver등).

아하, 당신이 무슨 말을하는지 아직도 이해가 안 돼요 ...

그래서 간단한 예를 보여 드리겠습니다. 드롭 다운 추상화를 기억하십니까? 음, 축소로 변경합니다. 한 줄로 접힌 HTML / CSS 코드 한 줄을 커튼처럼 펼치거나 뒤로 접을 수 있다고 상상해보세요. 방법을 알고 싶으세요? 작동하려면 두 가지가 있는지 확인해야합니다.

있다 젠 코딩 편집기에 설치되었습니다.
사용하기위한 명령과 구문을 알고 있어야합니다.

좋아, 코드에 손가락을 대십시오.

html>head+body

그 코드 줄이 보이십니까? 이것이 HTML의 구문입니다. 간단합니다.

먼저 태그의 이름 (html)을 입력 한 다음 해당 태그 (>) 안에 들어갈 태그를 지정한 다음 해당 태그 (head 및 body)에 들어갈 태그의 이름을 지정합니다. '+'기호는 머리와 몸이 두 개의 다른 레이블이고 둘 다 다른 레이블에 포함되어 있지 않음을 나타냅니다.«함께하지만 혼합되지 않음«… 그런 다음, 매직 키 (제 경우에는 CTRL + E):

정확히 4 줄의 코드가 하나로 만들어져 올바른 키 조합을 눌렀을 때 마술처럼 나타납니다. 그리고 더 많은 코드가있을 수 있습니다. 예를 들면 :

html>head+body>ul#lista_ordenada>li.listilla*5

같은 구문이지만 다른 것을 추가합니다. CSS를 알고 있다면 ID, 클래스, 그리고 확실히 알지 못했던 것을 추가하고 있다는 것을 알게 될 것입니다. 승수…이게 다 뭐야!? 날 헷갈 리게 해!

진정해, 이것은 아주 간단하다. 우리는 본문 내부에«ul»태그를 입력한다고 위의 말을했다. 이상한 것은 없다. 위에서 설명했다. 그런 다음 ID를 할당한다. CSS를 안다면 이것들이 다음과 같이 식별된다는 것을 이해할 것이다. 기호 '#', 정렬되지 않은 목록 (ul) 안에 클래스 (클래스) listilla와 함께 XNUMX 개의 레이블을 추가합니다. 간단히 설명하겠습니다. 사실 그것은 매우 간단합니다. '#'는 그것이 ID임을 나타내고, 'li.listilla'는 우리가 listilla«li class = listilla»클래스와 함께«li»라벨을 만들어야한다고 말한 다음«마지막 다섯 번 반복«. 그 결과 우리에게주는 것은 :

한 줄에 훨씬 적은 시간에 작성된 XNUMX 줄의 코드 😉

그리고 그것은 CSS로도 가능합니다.아래에서 전체 치트 목록을 전달하겠습니다. 젠 코딩).

나는 이것이 하나에 수십만 줄을 만들기 위해 작동하지 않는다는 것을 강조해야합니다. 오, 이것은 한계와 사용 방법이 있습니다. 예를 들어 다음과 같이하고 싶다면 :

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

이론적으로 우리에게 이것을 줄 것 (마지막 이미지에서 강조 표시된 선을보십시오) :

이것은 우리에게 이것을 줄 것입니다 :

이것으로도 마술을 할 수 없다는 것을 보여줍니다. 코드의 Zen 마스터는 정확하고 빠르며 잘못한 일을하는 데는 시간과 속도가 필요하므로 올바른 기술을 사용하여 신속하게 작성해야합니다. 젠 코딩 다음과 같습니다.

html>head>body>ul#lista_ordenada>li.listilla*5

head 태그 내부를 확장합니다.

title+meta

올바른 코드를 제공합니다.

비록 젠 코딩 더 많은 것을 보여줄 수 있으며 헤드 안에 다른 명령 줄을 작성하는 것이 최선이 아니므로 다른 명령을 사용합니다.«약어로 확장" 나의 경우에는 ctrl + alt + e 그러면 Zen 코드를 작성하고 실시간으로 어떻게 나타나는지 볼 수있는 작은 막대가 열립니다. 조심하세요. 이걸로 모든 것을 작성하는 것은 권장하지 않지만 이미 생성 된 구조 내에서 작성하는 것입니다. 즉, 먼저 큰 구조를 생성 한 다음이 옵션을 사용하여 세부적으로 설명합니다.

그리고 내부에는 매우 멋진 명령이 많이 있습니다. 젠 코딩, 문제는 일단 설치하고 사용 방법을 배우면 조사하는 것입니다. 이 플러그인을 사용하면 css 또는 html에 대한 자동 완성 또는 스 니펫이 필요하지 않습니다. 사실이 두 가지 프로그래밍 언어 내에서 이러한 옵션이 시간 낭비라는 것을 알게 될 것입니다.

관심있는 분들을 위해 다음은 공식 치트 시트입니다. 젠 코딩, 당신은 그것을 형식으로 볼 수 있습니다 ODF o PDF justo 여기