CSS Layout


00. Sebelum Belajar

Sebelum belajar pastikan sudah memahami:
  • HTML
  • CSS Dasar

01. Pengenalan CSS Layout
  • Di materi CSS Dasar, kita sudah belajar bagaimana menambahkan gaya pada element-element di HTML
  • Selain menambahkan gaya di element, CSS juga biasanya digunakan untuk membuat layout (tata letak) halaman web
  • Hampir semua web di dunia, akan menggunakan CSS untuk melakukan layouting (tata letak) komponen-komponen HTML nya
  • Salah satu tujuan melakukan tata letak adalah agar tampilan halaman web lebih menarik

Jangan Gunakan Tabel untuk Layout
  • Kadang mungkin ada beberapa pengembang web menggunakan Tabel untuk membuat tata letak, karena dianggap lebih mudah
  • Namun, sangat tidak disarankan untuk menggunakan tabel, terutama pada kondisi layout yang sangat kompleks, maka akan sangat menyulitkan

02. Layout Normal Flow
  • Normal Flow adalah bagaimana Web Browser menampilkan tata letak halaman HTML secara default, ketika kita tidak mengubah apapun pada tata letak nya
  • Secara default, jika kita tidak menambahkan layout CSS sama sekali, maka Web Browser akan menampilkan halaman Web dalam Normal Flow
  • Biasanya setiap Web Browser hampir memiliki Normal Flow yang sama

Urutan Komponen HTML
  • Secara default, Web Browser akan menampilkan urutan sesuai dengan posisi kode HTML yang dibuat
  • Walaupun kita tambahkan Style menggunakan CSS pada komponen HTML nya, tetap saja, urutan nya secara default akan mengikuti urutan sesuai kode HTML yang kita buat

Contoh:

Kenapa Tidak Cukup dengan Normal Flow?
  • Untuk membuat halaman yang menarik, kadang butuh tata letak yang tidak bisa sesuai dengan Normal Flow
  • Kadang kita butuh meletakkan beberapa posisi komponen ditempat yang kita inginkan, sehingga tidak bisa jika mengikuti aturan Normal Flow
  • Contoh jika kita buka website www.programmerzamannow.com 
  • Maka kita bisa lihat bahwa tata letak komponen tidak ditampilkan secara Normal Flow


03. Property Display
  • Sebelum kita belajar melakukan tata letak, kita perlu bahas ulang tentang Display
  • Kita tahu bahwa komponen di HTML memiliki default display, ada yang block dan ada yang inline
  • Sebenarnya, kita bisa mengubah nilai display untuk komponen HTML menggunakan property display di CSS
  • https://developer.mozilla.org/en-US/docs/Web/CSS/display 

Nilai CSS Display
  • inline, artinya komponen ditampilkan secara inline (hanya mengambil tempat secukupnya)
  • block, artinya komponen ditampilkan secara block (mengambil tempat kiri ke kanan komponen diatasnya)
  • inline-block, artinya komponen ditampilkan secara inline, tapi kita bisa mengubah tinggi dan lebar komponennya seperti layaknya block
  • none, artinya komponen akan dihapus dan tidak ditampilkan

Contoh:


04. Flexbox
  • Flexbox Layout bertujuan untuk menyediakan cara yang lebih efisien untuk menata letak, menyelaraskan, dan mendistribusikan ruang antar item dalam wadah (container), bahkan ketika ukurannya tidak diketahui dan/atau dinamis (sehingga disebut “fleksibel”).
  • Flexbox Layout paling sesuai untuk komponen aplikasi, dan tata letak skala kecil, sedangkan Grid Layout ditujukan untuk tata letak skala besar.
  • Grid Layout akan dibahas di materi tersendiri

Diagram Flexbox


Flex Container (menggunakan property/atribut display: flex)
  • Untuk membuat Flex Container, kita bisa menggunakan display value flex
  • Semua child element yang terdapat di dalam Flex Container, maka kita sebut sebagai Flex Item

Contoh: Membuat Flexbox Container menggunakan property Display Flex

Pada contoh di atas, block dari kiri-kanan akan dibagi rata ke semua item konten, termasuk saat ukuran layar diperbesar atau di perkecil. Jadi tiap item dari child komponennya akan menyesuaikan.

