Tutorial Dasar CSS: Box Model dan Layouting - Mulai Paham Dengan Belajar

Dalam desain web, elemen-elemen HTML seperti teks, gambar, dan tautan, dapat dibungkus atau ditempatkan dalam kotak yang disebut “box“. Konsep ini dikenal sebagai Box Model. Setiap elemen memiliki kotak yang melibatkan area isi konten, padding, border, dan margin. Memahami Box Model adalah langkah penting dalam mengatur tata letak elemen-elemen pada laman web.

Layouting mengacu pada cara elemen-elemen ini ditempatkan dan diatur dalam halaman web. Ini mencakup pemilihan jenis tata letak, seperti blok atau inline, serta penggunaan properti-posisi dan properti-display. Dengan menguasai konsep-konsep ini, kita dapat mengatur tampilan dan tata letak elemen-elemen secara efektif dalam desain web kita.

Memahami Box Model

Box Model menguraikan struktur dasar elemen dalam empat bagian:

Content: Ini adalah area di dalam kotak yang berisi teks, gambar, atau konten lainnya yang ditampilkan.
Padding: Ini adalah area kosong di sekitar konten, yang memberikan jarak antara konten dan batas kotak.
Border: Ini adalah garis di sekitar kotak yang memisahkan konten dari area padding dan area margin.
Margin: Ini adalah area kosong di luar kotak, yang memberikan jarak antara elemen ini dan elemen lain di sekitarnya.

Keempat bagian di atas mungkin dapat dipahami dengan melihat gambar berikut ini:

CSS Box Model

Box Sizing

Box Sizing adalah properti CSS yang mengontrol bagaimana ukuran elemen dihitung. Secara default, CSS menghitung ukuran elemen dengan menggabungkan content, padding, dan border. Tetapi dengan box-sizing, Anda dapat mengatur elemen untuk menghitung ukuran hanya dengan content, sehingga membuat pengaturan tata letak menjadi lebih mudah.

Contoh:

.box {
    width: 200px;
    padding: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Menghitung ukuran elemen dengan content, padding, dan border */
}

.box {

width: 200px;

padding: 20px;

border: 1px solid #ccc;

box-sizing: border-box; /* Menghitung ukuran elemen dengan content, padding, dan border */

}

Positioning: Static, Relative, Absolute, dan Fixed

Properti position memungkinkan Anda mengendalikan posisi elemen di halaman. Ada beberapa jenis posisi:

Static: Ini adalah posisi default. Elemen ditempatkan sesuai dengan alur normal dokumen.
Relative: Elemen ditempatkan relatif terhadap posisi normalnya. Anda dapat menggunakan properti top, right, bottom, dan left untuk menggeser elemen dari posisi normalnya.
Absolute: Elemen ditempatkan relatif terhadap elemen induk yang berposisi relative atau absolute. Ini memungkinkan Anda membuat lapisan elemen di atas elemen lain.
Fixed: Elemen ditempatkan relatif terhadap tampilan layar. Ini akan tetap di posisinya saat Anda menggulir laman.

Contoh:

.relative-box {
    position: relative;
    top: 20px;
    left: 30px;
}

.absolute-box {
    position: absolute;
    top: 50px;
    left: 50px;
}

.fixed-box {
    position: fixed;
    top: 0;
    right: 0;
}

.relative-box {

position: relative;

top: 20px;

left: 30px;

}

.absolute-box {

position: absolute;

top: 50px;

left: 50px;

}

.fixed-box {

position: fixed;

top: 0;

right: 0;

}

Display: Block, Inline, dan Inline-block

Properti display mengontrol bagaimana elemen ditampilkan di halaman.

Block: Elemen ini akan mengambil lebar penuh dan membentuk blok terpisah. Mereka akan ditempatkan di baris baru.
Inline: Elemen ini hanya akan mengambil ruang yang dibutuhkan oleh kontennya dan tidak memaksa baris baru.
Inline-block: Elemen ini akan mengambil ruang yang dibutuhkan oleh kontennya tetapi tetap membentuk blok terpisah.

Contoh:

.block-element {
    display: block;
    width: 100%;
    background-color: #f2f2f2;
}

.inline-element {
    display: inline;
    background-color: #3498db;
    color: white;
}

.inline-block-element {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: #e74c3c;
    color: white;
}

