Layout CSS Dasar: Membuat Struktur Halaman Web
Selamat datang di artikel ke-5 tentang CSS! Pada artikel kali ini, kita akan membahas tentang layout dasar CSS, yang sangat penting untuk membuat halaman web terlihat terorganisir dan responsif. Dalam artikel ini, kita akan mempelajari berbagai konsep layout seperti box model, display types, float, dan positioning.
---#1. Box Model
Box model adalah dasar dari layout CSS. Setiap elemen di halaman web diwakili sebagai sebuah kotak yang terdiri dari beberapa bagian: konten, padding, border, dan margin.
- Konten: Bagian utama elemen, tempat teks atau gambar berada.
- Padding: Ruang antara konten dan border, digunakan untuk memberi jarak di dalam elemen.
- Border: Garis yang mengelilingi elemen, bisa diatur ketebalan dan warnanya.
- Margin: Ruang luar antara elemen dengan elemen lainnya di halaman.
Contoh penggunaan box model:
div {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
Dengan contoh di atas, elemen <div> akan memiliki lebar 300px, padding 20px di dalam, border 5px di sekitar elemen, dan margin 10px di luar elemen tersebut.
#2. Jenis Display
CSS memiliki beberapa jenis display yang menentukan bagaimana elemen-elemen diatur di halaman. Berikut adalah beberapa tipe display yang paling sering digunakan:
- block: Elemen dengan display block akan mengisi seluruh lebar baris dan dimulai pada baris baru (contoh:
<div>,<p>). - inline: Elemen dengan display inline hanya mengambil ruang yang diperlukan oleh konten dan tidak memulai baris baru (contoh:
<span>,<a>). - inline-block: Kombinasi antara block dan inline, elemen dengan tipe ini tetap dalam satu baris tetapi bisa memiliki margin dan padding seperti block.
- none: Elemen dengan display none tidak akan ditampilkan sama sekali di halaman.
Contoh penggunaan display:
div {
display: block;
}
span {
display: inline;
}
button {
display: inline-block;
}
---
#3. Float
Float digunakan untuk memposisikan elemen ke kiri atau kanan dan memungkinkan elemen berikutnya mengalir di sekitarnya. Float sering digunakan untuk membuat layout kolom di halaman web.
Contoh penggunaan float:
.left-column {
float: left;
width: 50%;
}
.right-column {
float: right;
width: 50%;
}
Dalam contoh di atas, .left-column akan mengapung ke kiri dan .right-column akan mengapung ke kanan, menciptakan dua kolom di halaman.
Namun, setelah menggunakan float, kita perlu membersihkan float dengan menggunakan teknik clearfix untuk memastikan elemen berikutnya tidak terpengaruh.
---#4. Positioning
Positioning adalah teknik untuk menempatkan elemen di halaman web. CSS menyediakan beberapa nilai untuk properti position yang mengontrol posisi elemen, yaitu:
- static: Posisi default elemen. Elemen ditempatkan sesuai dengan urutan aliran dokumen.
- relative: Posisi relatif terhadap posisi normalnya. Elemen dapat digeser dari posisinya yang asli dengan properti
top,right,bottom, danleft. - absolute: Posisi absolut terhadap elemen induk terdekat yang memiliki posisi selain static. Jika tidak ada, posisi dihitung dari dokumen.
- fixed: Posisi tetap di layar, bahkan saat halaman di-scroll.
- sticky: Elemen dengan posisi sticky akan berperilaku seperti posisi relative sampai mencapai posisi tertentu, setelah itu akan menjadi fixed.
Contoh penggunaan positioning:
.box {
position: relative;
top: 20px;
left: 30px;
}
.fixed-box {
position: fixed;
top: 10px;
right: 10px;
}
Dengan contoh di atas, elemen dengan kelas .box akan bergeser 20px dari atas dan 30px dari kiri elemen induknya, sementara .fixed-box akan tetap berada di sudut kanan atas layar bahkan saat halaman digulir.
#5. Kesimpulan
Pada artikel ini, kita telah mempelajari beberapa konsep dasar layout CSS yang penting untuk membuat halaman web terstruktur dengan baik. Dengan menggunakan box model, display types, float, dan positioning, kamu dapat membuat halaman web yang rapi dan responsif. Selanjutnya, kita akan lebih mendalami teknik-teknik layout lanjutan seperti Flexbox dan Grid di artikel berikutnya!