Flex Direction (menggunakan property/atribut flex-direction)
  • Secara default, Flex Item akan ditampilkan dengan arah dari kiri ke kanan, kita bisa mengubah dengan atribut flex-direction :
  • https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction 

Contoh: 

Flex Wrap (menggunakan property/atribut flex-wrap)
  • Secara default, Flex Item akan ditampilkan dalam satu garis, baik itu vertical (row) atau horizontal (column)
  • Namun jika kita ingin Flex Item di wrap pada garis berbeda ketika dibutuhkan, maka kita bisa gunakan atribut flex-wrap
  • https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap 

Contoh:

05. Flex Items
  • Komponen yang terdapat di dalam Flex Container, kita sebut dengan nama Flex Item
  • Selain melakukan pengaturan ke Flex Container, kita juga bisa melakukan pengaturan ke Flex Item

Order (menggunakan property/atribut order)
  • Secara default urutan Flex Item akan ditampilkan sesuai dengan urutan kode HTML yang dibuat
  • Namun, jika kita ingin mengubah urutan ditampilkannya, kita bisa menggunakan atribut order
  • https://developer.mozilla.org/en-US/docs/Web/CSS/order 

Contoh:

Flex Grow (menggunakan property/atribut flex-grow)
  • Atribut flex-grow mendefinisikan kemampuan item fleksibel untuk berkembang jika diperlukan. 
  • Atribut flex-grow menerima nilai yang berfungsi sebagai proporsi dari total. 
  • Ini menentukan jumlah ruang yang tersedia di dalam wadah fleksibel yang harus digunakan oleh item tersebut.
  • Misal kita punya 5 Flex Item, dimana total dari 5 Flex Item tersebut memiliki jumlah flex-grow 20, artinya per 1 grow adalah 100% / 20 = 5%
  • Sehingga Flex Item yang memiliki nilai flex-grow 2 artinya memiliki ruang sebesar 10%
  • https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow 

Contoh:

Pada contoh di atas terdapat lima Flex Item berikut:


Flex Item di atas memiliki nilai yang telah kita tentukan seperti berikut:


Flex Item dengan class small nilainya 1 (dikali 3 karena ada 3 Flex Item = 3) dan class large nilainya 2 (dikali 2 karena ada 2 Flex Item = 4), dimana total dari 5 Flex Item tersebut memiliki jumlah flex-grow 7, artinya per 1 grow adalah 100% / 7 = sekitar 14%.  Sehingga Flex Item yang memiliki nilai flex-grow 2 artinya memiliki ruang sebesar 28%

Flex Shrink (kebalikan dari flex-grow, menyusut)
  • Jika flex-grow merupakan kemampuan untuk Flex Item untuk berkembang, maka atribut flex-shrink untuk menyusut ketika dibutuhkan
  • Biasanya kemampuan untuk menyusut dibutuhkan ketika memang ukuran halaman tidak cukup, dan kita bisa mengatur nilai factor dari penyusutannya antar Flex Item, sama seperti flex-grow
  • https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink 

Contoh:

Note: pada contoh di atas, nilai flex-shrink terkecilnya adalah 1, maka saat layarnya diperkecil ukuran Flex Item yang nilainya 1 tetap, sedangkan Flex Item yang nilainya 2 jika layarnya diperkecil maka ukurannya bisa berubah menjadi sama dengan Flex Item 1.

Flex Basis
  • Atribut flex-basis digunakan untuk membuat Flex Item mengambil ruang sebesar yang ditentukan, atau jika ruangan tidak tersedia, ambil semampunya
  • Jika kita menggunakan flex-shrink : 0, maka akan dipastikan bahwa Flex Item akan mengambil sejumlah flex-basis, walaupun ukuran layar tidak mencukupi
  • https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis 

Contoh:

Note: 
Jika nilai flex-shrink sama dengan nol, maka flex item tidak boleh mengecil sama sekali. Nilai flex-basis 300px artinya nilai minimal flexbox itemnya minimal 300px.

06. Flex Alignment
  • Flex Item yang terdapat di dalam Flex Container, bisa kita rapikan atau selaraskan dengan beberapa atribut

