<div> একটি জেনেরিক কন্টেইনার যা HTML এ উপাদানগুলিকে একত্রে গোষ্ঠীবদ্ধ করতে ব্যবহৃত হয় যাতে CSS ব্যবহার করে তাদের উপর স্টাইল প্রয়োগ করা যায়; div উপাদানগুলি ডিফল্টরূপে খালি থাকে এবং কাজ করার জন্য এইচটিএমএল উপাদান দিয়ে পূর্ণ করতে হয়। <div> ট্যাগ জোড়ায় আসে, একটি খোলা ট্যাগ এবং একটি বন্ধ ট্যাগ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.first {
width: 500px;
border: 1px solid black;
padding: 20px
}
.square {
width: 100%;
height: 250px;
color: white;
border: none;
}
.blue {
background-color: royalblue;
border: none;
}
.purple {
background-color: purple;
border: none;
}
</style>
</head>
<body>
<div class="first">
<h4>I'm a div that is holding two smaller divs.</h4>
<div class="square blue">1</div>
<div class="square purple">2</div>
</div>
</body>
</html>
<div> সম্পর্কে লক্ষ্য করার সবচেয়ে বড় বিষয় ট্যাগ হল যে এটি না একটি শব্দার্থিক HTML উপাদান। এর মানে <div> কি তা স্পষ্টভাবে স্পষ্ট নয় ট্যাগ দেখে তা করে ( <ক্যাপশন>, <ঠিকানা>, <বিভাগ> ইত্যাদির বিপরীতে)
যদি খুব বেশি ব্যবহার করা হয় তবে এটি অ্যাক্সেসযোগ্যতার সমস্যাগুলির দিকে নিয়ে যেতে পারে যেখানে স্ক্রিন রিডাররা উদ্বিগ্ন। <div> ব্যবহার করতে ভুলবেন না শেষ অবলম্বন হিসাবে ট্যাগ করুন যখন একটি শব্দার্থিক HTML উপাদান নেই যা সম্ভবত একটি ভাল পছন্দ হতে পারে।
<div> ধারক একটি ব্লক-স্তরের উপাদান। CSS বা ইনলাইন-স্টাইলিং ব্যবহার করে বিকাশকারী দ্বারা নিয়ন্ত্রিত না হওয়া পর্যন্ত এটি ভিউপোর্টের সম্পূর্ণ প্রস্থকে গ্রহণ করবে। উপরন্তু, এর আগে এবং পরে একটি লাইন বিরতি আছে যদি না ডিসপ্লে প্রপার্টি কোনো প্রকার ইনলাইন মান বা ফ্লেক্সে পরিবর্তন করা হয়।
বিন্যাসের ক্ষেত্রে, ডিভগুলি মোটামুটি নমনীয়। তারা একে অপরের ভিতরে বাসা হতে পারে। বলা হচ্ছে, <div> কন্টেইনারগুলি অনুচ্ছেদগুলি ভেঙে ফেলবে - তাই একটি <div> নেস্ট করবেন না একটি <p> ভিতরে ট্যাগ করুন ট্যাগ উপরন্তু, আপনি যখন <div> ঢোকান তখন অদ্ভুত অসঙ্গতি আছে হেডলাইন ট্যাগের ভিতরে কন্টেইনার (
, , ইত্যাদি) যেমন মনে হয় <h1> জয়ী হয় এবং <div> উপেক্ষা করা হয়।
গুণাবলী
<h1> জয়ী হয় এবং <div> উপেক্ষা করা হয়। গুণাবলী
HTML <div> উপাদানগুলির HTML এর ইভেন্ট এবং বিশ্বব্যাপী বৈশিষ্ট্যগুলিতে অ্যাক্সেস রয়েছে। ইভেন্ট অ্যাট্রিবিউটগুলি হল সেইগুলি যেগুলি ব্যবহার করা হয় যখন কোনও ব্যবহারকারী কোনও উপায়ে আপনার ওয়েব পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে – উদাহরণস্বরূপ, একটি অনক্লিক, যখন কোনও ব্যবহারকারী কোনও চিত্রে ক্লিক করে, বা একটি অন-মাউসওভার, যখন কোনও ব্যবহারকারী তাদের মাউসকে কোনও উপাদানের উপর গাইড করে। গ্লোবাল অ্যাট্রিবিউট হল সেই অ্যাট্রিবিউটগুলি যা সমস্ত HTML উপাদানের জন্য উপলব্ধ।
এই HTML বৈশিষ্ট্যগুলির একটি সম্পূর্ণ তালিকা মোজিলা ডেভেলপার নেটওয়ার্ক ওয়েবসাইটে পাওয়া যাবে৷
কিভাবে স্টাইল করবেন
একটি <div> স্টাইল করা মোটামুটি সোজা এবং একাধিক উপায়ে করা যেতে পারে। ইনলাইন স্টাইলিং <div>-এ একটি স্টাইল অ্যাট্রিবিউট যোগ করে করা যেতে পারে একটি স্ট্রিং হিসাবে শৈলী বৈশিষ্ট্য এবং মান যুক্ত করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Styling</title>
<body>
<div style="width:500px;border: 3px solid black; padding: 20px;">
<h4>I'm a div that is holding two smaller divs.</h4>
<div style="background-color: royalblue; border: none;">1</div>
<div style="background-color: purple; border: none;">2</div>
</div>
</body>
</html>
<style>-এও স্টাইলিং করা যেতে পারে <head>-এ ট্যাগ করুন HTML নথির বা একটি বহিরাগত স্টাইলশীটে। এখানেই <div> ক্লাস বা আইডি অ্যাট্রিবিউট খেলতে আসবে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
ক্লাসগুলি একাধিক উপাদানে ব্যবহার করা যেতে পারে যা আপনি একইভাবে স্টাইল করতে চান। একটি আইডি শুধুমাত্র একবার একটি HTML নথিতে ব্যবহার করা যেতে পারে। এটিকে এভাবে ভাবুন:আপনি একই গ্রেডে একই বয়স, শিক্ষক এবং বিষয় সহ একাধিক শিক্ষার্থীকে একসাথে গোষ্ঠীবদ্ধ করতে পারেন, তবে প্রতিটি শিক্ষার্থীর নিজস্ব ব্যক্তিগত আইডি বৈশিষ্ট্য রয়েছে যা বর্ণনা করে যে তারা একজন মানুষ হিসাবে কে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.first {
width: 500px;
border: 3px solid black;
padding: 20px
}
.square {
width: 100%;
height: 250px;
color: white;
border: none;
}
#blue {
background-color: royalblue;
border: none;
}
#purple {
background-color: purple;
border: none;
}
</style>
</head>
<body>
<div class="first">
<h4>I'm a div that is holding two smaller divs.</h4>
<div id="blue" class="square">1</div>
<div id="purple" class="square">2</div>
</div>
</body>
</html>
ক্লাস অ্যাট্রিবিউট এবং আইডি অ্যাট্রিবিউট একই সময়ে একটি <div> ব্যবহার করা যেতে পারে . আইডিটিকে ক্লাস অ্যাট্রিবিউটের চেয়ে বেশি নির্দিষ্ট হিসাবে বিবেচনা করা হয়, তাই সেই নির্দিষ্ট <div>-এর জন্য নির্দিষ্ট যে কোনও স্টাইলিং একটি আইডি অ্যাট্রিবিউট ব্যবহার করতে পারে তাই এটি যেকোনো ক্লাস স্টাইলিংকে ওভাররাইড করে।
উপসংহার
আজ আমরা শিখেছি একটি <div> কি হল, এর বৈশিষ্ট্যগুলি কী এবং উপাদানটি কীভাবে স্টাইল করা হয়। ডিসপ্লে প্রপার্টি কীভাবে <div> কে প্রভাবিত করে সে সম্পর্কে আরও তথ্যের জন্য পাত্রে, বক্স মডেল এবং ফ্লেক্সবক্স মডেলের উপর CareerKarma এর নিবন্ধগুলি দেখুন।
