HTML တွင် tag များအုပ်စုဖွဲ့ရန် div tag

အရင် သင်ခန်းစာမှာ စာသားအပိုင်းလေးကို ထင်ထင်ရှားရှားဖြစ်အောင် လုပ်ပေးတဲ့ span tag ကိုဖတ်ခဲ့ပြီးပါပြီ။ အလားတူပဲ div tag ဆိုတဲ့ အထူး tag တစ်ခုရှိပါတယ်။ ၎င်းက tag အမျိုးမျိုးကို အုပ်စုဖွဲ့ပေးပြီး တစ်ပြိုင်နက် ၎င်းတို့နဲ့ တစ်ခုခုလုပ်ဆောင်နိုင်ဖို့ ခွင့်ပြုပေးပါတယ်။

ဥပမာအနေနဲ့ div tag များကိုသုံးပြီး စာပိုဒ်များကို အုပ်စုဖွဲ့ကြည့်ရအောင်။

<div class="block1">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div class="block2">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

ပထမအုပ်စုမှာရှိတဲ့ အရာတွေကို အနီရောင်၊ ဒုတိယအုပ်စုမှာရှိတဲ့ အရာတွေကို အစိမ်းရောင် သတ်မှတ်ကြည့်ရအောင်။

.block1 {
	color: red;
}
.block2 {
	color: green;
}

အောက်ပါ code ကိုပေးထားပါတယ်။

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

ပထမ div ရဲ့အကြောင်းအရာကို အနီရောင်၊ ဒုတိယ div ရဲ့အကြောင်းအရာကို အစိမ်းရောင်၊ တတိယ div ရဲ့အကြောင်းအရာကို အပြာရောင် ဆေးခြယ်ပါ။ ဒါကိုလုပ်ဆောင်ဖို့ div တစ်ခုစီကို class တစ်ခုစီ သတ်မှတ်ပါ။

အောက်ပါ code ကိုပေးထားပါတယ်။

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

ပထမ နှင့် တတိယ div ရဲ့အကြောင်းအရာကို အနီရောင်၊ ဒုတိယ နှင့် စတုတ္ထ div ရဲ့အကြောင်းအရာကို အစိမ်းရောင် ဆေးခြယ်ပါ။ ဒါကိုလုပ်ဆောင်ဖို့ ပထမ နှင့် တတိယ div ကို class တစ်ခုတည်း ပေးပြီး ဒုတိယ နှင့် စတုတ္ထ div ကို နောက်ထပ် class တစ်ခု ပေးပါ။