Justify Content (mengatur jarak antar flexbox items)
  • Saat kita menggunakan Flexbox, kita bisa menggunakan atribut justify-content menentukan bagaimana Web Browser menentukan jarak antar Flex Item
  • Ada banyak nilai yang bisa kita gunakan dalam justify-content, seperti yang terlihat di gambar
  • https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content 

Contoh:

Align Items
  • Atribut align-items bisa digunakan untuk perataan Flex Item secara cross-axis
  • https://developer.mozilla.org/en-US/docs/Web/CSS/align-items 

Contoh:

Align Content
  • Atribut align-content digunakan agar menyelaraskan Flex Item seperti justify-content
  • Namun pada align-content, ini hanya bisa dilakukan jika menggunakan flex-wrap dengan nilai wrap atau wrap-reverse
  • https://developer.mozilla.org/en-US/docs/Web/CSS/align-content 

Contoh:

Gap
  • Sebelumnya, untuk menambahkan gap (jarak) antar Flex Item, kita biasanya menggunakan margin
  • Saat menggunakan Flexbox, lebih baik gunakan Gap untuk menentukan jarak dalam row (baris) atau column (kolom)
  • https://developer.mozilla.org/en-US/docs/Web/CSS/gap
  • https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
  • https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap 

Contoh:

07. Grid
  • Grid Layout adalah sistem tata letak berbasis grid dua dimensi
  • Flexbox adalah Layout yang bagus, tapi hanya satu arah, dan cocok pada kasus tertentu
  • Grid Layout adalah fitur CSS yang dibuat untuk mengatasi permasalahan tata letak yang kompleks

Grid Container
  • Untuk membuat Grid Container, kita bisa menggunakan atribut display dengan nilai grid
  • Tidak seperti Flexbox, saat menggunakan Grid Container, secara default akan terdapat satu kolom, sehingga tampilan awal mungkin tidak akan berbeda dengan Normal Flow

Contoh:

Note:
Tampilannya mirip dengan display flex, hanya sedikit bergeser saja tapi intinya tetap sama-sama satu kolom.

08. Grid Terminology
  • Sebelum kita lanjut tentang Grid Container, kita akan bahas dulu tentang Grid Terminology, agar tidak bingung di materi selanjutnya
  • Seperti yang sudah kita tahu, bentuk dari Grid itu mirip seperti tabel

Grid Container
  • Komponent yang menggunakan display: grid, kita sebut dengan Grid Container

Grid Item
  • Komponen Children dari Grid Container kita sebut dengan nama Grid Item

Grid Line
  • Garis pemisah dalam grid baik itu yang vertical atau horizontal, kita sebut dengan Grid Line

Grid Cell
  • Area yang terdapat didalam kolom dan baris yang dipisah oleh Grid Line, kita sebut dengan Grid Cell

Grid Track
  • Bagian antara dua Grid Line, atau bisa dibilang baris, kita sebut dengan Grid Track

Grid Area
  • Total area dari beberapa Grid Cell, kita sebut dengan Grid Area



09. Grid Template
  • Untuk menentukan kolom dan baris dalam Grid, kita bisa menggunakan Grid Template
  • Atribut grid-template-columns digunakan untuk menentukan kolom
  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns 
  • Atribut grid-template-rows digunakan untuk menentukan baris
  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows 

Contoh:

Penjelasan:
  • grid-template-columns: 200px auto 200px; artinya, kolom pertama ukuran lebar boxnya 200px, kolom ketiga 200px, dan kolom kedua auto (sisanya).
  • grid-template-rows: 500px auto; artinya, baris pertama ukuran panjang boxnya 500px, dan baris kedua auto (menyesuaikan isinya).

10. Grid Items
  • Komponen Children langsung dari Grid Container kita sebut dengan Grid Item
  • Ada banyak hal yang bisa kita lakukan di Grid Item, seperti memilih kolom, baris atau area

Grid Line Name
  • Sebelum kita praktek tentang Grid Start dan End, kadang ada baiknya kita membuat nama untuk Grid Line saat membuat Grid Template
  • Kita bisa buat Grid Line dengan menggunakan [namaline]

Contoh:

Tampilannya:


Keterangan: yang ada didalam kotak merah adalah grid line (kolom) dan yang didalam kotak ungu adalah grid line (baris)

