CSS - Properti Display: Pintu Menuju Magi Visual!

Hai teman-teman, para ahli CSS masa depan! ? Saya sangat senang untuk memulai perjalanan ini bersama Anda saat kita telusuri dunia menarik properti display CSS. Sebagai seseorang yang telah mengajar CSS selama lebih dari satu dekade, saya bisa menjamin Anda bahwa menguasai properti ini adalah seperti membuka peti harta karun kemungkinan desain web. Jadi, mari kita masuk ke dalam!

Apa Itu Properti Display?

Sebelum kita masuk ke detil, mari kita mengerti apa sebenarnya display properti melakukan. Dalam kata-kata sederhana, itu mengendalikan bagaimana elemen ditampilkan di halaman web. Bayangkan itu seperti direktur sebuah drama, memberi tahu setiap aktor (elemen) bagaimana mereka harus berperilaku di panggung (halaman web Anda).

Nilai Yang Mungkin

Properti display adalah seperti pisau瑞士 Army - itu memiliki banyak alat (nilai) untuk situasi yang berbeda. Berikut adalah tabel nilai yang paling umum yang kita akan diskusikan:

Nilai	Deskripsi
inline	Menampilkan elemen sebagai elemen inline (seperti <span>)
block	Menampilkan elemen sebagai elemen blok (seperti <div>)
inline-block	Menampilkan elemen sebagai kontainer blok level inline
none	Elemen completely dihapus dari dokumen
flex	Menampilkan elemen sebagai kontainer fleks level blok
inline-flex	Menampilkan elemen sebagai kontainer fleks level inline
grid	Menampilkan elemen sebagai kontainer grid level blok
inline-grid	Menampilkan elemen sebagai kontainer grid level inline
table	Biarkan elemen berperilaku seperti <table> elemen
list-item	Biarkan elemen berperilaku seperti <li> elemen

Terapkan Pada

Properti display berlaku untuk semua elemen HTML. Ya, Anda mendengar benar - semua dari mereka! Dari <span> yang rendah hingga <div> yang kuat, setiap elemen dapat dipengaruhi oleh properti ini yang kuat.

Sintaks DOM

Ketika bekerja dengan JavaScript dan Document Object Model (DOM), Anda dapat mengubah properti display seperti ini:

element.style.display = "value";

Misalnya:

document.getElementById("myElement").style.display = "none";

Ini akan menyembunyikan elemen dengan ID "myElement". Magic, kan?

CSS display - inline Nilai

Mari kita mulai dengan nilai inline. Ini adalah nilai default untuk elemen seperti <span>, <a>, dan <img>.

<style>
.inline-element {
display: inline;
background-color: kuning;
padding: 5px;
}
</style>

<p>Ini adalah paragraf dengan <span class="inline-element">elemen inline</span> didalamnya.</p>

Dalam contoh ini, elemen <span> akan mengalir dengan teks, tidak dimulai di baris baru. Itu seperti kata dalam kalimat - itu tidak mengganggu aliran.

CSS display - block Nilai

Selanjutnya adalah nilai block. Ini adalah default untuk elemen seperti <div>, <p>, dan <h1> hingga <h6>.

<style>
.block-element {
display: block;
background-color: biru muda;
padding: 10px;
margin: 10px 0;
}
</style>

<div class="block-element">Ini adalah elemen blok.</div>
<div class="block-element">Ini adalah elemen blok lainnya.</div>

Elemen blok dimulai di baris baru dan diperpanjang ke lebar yang tersedia sepenuhnya. Mereka seperti paragraf dalam buku - setiap satu dimulai di baris baru.

CSS display - inline-block Nilai

Nilai inline-block adalah seperti campuran - itu menggabungkan fitur dari inline dan block.

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: hijau muda;
margin: 5px;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

Elemen ini akan duduk di sebelah yang lain (seperti inline), tetapi Anda dapat menetapkan lebar dan tinggi pada mereka (seperti block). Itu sempurna untuk membuat tata letak seperti grid tanpa menggunakan grid atau fleks sebenarnya.

