Emmet Belirteçleri

herkese merhaba,

Emmet, HTML, XML ve diğer diller için hızlı kodlama yardımcı programıdır. Emmet kullanımı, kod yazmayı çok daha hızlı hale getirir ve kodlamayı daha kolay hale getirir. Özellikle, Emmet sayesinde birçok HTML etiketi ve özelliği tek bir kısayol ile yazılabiliyor. Örneğin, div etiketi içinde “p” etiketi oluşturmak için sadece “div>p” yazmanız yeterli olacaktır. Emmet ile, birçok HTML ve CSS kodu çok daha hızlı yazılabilir ve yapılandırılabilir. Emmet genellikle bir tarayıcıda veya bir kod düzenleyicide kullanılır.

Emmet kullanımı, HTML ve CSS kodlama sırasında çok yararlı olabilir ve zaman kazandırır. Ayrıca, Emmet sayesinde kodlarınızın düzenli ve okunabilir olmasını sağlar. Eğer HTML ve CSS kodlamaya yeni başlıyorsanız, Emmet’i mutlaka deneyin. Belki de kodlama sırasında en işinize yarayacak yardımcı programlardan biri olacaktır.

Peki öyleyse emmet için bize gerekli olan emmet belirteçlerini tanıyalım;

+ : kardeş öğe
> : içinde
^ : Yukarı çık
* : kere oluştur
lorem : uzun lorem
lorem5 : 5 kelimelik lorem
. : class
# : id
() : gruplandırma
{} : etiketin içindeki yazılar
$ : artan sayı vermemizi sağlar.

hemen bir de örnek bir kod yazalım

h1>lorem5^h2>lorem4^p*3>lorem6

böyle bir emmet yazdığımızda text editör bize aşağıdaki hali hazırlamış olacak. uzun uzun etiketleri yazıp içlerini doldurmaya çalışmayacağız.

<h1>Lorem ipsum dolor sit amet.</h1>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<p>Atque neque natus nostrum in quia.</p>
<p>Officiis, aspernatur voluptatum. Mollitia, unde vero.</p>

Şimdilik bu kadar, umarım faydalı olmuştur. bir de kaynak vereyim: https://docs.emmet.io/cheat-sheet/ adresinden daha fazla detaya ulaşabilirsiniz.

Herkese iyi çalışmalar.