Grid Item Start dan End
  • Grid Item bisa ditentukan mau mulai dari kolom atau baris berapa
  • Bahkan, untuk mempermudah, ketika membuat row template dan column template, kita bisa memberi nama sehingga mudah digunakan
  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start
  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end
  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start 
  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end 

Contoh:

Catatan contoh penjelasan:
  • Panjang horizontal dari [cline1] sampai [cline5] adalah 100px + auto + 100px
  • Panjang vertikal dari [rline1] ke [rline2] adalah 50px

Grid Area
  • Saat kita membuat Grid, kita bisa membuat Grid Area dengan menentukan nama dari Grid Area tersebut
  • Untuk membuat Grid Area, kita bisa menggunakan atribut grid-template-areas
  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
  • Dan untuk menentukan Grid Item muncul di area mana, kita bisa gunakan atribut grid-area
  • https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area 
  • Penggunaan Grid Area lebih mudah dibanding Grid Item Start dan End

Contoh:

Penjelasan: grid-template-areas

11. Grid Alignment
  • Grid juga sama seperti Flexbox, kita bisa lakukan penyelarasan seperti layaknya di Flexbox
  • Salah satu perbedaanya, dalam Grid, kita bisa melakukan penyelarasan Seluruh Grid Cell, atau hanya untuk satu Grid Cell saja

Justify Content
  • Saat kita menggunakan Grid, kita bisa menggunakan atribut justify-content menentukan bagaimana Web Browser menentukan jarak antar Grid Column
  • Ada banyak nilai yang bisa kita gunakan dalam justify-content, seperti yang terlihat di gambar
  • https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content 

Contoh:

Align Content
  • Atribut align-content digunakan agar menyelaraskan Grid Row seperti justify-content
  • https://developer.mozilla.org/en-US/docs/Web/CSS/align-content 

Contoh:

Justify Items
  • Justify Content akan melakukan penyelarasan seluruh Grid Item beserta Grid Line, namun pada Justify Items, penyelasan hanya dilakukan di level Grid Item di dalam Grid Cell, tanpa mengubah posisi Grid Line
  • https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items 

Contoh:

Align Items
  • Align Items akan melakukan penyelarasan di level Grid Cell
  • https://developer.mozilla.org/en-US/docs/Web/CSS/align-items 

Contoh:

Justify And Align Self
  • Sebelumnya untuk Justify Content / Items dan Align Content / Items, akan berdampak ke semua Grid Item
  • Namun jika kita ingin membuat Justify dan Align hanya untuk salah satu Grid Item, kita bisa menggunakan Justify dan Align Self
  • https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
  • https://developer.mozilla.org/en-US/docs/Web/CSS/align-self 

Contoh:

Gap
  • Gap, selain digunakan di Flexbox, juga bisa digunakan di Grid
  • Tujuannya juga sama, untuk menambah jarak antar Grid Cell
  • https://developer.mozilla.org/en-US/docs/Web/CSS/gap
  • https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
  • https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap 

Contoh:

12. Subgrid
  • Saat kita membuat tata letak yang sangat kompleks, kadang kita sering menjadikan Grid Item menjadi Grid Container lagi
  • Pada kasus tertentu, walaupun Grid Item tersebut merupakan Grid Container, namun kadang kita ingin aturan row dan column nya ingin mengikuti aturan Grid Container yang ada diatasnya
  • Pada kasus seperti ini, kita bisa menggunakan Subgrid

Contoh: membuat subgrid secara manual

Note:
Kalo secara manual, PR nya adalah ukuran child grid harus mengikuti parent grid. Pada contoh di atas, parent gridnya adalah komponen div dengan class .container, ukurannya sbb:

grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px 100px;

Sedangkan child gridnya adalah komponen dengan class .content1, ukurannya sbb:

grid-template-columns: 100px 50px 100px;
grid-template-rows: 100px 50px 100px;

Ukuran child grid di atas, harus diubah mengikuti parent gridnya menjadi:

grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;

Contoh: membuat subgrid menggunakan subgrid

Pada contoh di atas, dengan menggunakan subgrid maka secara otomatis child gridnya akan mengikuti ukuran parent gridnya.