CSS display - none Nilai

Nilai none adalah seperti mantel kecil untuk elemen Anda.

<style>
.hidden {
display: none;
}
</style>

<p Anda dapat melihat paragraf ini.</p>
<p class="hidden">Tapi Anda tidak dapat melihat yang ini!</p>

Elemen dengan display: none sepenuhnya dihapus dari tata letak. Itu seperti mereka tidak ada di halaman sama sekali.

CSS display - Dengan table Nilai

CSS dapat membuat elemen berperilaku seperti elemen tabel, bahkan jika mereka bukan tag <table> sebenarnya.

<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid hitam;
padding: 5px;
}
</style>

<div class="table">
<div class="table-row">
<div class="table-cell">Sel 1</div>
<div class="table-cell">Sel 2</div>
</div>
<div class="table-row">
<div class="table-cell">Sel 3</div>
<div class="table-cell">Sel 4</div>
</div>
</div>

Ini menciptakan struktur seperti tabel tanpa menggunakan elemen tabel sebenarnya. Itu bagus untuk membuat tata letak yang memerlukan perilaku seperti tabel tetapi dengan fleksibilitas lebih besar.

CSS display - flex Nilai

Flexbox adalah alat tata letak yang kuat, dan itu dimulai dengan display: flex.

<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: abu-abu muda;
}
.flex-item {
background-color: putih;
margin: 10px;
padding: 20px;
}
</style>

<div class="flex-container">
<div class="flex-item">Item Flex 1</div>
<div class="flex-item">Item Flex 2</div>
<div class="flex-item">Item Flex 3</div>
</div>

Ini menciptakan kontainer fleksibel dengan item yang dapat diatur dan didistribusikan dengan mudah. Itu seperti memiliki sekelompok atlet yang dapat melecih dan menyusut untuk menyesuaikan ruang mereka secara sempurna.

CSS display - inline-flex Nilai

inline-flex mirip dengan flex, tetapi kontainer itu sendiri berperilaku seperti elemen inline.

<style>
.inline-flex-container {
display: inline-flex;
background-color: pink muda;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: putih;
}
</style>

<div class="inline-flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
</div>

Ini memungkinkan Anda memiliki beberapa kontainer fleks di baris yang sama, yang bisa sangat berguna untuk membuat tata letak kompleks.

CSS display - grid Nilai

Grid adalah alat tata letak lain yang kuat, dimulai dengan display: grid.

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: biru muda;
padding: 10px;
}
.grid-item {
background-color: putih;
padding: 20px;
text-align: center;
}
</style>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

Grid memungkinkan Anda menciptakan tata letak kompleks dengan baris dan kolom. Itu seperti memiliki spreadsheet yang sempurna untuk elemen Anda!

CSS display - inline-grid Nilai

Mirip dengan inline-flex, inline-grid menciptakan kontainer grid yang berperilaku seperti elemen inline.

<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: kuning muda;
padding: 10px;
}
.grid-item {
background-color: putih;
padding: 10px;
text-align: center;
}
</style>

<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>

Ini memungkinkan Anda memiliki beberapa kontainer grid di baris yang sama, membuka peluang tata letak yang lebih banyak.

CSS display - list-item Nilai

Akhirnya, kita memiliki list-item, yang membuat elemen berperilaku seperti item daftar.

<style>
.custom-list {
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>

<div class="custom-list">Ini adalah item daftar khusus</div>
<div class="custom-list">Ini adalah item daftar khusus lainnya</div>

Ini berguna saat Anda ingin membuat struktur seperti daftar tanpa menggunakan elemen <ul> atau <ol>.

Dan itu dia, teman-teman! Kita telah mengembara melalui negeri properti display, dari inline yang rendah hingga grid yang kuat. Ingat, kunci untuk menguasai CSS adalah latihan. Jadi, pergi dan eksperimen dengan properti ini. Siapa tahu? Anda mungkin saja menciptakan hal yang besar dalam desain web!

Happy coding, dan semoga tata letak Anda selalu sempurna! ??

Credits: Image by storyset