වෙබ් පිටු නිර්මාණය කරනකොට, ඔබේ අන්තර්ගතය කොහෙද, කොපමණ ඉඩක් අවශ්යද කියලා තේරුම් ගන්නා වගේම, එය පරිශීලකයාට හොඳින් දර්ශනය වීමට අවශ්ය සැලසුම් කරගන්නා ක්රමයක් CSS බොක්ස් මොඩලයයි. මේ මොඩලය සරල වශයෙන් කියන්නෙ, HTML අංගයක් වටා ගැලපෙන නාලිකා (box) එකක්, එය හතරක කොටස් වලින් ගොඩනැගේ.
Content – ඔබේ පාඨය, පින්තූරය හෝ වෙනත් අන්තර්ගතය ඇතුළත් වන්නේ මේ කොටසේ. Padding – අන්තර්ගතය අවට පාරදාරයක් (space) සපයන, පාරදාරය පාරදාරයක් නොවන (transparent) ස්ථානයක්. Border – Padding සහ Content එක වටා දිගුවක් (line) ලෙස දර්ශනය වන, රේඛා සහිත කොටස. Margin – බෝර්ඩර් පිටුපස ඇති, අන් බොක්ස් වලින් වෙන් කරන පාරදාරයක්, මෙත් පාරදාරය පාරදාරයක් නොවන.
CSS කේතයක් තුළ මෙම කොටස් සකස් කිරීම ඉතා පහසුය. උදාහරණයක් ලෙස, div{ width:400px; border:12px solid green; padding:50px; margin:20px; } යන ලිපිනයක් භාවිතා කරන්නේ නම්, 400px පළලක්, 12px හරිත බෝර්ඩර්, 50px Padding, 20px Margin යන විශේෂත්වයන් සමඟ බොක්ස් එකක් නිර්මාණය වේ. මෙයින් ඔබේ වෙබ් අඩවියේ අන්තර්ගතය සැලසුම් කිරීමේ නිවැරදි පාලනයක් ලැබේ.
ඇයි මේක වැදගත්? බොක්ස් මොඩලය හරහා, වෙබ් පිටුවේ අංගයන් අතර අන්තර්ක්රියා, පරිමාණය, පෝසිෂන් කිරීම සහ ප්රතිචාරශීලී (responsive) සැලසුම් සැකසීම සරලව සිදු වේ. නිවැරදි Padding සහ Margin සකස් කිරීම මගින්, පරිශීලකයන්ට සුවිශේෂී පළපුරුද්දක් ලබා දීමට, අඩවි අලංකාරය වැඩිදියුණු කිරීමට, සහ බ්රවුසරයේ විවිධ උපාංගවලට (mobile, tablet, desktop) අනුකූලව සැලසුම් කිරීමේ හැකියාව ලැබේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
- සිසුන්ට CSS මූලිකතා ඉගෙන ගැනීමට ප්රායෝගික උදාහරණයක්.
- දෙවන පාර්ශ්වික සංවර්ධකයන්ට වේගවත් UI සැලසුම් සකස් කරගැනීමට උපකාරී.
- ව්යාපාරික වෙබ් අඩවි වල පාරදාරය සහ පරිශීලක අත්දැකීම (UX) වැඩිදියුණු කර, ගනුදෙනු වැඩි කිරීමේ හැකියාව.
- ලෝක ප්රවණතා සමඟ සමානව, ශ්රී ලංකාවේ තාක්ෂණික ප්රජාවට ගෝලීය මට්ටමේ තරඟකාරිත්වයක් ලබා දීම.
අවසන් වශයෙන්, CSS බොක්ස් මොඩලය වඩාත් පරිනත වෙබ් අඩවි නිර්මාණය සඳහා මූලික මාර්ගෝපදේශයක් වන අතර, එය නිසි ලෙස භාවිතා කිරීමෙන් ඔබේ අන්තර්ජාල පැතිකඩ වඩාත් පලමු තලයට ගෙනයා හැකිය.