.block-element {

display: block;

width: 100%;

background-color: #f2f2f2;

}

.inline-element {

display: inline;

background-color: #3498db;

color: white;

}

.inline-block-element {

display: inline-block;

width: 150px;

height: 150px;

background-color: #e74c3c;

color: white;

}

Sekarang saatnya kita menerapkan tutorial ini untuk membuat sebuah halaman web yang menerapkan CSS Box Model dan Layouting. Silahkan mengikuti beberapa langkah berikut ini:

Buat file dengan nama latihan_css_004.html, lalu ketikkan kode HTML berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Halaman Web dengan Box Model dan Layouting</title>
    <link rel="stylesheet" href="assets/css/style_box_layout.css">
</head>
<body>
    <header>
        <h1>Contoh Halaman Web dengan Box Model dan Layouting</h1>
    </header>
    <nav>
        <a href="#">Beranda</a>
        <a href="#">Tentang Kami</a>
        <a href="#">Layanan</a>
        <a href="#">Kontak</a>
    </nav>
    <div class="container">
        <div class="main-content">
            <h2>Selamat Datang di KelasRingan.Com</h2>
            <img class="image" src="assets/img/gambar.jpg" alt="Gambar Contoh">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim sunt. Voluptatem 
                praesentium minima dicta, et ipsa perspiciatis similique nulla soluta voluptate 
                quas repudiandae aperiam deserunt, temporibus laudantium qui molestias fugit sed 
                placeat quasi! Ex, delectus omnis iure porro impedit accusamus rem veritatis nemo 
                esse accusantium aliquid tenetur assumenda vero asperiores! Impedit sequi 
                voluptates velit? Facilis ut molestias dicta perferendis!</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et, distinctio numquam 
                corrupti, exercitationem, voluptas illo harum impedit aut modi ad pariatur beatae 
                rem qui reprehenderit a veniam iusto nihil maxime velit nemo quidem. Sapiente porro 
                ducimus non, voluptatem voluptates explicabo incidunt. Provident temporibus 
                possimus nesciunt, deserunt quae vitae unde eligendi ex fugit odit esse suscipit 
                quod, quas in minima. Ipsam dolore dolorem tenetur id repellendus minus omnis 
                explicabo voluptate, odit fugit numquam aliquid minima molestias exercitationem? 
                Minus alias doloremque modi.</p>
        </div>
        <div class="sidebar">
            <h3>Sidebar</h3>
            <p>Ini adalah sidebar dengan konten tambahan.</p>
        </div>
    </div>
    <footer>
        <p>Copyright &copy; 2023 KelasRingan.Com</p>
    </footer>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Contoh Halaman Web dengan Box Model dan Layouting</title>

</head>

<body>

<h1>Contoh Halaman Web dengan Box Model dan Layouting</h1>

</header>

<nav>

<a href="#">Beranda</a>

<a href="#">Tentang Kami</a>

<a href="#">Layanan</a>

<a href="#">Kontak</a>

</nav>

<h2>Selamat Datang di KelasRingan.Com</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim sunt. Voluptatem

praesentium minima dicta, et ipsa perspiciatis similique nulla soluta voluptate

quas repudiandae aperiam deserunt, temporibus laudantium qui molestias fugit sed

placeat quasi! Ex, delectus omnis iure porro impedit accusamus rem veritatis nemo

esse accusantium aliquid tenetur assumenda vero asperiores! Impedit sequi

voluptates velit? Facilis ut molestias dicta perferendis!</p>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et, distinctio numquam

corrupti, exercitationem, voluptas illo harum impedit aut modi ad pariatur beatae

rem qui reprehenderit a veniam iusto nihil maxime velit nemo quidem. Sapiente porro

ducimus non, voluptatem voluptates explicabo incidunt. Provident temporibus

possimus nesciunt, deserunt quae vitae unde eligendi ex fugit odit esse suscipit

quod, quas in minima. Ipsam dolore dolorem tenetur id repellendus minus omnis

explicabo voluptate, odit fugit numquam aliquid minima molestias exercitationem?

Minus alias doloremque modi.</p>

</div>

<h3>Sidebar</h3>

<p>Ini adalah sidebar dengan konten tambahan.</p>

</div>

</footer>

</body>

</html>

Buat file dengan nama style_box_layout.css, lalu ketikkan kode CSS berikut ini:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

