Tutorial Lengkap Memahami CSS Display

Transkripsi

1

2 Tutorial Lengkap Memahami CSS Display Oleh: Christian Rosandhy Dalam dunia CSS, property Display adalah salah satu property terpenting yang menentukan hasil akhir sebuah website. Kali ini kita akan banyak mencoba jenis-jenis property Display yang sering digunakan secara umum, juga mengerti keunikan dan manfaatnya masing-masing. Yuk disimak.. :) Salam sobat jagocoding,, Kembali saya ingin membagikan tutorial untuk kita semua.. Kalau dulu saya pernah share Tutorial Lengkap Memahami CSS Position, kali ini saya mau kembali share salah satu tutorial yang akan membantu kita memahami sintaks CSS Display. Sintaks Display sendiri sebenarnya nilainya lebih banyak lagi dari position.. Ada inline, block, inline-block, none, table, table-cell, table-row, flex, dan sebagainya. Saya sendiri juga nggak pake semuanya,, yang paling sering saya pakai itu cuma display inline, block, inline-block, none, sama flex.. Jadi kali ini saya bagikan semua yang saya tahu ya.. Yuk disiapkan dulu sebuah file HTML untuk sarang percobaan kita.. :D DISPLAY : INLINE; Kata kunci untuk display:inline ini adalah, mengalir ke samping. Semua layer yang diberikan display:inline ini akan terus mengalir ke samping. Perhatikan ini : <span class="inline">ini adalah layer dengan display:inline. </span> <span class="inline">ini adalah layer dengan display:inline. </span> <span class="inline">ini adalah layer dengan display:inline. </span>.inline{display:inline;}

3 Seperti yang kita lihat,, layer dengan display inline berturut-turut akan membuat layer tersebut mengalir ke samping. Akan sangat berbeda dengan display-display yang lainnya. Keunikan display:inline lagi adalah, tidak bisa diberikan margin top dan bottom, tidak bisa diberikan width/height, dan padding overlapping. Untuk melihatnya, kita coba berikan teks sembarangan sebelum dan setelah layer inline tadi, kemudian berikan background, margin dan padding sebesar 20px; di layer.inline. <span class="inline">ini adalah layer dengan display:inline. </span> <span class="inline">ini adalah layer dengan display:inline. </span> <span class="inline">ini adalah layer dengan display:inline. </span>.inline{ display:inline; background:#cf0; margin:20px; padding:20px; width:50px; /*percuma.. dihapus juga ga apa-apa*/ height:500px; /*percuma.. dihapus juga ga apa-apa*/

4 } Hasilnya nanti akan seperti ini : Kesimpulannya,, dengan sifat display:inline seperti ini, berarti display:inline tidak cocok digunakan sebagai container karena tidak mengeksekusi margin dan padding dengan baik, dan tidak bisa diatur lebar dan tingginya,, melainkan hanya untuk menampung teks / gambar statis saja. DISPLAY : BLOCK; Kata kunci untuk display:block; ini adalah kotak, mengalir ke bawah, KEBALIKANNYA DISPLAY:INLINE. Kalau display:inline tadi mengalir ke samping, display:block dalam jumlah banyak akan terus mengalir ke bawah. Kalau di display:inline width dan height tidak bisa digunakan, disini bisa digunakan, Untuk lebih jelasnya, kita lanjutkan HTML kita sekarang,, Kita lanjutkan dengan tag <br> dulu biar rapi,, setelah itu kita bikin 3 layer dengan class block. sama seperti layer inline tadi, kita berikan background, margin, dan padding. <br> <br> <div class="block">ini adalah layer dengan display:block;</div> <div class="block">ini adalah layer dengan display:block;</div> <div class="block">ini adalah layer dengan display:block;</div>.block{ display:block; background:#0fc; margin:20px; padding:20px;

5 } Hasilnya sangat berbeda bukan dengan display:inline tadi? Secara default, display block yang tidak diberikan atribut width akan mengambil lebar yang langsung memenuhi layar. Dan kalau diberikan atribut width, layer tersebut tidak akan memenuhi layar ke samping, tapi mengosongkan ruang sisanya. Coba kita tambahkan width:300px; di layer.block...block{ } display:block; background:#0fc; margin:20px; padding:20px; width:300px;

6 Nah, itulah salah satu sifat layer dengan display:block; Tidak seperti inline, display:block; umumnya dipakai sebagai container / layer yang menampung layer lain karena kemampuan pengaturan lebar dan tinggi yang baik ini. DISPLAY : INLINE-BLOCK; Kata kunci untuk display:inline-block; adalah kotak, mengalir ke samping. Dengan kata lain, display:inline-block ini adalah gabungan dari display:inline dan display:block; Maksudnya berkata kunci kotak,, display:inline-block ini bisa diatur margin, padding, width, dan heightnya dengan baik seperti display:block,, akan tetapi alurnya tetap ke samping seperti display:inline; Untuk lebih memahaminya, kita copy paste saja baris HTML kita mulai dari teks sembarang sampai layer inline tadi, kita paste di baris paling bawah, dan ganti classnya jadi inlineblock.... <br> <br> <span class="inlineblock">ini adalah layer dengan display:inline. </span> <span class="inlineblock">ini adalah layer dengan display:inline. </span> <span class="inlineblock">ini adalah layer dengan display:inline. </span>