13. Multiple Column
  • Multiple column layout adalah cara untuk membuat tata letak seperti kolom dalam koran
  • Cara untuk membuat column adalah dengan menggunakan attribute column-count
  • https://developer.mozilla.org/en-US/docs/Web/CSS/column-count 
  • Atau jika kita ingin menentukan lebar kolom, tanpa peduli jumlah kolom yang akan dibuat, kita bisa gunakan atribut column-width
  • https://developer.mozilla.org/en-US/docs/Web/CSS/column-width 

Column Style
  • Kita juga bisa mengubah Style untuk Column
  • Atribut column-gap untuk mengatur jarak Column
  • https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
  • Atribut column-rule untuk mengatur border dari Column
  • https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule 

Contoh:

14. Property/Atribut Float
  • CSS memiliki atribut float, yang sebelum ada Flexbox dan Grid, dulu Float biasanya digunakan untuk membuat Layout
  • Atribut float digunakan untuk memposisikan elemen pada web, sekarang biasanya digunakan untuk gambar
  • https://developer.mozilla.org/en-US/docs/Web/CSS/float 

Contoh:

15. Positioning
  • Positioning memungkinkan kita meletakkan posisi elemen di tempat yang tidak sesuai dengan Normal Flow
  • Misal meletakkan elemen di atas elemen lain, atau meletakkan elemen di posisi yang selalu sama di Viewport browser
  • Untuk mengubah posisi elemen, kita bisa menggunakan atribut position
  • https://developer.mozilla.org/en-US/docs/Web/CSS/position 
  • Secara default, position bernilai static, artinya dia akan ditempatkan sesuai dengan Normal Flow

Top, Bottom, Left dan Right
  • Jika kita ubah atribut position dari default value-nya, kita bisa mengatur elemen menggunakan atribut top, bottom, left dan right
  • https://developer.mozilla.org/en-US/docs/Web/CSS/top
  • https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
  • https://developer.mozilla.org/en-US/docs/Web/CSS/left
  • https://developer.mozilla.org/en-US/docs/Web/CSS/right

Relative Positioning
  • Relative positioning adalah posisi mirip seperti static positioning, dimana element akan ditempatkan sesuai Normal Flow.
  • Namun setelah ditempatkan, kita bisa mengubah posisi elemen.
  • Pada static positioning, mengubah posisi tidak akan berdampak apapun

Contoh:

Note:
Posisi content2 bergeser tapi spacenya masih ada (tidak hilang).

Absolute Positioning
  • Absolute positioning adalah menghapus elemen dari Normal Flow, bahkan tidak ada space yang digunakan sama sekali
  • Posisi awal untuk elemen absolute adalah relative ke posisi terdekat dengan elemen sebelumnya, atau jika tidak ada, berarti di awal block element parent nya
  • Jika elemen absolute tidak memiliki parent, maka parent nya adalah html

Contoh:

Note:
  • Posisi content2 bergeser dan spacenya hilang.
  • Posisi content2 mengambil jarak (top dan left) dari parentnya, tapi karena contoh di atas tidak ada parentnya jadi mengambil jarak dari area viewport (halaman htmlnya).
  • Jika discroll, maka content2 akan ikut bergerak di posisinya.

Property/Atribut Z-Index
  • Saat kita menggunakan Relative dan Absolute Positioning, yang mulai mengganggu adalah elemen akan saling bertumpuk
  • Secara default saat menggunakan relative dan absolute, maka posisi akan diatas element yang static, tapi bagaimana jika ternyata kita ingin mengubah posisi tumpukan?
  • Untuk mengubah posisi tumpukan elemen, kita bisa menggunakan atribut z-index, yang secara default bernilai auto atau 0
  • Semakin tinggi nilai z-index, artinya posisi akan semakin diatas
  • https://developer.mozilla.org/en-US/docs/Web/CSS/z-index 

Contoh:

Fixed Positioning
  • Fixed positioning adalah menghapus elemen dari Normal Flow, bahkan tidak ada space yang digunakan sama sekali, jadi sama seperti Absolute positioning
  • Posisi awal untuk elemen absolute adalah relative ke posisi terdekat dengan elemen sebelumnya, atau jika tidak ada, berarti di awal block element parent nya
  • Namun yang membedakan dari Absolute adalah, perubahan posisi pada element fixed, dia akan relative ke viewport (halaman web yang terlihat)
  • Oleh karena itu, jika halaman web kita scroll, maka elemen fixed akan diam ditempat, dan tidak akan mengikuti scroll

