{"id":48592,"date":"2024-07-26T08:56:00","date_gmt":"2024-07-26T01:56:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=48592"},"modified":"2024-08-22T16:34:31","modified_gmt":"2024-08-22T09:34:31","slug":"belajar-css-bagian-8","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-8\/","title":{"rendered":"Belajar CSS Bagian 8: Mengatur Ukuran Elemen Dengan CSS"},"content":{"rendered":"\n<p>Setelah sebelumnya kita belajar cara <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-7\/\" target=\"_blank\" rel=\"noopener\" title=\"\">mengatur text <\/a><em><a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-7\/\" target=\"_blank\" rel=\"noopener\" title=\"belajar css bagian 7\">formatting<\/a> <\/em>dengan CSS, dalam lanjutan series belajar CSS bagian 8 ini, kami akan membahas mengenai cara mengatur ukuran elemen dengan CSS.<\/p>\n\n\n\n\n\n<p>Dalam pembahasan sebelumnya, kita sudah sering menentukan ukuran properti untuk setiap elemen yang digunakan. Pada series belajar CSS bagian 8 ini, kami akan lebih detail membahas tentang penggunaan satuan ukuran, yang memungkinkan pengembang web dapat menentukan dimensi dan proporsi elemen pada halaman web dengan presisi dan fleksibilitas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Satuan Ukuran dalam CSS<\/h2>\n\n\n\n<p>Penggunaan satuan ukuran yang tepat adalah kunci dalam menciptakan pengalaman pengguna yang optimal. Dengan memahami perbedaan dan aplikasi praktis dari berbagai satuan ukuran ini, pengembang web dapat memastikan bahwa situs mereka tidak hanya terlihat baik tetapi juga berfungsi dengan baik di berbagai perangkat dan ukuran layar.<\/p>\n\n\n\n<p>Menentukan ukuran elemen sangat penting dalam melakukan styling pada tampilan website yaitu ketika diakses menggunakan perangkat dengan layar lebar (desktop \/ pc \/ laptop), layar sedang (tablet), dan layar kecil (mobile) hal ini sering disebut dengan responsive.<\/p>\n\n\n\n<p>Dalam mengatur ukuran dengan CSS, terdapat berbagai macam satuan ukuran yang dapat digunakan untuk mengatur ukuran elemen. Satuan-satuan ini secara umum dapat dibagi menjadi dua kategori yaitu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Satuan absolut<\/li>\n\n\n\n<li>Satuan relatif.<\/li>\n<\/ul>\n\n\n\n<p>Mari kita bahas secara singkat penjelasan mengenai masing-masing satuan tersebut:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Satuan Absolut<\/h2>\n\n\n\n<p>Satuan absolut adalah satuan yang memiliki nilai tetap dan tidak berubah relatif terhadap nilai lain. Beberapa satuan absolut yang umum digunakan adalah:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mengatur Ukuran dengan piksel (px)<\/h3>\n\n\n\n<p>Mengatur menggunakan ukuran px (pixel) adalah satuan paling umum digunakan untuk ukuran elemen yang tetap. Satuan piksel sering digunakan dalam menentukan ukuran di setiap elemen tertentu.<\/p>\n\n\n\n<p>Contoh kode css:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kotak-px {\n    width: 400px;\n    height: 200px;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mengatur Ukuran dengan cm, mm, dan inch<\/h3>\n\n\n\n<p>Mengatur menggunakan ukuran cm (centimeter), mm (milimeter), dan in (inch) adalah satuan panjang berdasarkan ukuran fisik.<\/p>\n\n\n\n<p>Contoh kode css:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kotak-cm {\n    width: 6cm;\n    height: 4cm;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mengatur Ukuran point (pt)<\/h3>\n\n\n\n<p>Mengatur menggunakan ukuran pt (point) adalah satuan umum dalam dunia percetakan, setara dengan 1\/72 inci.<\/p>\n\n\n\n<p>Contoh kode css:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.teks-pt {\n    font-size: 12pt;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mengatur Ukuran pica (pc)<\/h3>\n\n\n\n<p>Mengatur menggunakan ukuran pc (pica) adalah satuan umum dalam dunia percetakan, setara dengan 12 point.<\/p>\n\n\n\n<p>Contoh kode css:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.teks-pc {\n    font-size: 12pc;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Satuan relatif<\/h2>\n\n\n\n<p>Selanjutnya tentang satuan ukuran pada series belajar CSS bagian ke 8 adalah satuan relatif. Satuan relatif adalah satuan yang bergantung pada ukuran elemen lain atau ukuran viewport. <\/p>\n\n\n\n<p>Viewport adalah area tampilan web yang terlihat oleh user. Ukuran viewport berbeda beda tergantung perangkat yang digunakan untuk menampilkan halaman web apakah menggunakan perangkat layar lebar (desktop). laptop, tablet, atau mobile<\/p>\n\n\n\n<p>Beberapa satuan relatif yang umum digunakan adalah:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mengatur Ukuran dengan % (persentase)<\/h3>\n\n\n\n<p>Mengatur menggunakan ukuran % (persentase) adalah ukuran yang mengacu pada ukuran elemen induk.<\/p>\n\n\n\n<p>Contoh kode css:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kotak-persen {\n    width: 50%;\n    height: 50%;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mengatur Ukuran dengan em&nbsp;<\/h3>\n\n\n\n<p>Mengatur menggunakan ukuran em adalah ukuran font elemen induk. 1em sama dengan ukuran font elemen induk.<\/p>\n\n\n\n<p>Contoh kode css:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.teks-em {\n    font-size: 2em; \/* 2 kali ukuran font elemen induk *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mengatur Ukuran dengan rem<\/h3>\n\n\n\n<p>Mengatur menggunakan ukuran rem adalah ukuran font elemen root (html).<\/p>\n\n\n\n<p>Contoh kode css:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.teks-rem {\n    font-size: 1.5rem; \/* 1.5 kali ukuran font elemen root *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mengatur Ukuran dengan vw dan vh<\/h3>\n\n\n\n<p>Mengatur menggunakan ukuran vw (viewport width) adalah ukuran pada 1% dari lebar viewport.<\/p>\n\n\n\n<p>Contoh kode css:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kotak-vw {\n    width: 50vw; \/* 50% dari lebar viewport *\/\n}<\/code><\/pre>\n\n\n\n<p>Mengatur menggunakan ukuran vh (viewport height) adalah ukuran 1% dari tinggi viewport.<\/p>\n\n\n\n<p>Contoh kode css:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kotak-vh {\n    height: 50vh; \/* 50% dari tinggi viewport *\/\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mengatur Ukuran dengan vmin dan vmax<\/h3>\n\n\n\n<p>Mengatur menggunakan ukuran vmin adalah ukuran pada 1% dari nilai terkecil antara lebar dan tinggi viewport.<\/p>\n\n\n\n<p>Contoh kode css:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kotak-vmin {\n    width: 50vmin; \/* 50% dari nilai terkecil antara lebar dan tinggi viewport *\/\n}<\/code><\/pre>\n\n\n\n<p>Mengatur menggunakan ukuran vmax adalah ukuran pada 1% dari nilai terbesar antara lebar dan tinggi viewport.<\/p>\n\n\n\n<p>Contoh kode css:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.kotak-vmax {\n    width: 50vmax; \/* 50% dari nilai terbesar antara lebar dan tinggi viewport *\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Penerapan mengatur ukuran elemen<\/h2>\n\n\n\n<p>Berikut adalah salah satu contoh kode lengkap yang dapat Anda gunakan untuk mengatur ukuran elemen dengan css :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Contoh satuan ukuran CSS&lt;\/title&gt;\n    &lt;style&gt;\n    \/*satuan relatif*\/\n    .kotak-px {\n        width: 200px;\n        height: 50px;\n        background: yellow;\n    }\n\n    .kotak-cm {\n        width: 4cm;\n        height: 2cm;\n        background: aqua;\n    }\n    .teks-pt {\n        font-size: 12pt;\n    }\n    .teks-pc {\n        font-size: 2pc;\n    }\n    \n    \/*satuan absolut*\/\n    .kotak-persen {\n        width: 50%;\n        height: 50%;\n        background: chartreuse;\n    }\n    .teks-em {\n        font-size: 2em; \/* 2 kali ukuran font elemen induk *\/\n    }\n    .teks-rem {\n        font-size: 1.5rem; \/* 1.5 kali ukuran font elemen root *\/\n    }\n    .kotak-vw {\n        width: 50vw; \/* 50% dari lebar viewport *\/\n        background: cyan;\n    }\n    .kotak-vh {\n        height: 50vh; \/* 50% dari tinggi viewport *\/\n        background: khaki;\n    }\n    .kotak-vmin {\n        width: 50vmin; \/* 50% dari nilai terkecil antara lebar dan tinggi viewport *\/\n        background: yellow;\n    }\n    .kotak-vmax {\n        width: 50vmax; \/* 50% dari nilai terbesar antara lebar dan tinggi viewport *\/\n        background: hotpink;\n    }\n\n    &lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;h3&gt;Satuan absolut adalah yang memiliki nilai tetap dan tidak berubah&lt;\/h3&gt;\n    &lt;div class=\"kotak-px\"&gt;\n        Kotak menggunakan ukuran 400 x 200 piksel (px)\n    &lt;\/div&gt;\n    &lt;div class=\"kotak-cm\"&gt;\n        Kotak menggunakan ukuran 6 x 4 cm (centimeter)\n    &lt;\/div&gt;\n    &lt;div class=\"teks-pt\"&gt;\n        Teks menggunakan ukuran 12 point (pt)\n    &lt;\/div&gt;\n    &lt;div class=\"teks-pc\"&gt;\n        Teks menggunakan ukuran 4 pica (pc)\n    &lt;\/div&gt;  \n    \n    &lt;h3&gt;Satuan relatif yang bergantung pada ukuran elemen lain&lt;\/h3&gt;\n    &lt;div class=\"kotak-persen\"&gt;\n        Kotak menggunakan ukuran 50 x 50 persen (%)\n    &lt;\/div&gt;\n    &lt;div class=\"teks-em\"&gt;\n        Teks menggunakan ukuran 2em\n    &lt;\/div&gt;\n    &lt;div class=\"teks-rem\"&gt;\n        Teks menggunakan ukuran 1.5rem\n    &lt;\/div&gt;  \n    &lt;div class=\"kotak-vw\"&gt;\n        Kotak menggunakan ukuran 50vw\n    &lt;\/div&gt;\n    &lt;div class=\"kotak-vh\"&gt;\n        Kotak menggunakan ukuran 50vh\n    &lt;\/div&gt;    \n    &lt;div class=\"kotak-vmin\"&gt;\n        Kotak menggunakan ukuran 50vmin\n    &lt;\/div&gt;\n    &lt;div class=\"kotak-vmax\"&gt;\n        Kotak menggunakan ukuran 50vmax\n    &lt;\/div&gt;    \n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p>Ketika dicoba akses melalui browser tampilan layar lebar, tampilannya akan seperti screenshot berikut :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16-1024x543.png\" alt=\"tampilan layar lebar - series belajar css bagian 8\" class=\"wp-image-48594\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16-1024x543.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16-300x159.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16-768x407.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16-1536x815.png 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16-370x196.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16-270x143.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16-570x302.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16-740x393.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-16.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Ketika dicoba akses melalui browser tampilan layar kecil, tampilannya akan seperti screenshot berikut :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"544\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17-1024x544.png\" alt=\"tampilan layar kecil\" class=\"wp-image-48595\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17-1024x544.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17-300x159.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17-768x408.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17-1536x816.png 1536w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17-370x196.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17-270x143.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17-570x303.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17-740x393.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2024\/07\/image-17.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Dari screenshot diatas ada perbedaan dimana penggunaan ukuran absolut akan tetap sedangkan ukuran relatif mengikuti ukuran layar pengguna.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mengatur Ukuran Elemen dengan tepat<\/h2>\n\n\n\n<p>Mengatur ukuran yang tepat menggunakan satuan dengan css dapat membantu dalam menyesuaikan tata letak yang responsif dan fleksibel. <\/p>\n\n\n\n<p>Anda dapat menggunakan fitur Inspect element yang disediakan oleh browser yang digunakan. Anda dapat mempelajari penggunaan inspect element melalui link berikut :<a href=\"https:\/\/blog.rumahweb.com\/inspect-element-adalah\/\" target=\"_blank\" rel=\"noopener\" title=\"\"> <strong>Inspect Element: Manfaat dan Cara Menggunakannya<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>Menggunakan ukuran satuan css yang tepat tergantung pada kebutuhan dan tujuan desain website yang akan dibangun oleh developer pengembangan website.<\/p>\n\n\n\n<p>Ukuran satuan absolut memberikan ukuran yang presisi, sedangkan satuan relatif memberikan fleksibilitas yang lebih besar dan membantu dalam menyesuaikan tata letak yang responsif dan fleksibel di berbagai perangkat.<\/p>\n\n\n\n<p>Menggabungkan kedua jenis satuan css dapat mempermudah developer pengembangan website untuk menciptakan desain web yang konsisten, responsif, dan user-friendly.<\/p>\n\n\n\n<p class=\"has-gridlove-highlight-acc-background-color has-background\"><strong>BACA JUGA: <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-9\/\" title=\"\">Belajar CSS Bagian 9: CSS Media Query Beserta Contohnya<\/a><\/strong><\/p>\n\n\n\n<p>Demikian series belajar CSS bagian ke 8 tentang mengatur ukuran elemen di CSS. Simak terus artikel belajar CSS dari Rumahweb Indonesia, untuk meningkatkan skill dan pemahaman CSS yang Anda kuasai. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah sebelumnya kita belajar cara mengatur text formatting dengan CSS, dalam lanjutan series belajar CSS bagian 8 ini, kami akan membahas mengenai cara mengatur ukuran elemen dengan CSS. Dalam pembahasan sebelumnya, kita sudah sering menentukan ukuran properti untuk setiap elemen yang digunakan. Pada series belajar CSS bagian 8 ini, kami akan lebih detail membahas tentang [&hellip;]<\/p>\n","protected":false},"author":353,"featured_media":48761,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[1752,1751,2186],"class_list":{"0":"post-48592","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/48592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=48592"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/48592\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/48761"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=48592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=48592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=48592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}