Layout CSS - Belajar Front-End Web untuk Pemula

Petik.net - Layout CSS adalah teknik atau cara mengatur tampilan atau tata letak elemen pada halaman web dengan menggunakan bahasa pemrograman CSS (Cascading Style Sheet). Layout CSS digunakan untuk mengatur tampilan halaman web agar terlihat lebih menarik dan mudah dibaca oleh pengguna.

Layout CSS terdiri dari beberapa teknik yang dapat digunakan untuk mengatur tampilan atau tata letak elemen pada halaman web, seperti float layout, flexbox layout, grid layout, dan lain sebagainya. Setiap teknik layout CSS memiliki kelebihan dan kekurangan masing-masing, sehingga pemilihan teknik layout CSS yang tepat harus disesuaikan dengan kebutuhan dan tujuan dari halaman web yang dibuat.

Layout CSS adalah teknik yang digunakan untuk mengatur tampilan atau tata letak elemen pada halaman web. Ada beberapa teknik layout CSS yang umum digunakan, di antaranya:

1. Float Layout

Float layout adalah teknik layout CSS yang menggunakan property float untuk mengatur tata letak elemen pada halaman web. Float layout umum digunakan untuk membuat tampilan kolom atau grid. Contohnya:


  
    Ini adalah kolom pertama.
  
  
    Ini adalah kolom kedua.

.column {
  float: left;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

Pada contoh di atas, kita membuat sebuah container menggunakan tag < div > dan dua kolom dengan property float dan width 50%. Hal ini membuat kedua kolom berada pada satu baris dan menempati setengah dari lebar container.

2. Flexbox Layout

Flexbox layout adalah teknik layout CSS yang menggunakan property display:flex untuk mengatur tata letak elemen pada halaman web. Flexbox layout umum digunakan untuk membuat tampilan kolom atau grid yang responsif. Contohnya:


  
    Ini adalah kolom pertama.
  
  
    Ini adalah kolom kedua.

.container {
  display: flex;
  flex-wrap: wrap;
}
.column {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

Pada contoh di atas, kita membuat sebuah container menggunakan tag < div > dan dua kolom dengan property display:flex dan flex-wrap: wrap. Hal ini membuat kedua kolom berada pada satu baris dan menyesuaikan diri dengan ukuran layar perangkat yang berbeda.

3. Grid Layout

Grid layout adalah teknik layout CSS yang menggunakan property display:grid untuk mengatur tata letak elemen pada halaman web. Grid layout umum digunakan untuk membuat tampilan kolom atau grid yang kompleks dengan ukuran dan posisi yang tepat. Contohnya:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.item {
  padding: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
}

Pada contoh di atas, kita membuat sebuah container menggunakan tag < div > dan enam item dengan property display:grid dan grid-template-columns: repeat(3, 1fr). Hal ini membuat enam item tersebut terbagi menjadi tiga kolom dengan lebar yang sama. Selain itu, kita juga memberikan property grid-gap pada container untuk memberikan jarak antar item.

Positioning CSS

Positioning CSS adalah teknik yang digunakan untuk menempatkan elemen pada halaman web pada posisi tertentu. Ada beberapa nilai yang dapat digunakan untuk property positioning CSS, yaitu:

Static: nilai default pada positioning CSS, dimana elemen ditempatkan sesuai dengan aliran dokumen. Contohnya: position: static;.
Relative: elemen ditempatkan relatif terhadap posisi normalnya. Contohnya: position: relative;.
Absolute: elemen ditempatkan relatif terhadap elemen induk yang memiliki property positioning selain nilai default. Contohnya: position: absolute;.
Fixed: elemen ditempatkan pada posisi tetap pada halaman web. Contohnya: position: fixed;.

Display CSS

Display CSS adalah teknik yang digunakan untuk mengatur tampilan atau tata letak dari elemen pada halaman web. Ada beberapa nilai yang dapat digunakan untuk property display CSS, yaitu:

Block: membuat elemen menempati satu baris penuh pada halaman web. Contohnya: display: block;.
Inline: membuat elemen berada pada satu baris dengan elemen lain pada halaman web. Contohnya: display: inline;.
Inline-block: kombinasi dari block dan inline, membuat elemen berada pada satu baris dan menempati ruang seperti block. Contohnya: display: inline-block;.
None: elemen tidak ditampilkan pada halaman web. Contohnya: display: none;.

Responsive Design CSS

Responsive Design CSS adalah teknik yang digunakan untuk membuat tampilan halaman web yang dapat menyesuaikan diri dengan ukuran layar perangkat yang digunakan oleh pengguna. Teknik ini dilakukan dengan cara menggunakan media query pada CSS dan membuat tampilan yang responsif dengan menggunakan property CSS yang tepat.

Halaman: