🔖 Emmet শর্টকাটস (Emmet Shortcuts for HTML)

ওয়েব ডেভেলপমেন্টে দ্রুত কোড লেখার জন্য Emmet একটি জাদুকরী টুল। VS Code-এ এটি বিল্ট-ইন থাকে। আসুন কিছু প্রয়োজনীয় শর্টকাট শিখে নিই।

📌 HTML শর্টকাটস

১. চাইল্ড এলিমেন্ট তৈরি করা (>)
ol>li লিখলে ol এর ভেতরে li তৈরি হবে।

<ol>
    <li></li>
</ol>

২. মাল্টিপ্লিকেশন বা সংখ্যা গুণন (*)
p*5 লিখলে ৫টি p ট্যাগ তৈরি হবে।

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

৩. সিবলিং বা সমান্তরাল এলিমেন্ট তৈরি (+)
div+p লিখলে একই লেভেলে একটি div এবং একটি p তৈরি হবে।

<div></div>
<p></p>

৪. কম্বিনেশন (Combination)
div+p>span লিখলে:

<div></div>
<p><span></span></p>

৫. আইডি (#) এবং ক্লাস (.) সেট করা

• p#news-section ➔ <p id="news-section"></p>
• p.news-text ➔ <p class="news-text"></p>

৬. কনটেন্ট যোগ করা ({})
p{Hello World} লিখলে:

<p>Hello World</p>

৭. অ্যাট্রিবিউট যোগ করা ([])
button[type="submit"] ➔ <button type="submit"></button>

৮. ডামি টেক্সট তৈরি করা (Lorem Ipsum)
lorem20 লিখে ট্যাব চাপলে ২০টি শব্দের একটি ডামি টেক্সট তৈরি হবে।

৯. Enumeration ($)
ul>li*3{Item $} লিখলে:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

📌 CSS শর্টকাটস

CSS-এর জন্যও দারুণ কিছু শর্টকাট আছে:

m10    /* margin: 10px; */
p-10   /* padding: -10px; */
m20p   /* margin: 20%; */
w100p  /* width: 100%; */
bgc#ff /* background-color: #fff; */
df     /* display: flex; */
tac    /* text-align: center; */

📌 VS Code মাল্টি-কার্সর