7 CSSnya juga nggak beda jauh dengan punya.inline tadi,, tinggal kita ganti aja dari display:inline jadi inline-block;.inlineblock{ display:inline-block; background:#cf0; margin:20px; padding:20px; } Dan ini nih hasilnya~ Nah,, seperti yang kita lihat,, display:inline-block ini memang tetap mengalir ke samping seperti sifatnya inline,, tapi dia masih bisa diberi lebar, tinggi, margin, dan padding dengan baik seperti sifatnya block. Aplikasinya, display:inline-block ini cocok digunakan pada menu / navigasi. Bisa sih menggunakan display:block juga (plus float tentunya), tapi dengan sifatnya ini, display:inline-block ini memungkinkan kita membuat navigasi ke samping yang cukup rapi.

8 DISPLAY : NONE; Display yang satu ini nggak perlu screenshot untuk menjelaskannya.. :p Kata kuncinya lebih simpel lagi,, hilang diculik. Display:none ini sangat berguna lho.. Biasanya digunakan untuk menyembunyikan elemen tertentu, lalu nanti dimunculkan kembali ketika kursor mengarah ke suatu layer, bisa juga dipakai untuk benar-benar menyembunyikan elemen supaya tidak terlihat. Sebagai catatan, display:none; ini cukup sering disamakan dengan visibility:hidden,, padahal 2 sintaks ini cukup berbeda.. display:none membuat layer benar-benar tersembunyi karena diculik. Dengan kata lain, layer yang disembunyiin ini nggak makan tempat sama sekali. Sedangkan kalau visibility:hidden ini membuat layer jadi benar-benar nggak keliatan karena transparan, sehingga masih makan tempat.. DISPLAY : FLEX; (CSS 3) Display yang satu ini masih cukup baru nih.. Jadi maap aja ya, yang browser jadul nggak bisa menikmati dahsyatnya display flex ini.. Display flex ini adalah display khusus yang bersifat sebagai container (kayak display block) yang bisa meletakkan layer-layer didalamnya dengan rapi sesuai keinginan kita. Sayang sekali karena display:flex ini sangat luas, saya nggak bisa share yang terlalu dalam.. Kapan-kapan kalo saya udah jago pake display:flex ini saya share deh.. :D Display:flex ini sengaja dihadirkan karena display:block masih belum cukup untuk menjawab kebutuhan desain web yang rapi. Misalnya, kita ingin membuat sebuah gallery yang menampung 5 gambar ke samping didalam sebuah layer container. Bisa sih pake display block,, tapi kita harus ngukur dulu lebar containernya berapa, terus dibagi jumlah gambar, terus dikurangi padding, dikurangi margin.. Kalau hasil akhirnya genap sih asik-asik aja.. Kalo koma-komaan? Nah.. Display flex ini hadir menjawab kebutuhan itu, karena fungsi perhitungan rapi-rapian jadi urusannya sekarang.. :D Masih lanjut di HTML kita,,... <br> <br> <div class="flex"> <div class="isi"></div> <div class="isi"></div> <div class="isi"></div> </div>.flex{ display:flex; /*jangan lupa,, karena ini CSS3 kasi prefix~*/ display:-moz-flex; display:-o-flex;

9 } display:-webkit-flex; background:#cf7; padding:10px; Hasilnya seperti ini nih: "Hmm,, sekilas keliatannya sifatnya sama aja kayak display:block ya?" Betul sekalii.. display:flex ini punya sifat yang sama kayak display block di luarnya.. Tapi, layer-layer yang ada didalamnya (.isi) ini yang akan tampil berbeda.. Untuk melihatnya, kita buatkan CSSnya layer.isi tersebut terserah kayak gimana, asalkan lebar dan tingginya jelas..isi{ } width:150px; height:150px; background:rgba(0,0,0,.25); /*background hitam transparan*/ margin:10px; Dan hasilnya nanti akan seperti ini,,

10 "Not bad,, kayak display:inline-block aja ya, kotak-kotak gitu tapi ngalir ke samping? " Betul juga,, display flex menjadi sama aja kayak sintaks biasa kalau nggak dikasi perintah tambahan. Perintah tambahan yang digunakan berbarengan dengan flex sebenarnya ada sangat banyak.. Tapi kali ini saya share yang paling penting aja namanya justify-content. Peletakan perintah tambahannya selalu di layer flex utama, bukan di layer isinya..flex{... /*PILIH SALAH SATU, isi di bawah ini, dan lihat hasilnya : flex-start, flex-end, center, space-between, space-around*/ justify-content: ; } Justify-content berfungsi mengatur jarak spasi antar layer isi. secara default, nilai justify-content itu adalah flex-start (seperti contoh di atas). Nilainya bisa diisi flex-end untuk membuat mepet ke kanan, center untuk membuat layer tepat di tengah-tengah, space-around untuk membuat jarak yang sama antar layer isi, dan space-between untuk membuat ujung kiri dan kanan mepet ke sisi, dan sisa margin dibagi rata. Karena yang flex-end dan center gampang untuk dibayangin, Ane sediain 2 screenshot contoh jika kita berikan perintah justify-content Space-Around :

11 Space-Between :

12 Sintaks pelengkap flex akan dijelaskan lagi di tutorial yang selanjutnya.. soalnya banyak bangeeet~ :D KESIMPULAN Nah,, jadi kita sudah belajar mengenal properti display dan kegunaannya masing-masing.. display:inline yang terus mengalir kesamping, dan diaplikasikan untuk teks. display:block yang mengkotak, display serbaguna yang mengalir kebawah.. display:inline-block yang kayak display block yang kotak, tapi kayak inline juga yang mengalir ke samping.. display:none yang jago nyembunyiin layer tanpa sisa satu apapun, dan display:flex yang dahsyat mengatur layer isinya serapi mungkin. Semoga tutorial ini berguna buat kita semua, dan membantu kita semakin mengerti dan bisa menggunakan property display dengan baik. :)

13 Tentang Penulis Christian Rosandhy