Contoh:

Sticky Positioning
  • Sticky positioning adalah gabungan antara relative dan fixed position
  • Sticky positioning akan menampilkan elemen seperti relative positioning, yang artinya dalam Normal Flow, namun ketika elemen di scroll dalam ambang batas yang sudah disesuaikan, maka otomatis akan menjadi fixed positioning

Contoh:

16. Fraction Unit
  • Saat kita membuat layout, kadang kita akan sering menggunakan satuan unit bernama fr (fraction)
  • Fraction adalah sisa ruang dalam Grid, sisa ruang biasanya adalah sisa ruang yang bisa diisi setelah di kurangan Grid Item yang tidak flexible (ukurannya sudah fix)
  • Cara perhitungan fr mirip dengan flex-grow, dimana ukurannya akan dihitung dari total fr
  • Misal jika sisa ruang adalah 1000px, dan total fr adalah 20fr, maka 1 pr bernilai 50px

Contoh:

Note:
  • grid-template-columns: 200px repeat(4, 1fr); artinya lebar sidebar 200px, sisanya dibagi 4. Bisa juga ditulis seperti grid-template-columns: 200px 1fr 1fr 1fr 1fr;
  • fr membagia rata sisa space menjadi proporsional.

17. Media Queries
  • Media Queries adalah fitur di CSS yang bisa digunakan untuk memodifikasi tampilan web sesuai dengan kondisi Device, Web Browser atau System Setting milik pengguna
  • Seperti yang kita tahu, saat membuat web, pastinya kita tahu bahwa perangkat pengguna pasti berbeda-beda, ada yang membuat web kita dari Smartphone, Laptop, Komputer, bahkan ukuran layarnya bisa berbeda-beda
  • Oleh karena itu kadang mungkin kita ingin mengubah tampilan sesuai dengan kondisi perangkat pengguna

Menggunakan Media Queries
  • Untuk menggunakan Media Queries, kita bisa lakukan di HTML ketika menggunakan file CSS yang berbeda
  • Atau bisa langsung menggunakan @media di file CSS yang kita buat
  • Kita akan coba praktekan dua-dua nya
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries 

Contoh:

Tampilan saat layar viewport lebar minimalnya (min-width: 500px)


Tampilan saat layar viewport lebar minimalnya (min-width: 10px)


@media
  • Selain menggunakan Media Query di HTML, kita juga bisa langsung menggunakan Media Query di file CSS menggunakan at-rule @media
  • At-rule @media memiliki aturan penulisan seperti berikut :
    @media MediaType Operator MediaFeature Operator MediaFeature

@media Rule
  • Untuk Media Type, kita bisa lihat disini untuk daftar yang tersedia : https://www.w3.org/TR/CSS21/media.html 
  • Dan untuk Media Feature, kita bisa melihat disini untuk daftar yang tersedia : https://web.dev/learn/design/media-features
  • Dan untuk Operator terdapat tiga pilihan :
    • and untuk kombinasi beberapa media feature, dan semua media feature wajib terpenuhi
    • or, menggunakan , (koma), untuk kombinasi beberapa media feature yang hanya wajib salah satunya
    • not untuk menyatakan tidak boleh memenuhi aturan media feature yang ditentukan

Contoh:

Referensi
  • Berikut contoh Media Feature untuk ukuran-ukuran layar dan perangkat yang banyak digunakan : https://www.w3schools.com/css/css_rwd_mediaqueries.asp 

18.  Property Display: None
  • Sebelumnya, di materi Display kita bahas sedikit bahwa atribut display bisa memiliki value none (dihapus / dihilangkan)
  • Pertanyaannya, untuk apa kita membuat elemen, tapi harus dihilangkan?
  • Sebenarnya banyak kegunaannya, contohnya di materi ini, kita akan coba membuat Menu Bar memanfaatkan Display None

Contoh:

Selesai.

Source: Youtube Programmer Zaman Now