nav {
    background-color: #444;
    color: white;
    text-align: center;
    padding: 10px;
}

nav a {
    text-decoration: none;
    color: white;
    margin: 0 10px;
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    display: flex;
}

.main-content {
    flex: 70%;
    padding: 20px;
    background-color: #f9f9f9;
}

.sidebar {
    flex: 30%;
    padding: 20px;
    background-color: #e6e6e6;
}

.image {
    float: left;
    margin-right: 20px;
    max-width: 300px;
}

footer {
    clear: both;
    text-align: center;
    padding: 10px;
    background-color: #444;
    color: white;
}

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f2f2f2;

}

header {

background-color: #333;

color: white;

text-align: center;

padding: 10px;

}

nav {

background-color: #444;

color: white;

text-align: center;

padding: 10px;

}

nav a {

text-decoration: none;

color: white;

margin: 0 10px;

}

.container {

max-width: 1200px;

margin: 20px auto;

padding: 20px;

background-color: white;

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

display: flex;

}

.main-content {

flex: 70%;

padding: 20px;

background-color: #f9f9f9;

}

.sidebar {

flex: 30%;

padding: 20px;

background-color: #e6e6e6;

}

.image {

float: left;

margin-right: 20px;

max-width: 300px;

}

footer {

clear: both;

text-align: center;

padding: 10px;

background-color: #444;

color: white;

}

Hasilnya jika file latihan_css_004.html kita jalankan pada web browser maka akan terlihat seperti pada gambar berikut ini:

Box Model dan Layouting

Pada contoh di atas, terdapat properti flex yang merupakan Flexbox (Flexible Box Layout). Flexbox (Flexible Box Layout) adalah model tata letak di CSS yang dirancang untuk menyederhanakan dan mengatur tata letak elemen-elemen dalam sebuah kontainer dengan cara yang lebih efisien dan fleksibel. Ini adalah salah satu cara yang kuat untuk mengatur elemen secara horizontal dan vertikal dalam desain web responsif. Dengan Flexbox, Anda dapat dengan mudah mengatur elemen dalam baris atau kolom, serta mengatur ruang dan urutan elemen-elemen tersebut.

Keuntungan Menggunakan Flexbox:

Tata Letak Dinamis
Flexbox memungkinkan elemen dalam kontainer mengatur ulang dan beradaptasi dengan ukuran tampilan, sehingga cocok untuk desain responsif.
Urutan Konten
Anda dapat mengatur urutan elemen tanpa harus mengubah struktur HTML.
Distribusi Ruang
Anda dapat mendistribusikan ruang tersedia di dalam kontainer dengan lebih mudah.
Pengaturan Posisi
Mengatur posisi vertikal dan horizontal elemen dengan lebih intuitif.

Komponen Flexbox:

Container
Dalam elemen yang ingin Anda buat sebagai kontainer fleksibel, Anda harus menetapkan properti display: flex; atau display: inline-flex;. display: flex; membuat elemen menjadi kotak yang dapat diatur dengan fleksibilitas, sementara display: inline-flex; membuatnya tetap dalam alur teks.
Flex Items
Elemen-elemen yang berada di dalam kontainer flex disebut “flex items”. Elemen ini akan mendapatkan fleksibilitas yang diberikan oleh model tata letak flexbox.

Dalam tutorial ini, kita telah mempelajari konsep Box Model dan dasar-dasar Layouting dalam desain web menggunakan CSS. Memahami bagaimana elemen-elemen dikemas dalam kotak, pengaturan ukuran dengan box-sizing, posisi dengan properti position, serta tampilan elemen dengan properti display akan membantu kita merancang tata letak yang lebih baik dan responsif pada laman web kita. Dengan penggunaan yang tepat, kita dapat menciptakan tampilan halaman web yang menarik dan fungsional. Selain itu kami juga telah menjelaskan tentang Flexbox (Flexible Box Layout).

Untuk mendapatkan daftar Tutorial CSS dari Dasar, silahkan mengunjungi Index Tutorial CSS dari Dasar: Belajar CSS Dari Dasar.

Memahami Box Model

Box Sizing

Positioning: Static, Relative, Absolute, dan Fixed

Display: Block, Inline, dan Inline-block

Keuntungan Menggunakan Flexbox:

Komponen Flexbox:

Related Articles

Leave a Reply Cancel Reply