Ek bilgiler
📜 002-009-Emmet-ile-Calismak-Bolum-2.md
Emmet Kuralları ve Sözdizimi ile Hızlı HTML Kodlama
Emmet kullanırken mantığı kavramak işin temel sırrıdır. Kod yazarken elementleri birbirine bağlamak için artı (+) ile kardeş elementler, büyüktür (>) ile iç içe hiyerarşiler ve şapka (^) simgesiyle bir üst seviyeye çıkış yapıyoruz. Tasarımcıların çok uzun zamandır kullandığı mıngırca yani anlamsız yer tutucu metinler için lorem veya kelime adedini belirten lorem5 gibi yapıları devreye sokuyoruz. CSS dünyasından alışık olduğumuz nokta (.) sınıf, diyez (#) ise ID tanımlamak için birebirdir. Çarpı (*) işaretiyle tek seferde birden çok elementi çoğaltabiliyoruz.
Bu yapıları tıpkı birer Lego parçası gibi düşünebilirsiniz. Örneğin h1>lorem5^h2>lorem4^p*3>lorem6 gibi karmaşık görünen dizilimler, yukarı çıkış ve iç içe geçiş kurallarını bildiğinizde saniyeler içinde devasa iskeletler oluşturmanızı sağlar. Kod yazarken otomatik tamamlama menüsü kaybolursa panik yapmayın; imleç (cursor) konumuna dikkat edin. En son karakteri silip yeniden yazdığınızda Emmet öneri penceresi tekrar açılır. Gruplandırma için parantezler (), özel metinler için süslü parantezler {} ve artan numaralandırma için dolar ($) sembolünden yararlanabilirsiniz.
En sık karşılaşılan problem Emmet menüsünün hiç tetiklenmemesidir. Böyle bir durumda editörün sağ alt köşesindeki dil moduna bakın; dosyanız .html uzantılı değilse veya mod "Plain Text" olarak kalmışsa VS Code dili tanıyamaz ve kısaltmaları genişletmez. O alanı HTML olarak seçtiğinizde sistem tıkır tıkır işlemeye başlar. Emmet bir kas hafızası meselesidir; Cheat Sheet üzerinden kuralları tekrar edip bol bol pratik yaparak elinizi alıştırmanızı tavsiye ediyorum.
📌 Hatırlanması Gereken Temel Noktalar (Takeaways)
- Hiyerarşi ve Navigasyon: Kardeş elementler için
+, iç elementler için >, bir üst hiyerarşik seviyeye çıkmak için ^ sembolü kullanılır.
- Seçiciler ve Çoğaltma: Elementlere sınıf eklemek için
., ID atamak için #, belirtilen sayıda çoğaltmak içinse * operatöründen faydalanılır.
- İçerik ve Değişkenler: Anlamsız taslak metinler için
lorem (veya lorem5), sabit metinler için {metin} ve artan sayaçlar için $ işareti kullanılır.
- İmleç ve Öneri Tetikleme: Tamamlama penceresi kaybolduğunda imlecin en sonda olduğundan emin olunmalı, son karakter silinip tekrar yazılarak Emmet yeniden tetiklenmelidir.
- Editör Dil Modu Denetimi: Emmet kısaltmaları genişlemiyorsa VS Code sağ alt köşesindeki dil ayarının "Plain Text" yerine "HTML" olduğundan emin olunmalıdır.
📚 Ek Kaynaklar ve Derinlemesine Okuma Önerileri (Ek Bilgi)