Tutorial Belajar CSS: Membuat Gallery Gambar dengan HTML dan CSS

Bermodalkan pemahaman tentang CSS Box Model, dalam tutorial belajar CSS Duniaikom kali ini kita akan praktek membuat gallery gambar sederhana. Setiap gambar ini nantinya menggunakan bingkai yang dibuat dari CSS Box Model: border, padding dan margin.


Cara Menambahkan Bingkai Gambar dengan CSS

Untuk membuat bingkai gambar, kita tinggal menambahkan property border ke dalam tag <img>, seperti contoh berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg">
</body>
</html>

Cara menambahkan bingkai ke gambar menggunakan CSS

Property border: 4px solid #575D63 akan menambahkan efek bingkai abu-abu gelap di sisi luar gambar. Agar bingkai ini lebih terlihat, saya akan menambahkan sedikit padding:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg">
</body>
</html>

Menambahkan padding ke dalam gambar menggunakan CSS

Sekarang, terdapat sedikit spasi antara gambar dengan border. Ini berasal dari penambahan property padding: 10px, yang artinya akan membuat jarak 10 pixel antara gambar dengan border.

Baik, 1 gambar selesai, mari kita mulai merancang gallery gambar dengan menambahkan 3 gambar lain.


Membuat Gallery Gambar dengan HTML dan CSS

Dengan penambahan 3 buah tag <img> lainnya, berikut kode HTML dan CSS yang saya gunakan:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg"><img src="beach.jpg">
  <img src="berry.jpg"><img src="sakura.jpg">
</body>
</html>

Membuat gallery gambar menggunakan CSS

Inilah salah satu keunggulan menggunakan CSS, dimana setiap penambahan element HTML baru, akan langsung dikenai kode CSS (selama selector CSS tersebut cocok dengan element HTML).

Pada kode di atas, selector CSS img akan membuat setiap tag <img> juga memiliki width, height, border dan padding yang sama dengan gambar pertama kita.

Tapi, bisa anda perhatikan setiap gambar saling menempel satu sama lain. Bagaimana cara menambah ruang atau spasi diantara gambar-gambar ini? Yup, saatnya kita menggunakan property margin:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     width: 300px;
     height: 200px;
     border: 4px solid #575D63;
     padding: 10px;
     margin: 20px;
   }
</style>
</head>
<body>
  <img src="autumn_lake.jpg"><img src="beach.jpg">
  <img src="berry.jpg"><img src="sakura.jpg">
</body>
</html>

Penambahan margin ke dalam gambar

Hasilnya, untuk setiap gambar, akan terdapat margin sebesar 20 pixel.

Sebagai efek terakhir, bagaimana cara agar gambar-gambar ini tampil persis di tengah-tengah web browser?

Untuk ini kita akan menggunakan trik margin: auto. Nilai auto pada horizontal margin (sisi kiri dan kanan) akan membuat sebuah element HTML berada ditengah-tengah parent element-nya. Dalam kasus kita, ini akan menempatkan gallery tepat di tengah-tengah web browser.

Berikut hasil akhir gallery gambar:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   body {
     width: 736px;
     margin: 10px auto;
     border: 2px solid black;
   }
   img {
     border: 4px solid #575D63;
     margin: 20px;
     padding: 10px;
     width: 300px;
     height: 200px;
   }
</style>
</head>
<body>
<img src="autumn_lake.jpg"><img src="beach.jpg">
<img src="berry.jpg"><img src="sakura.jpg">
</body>
</html>

Hasil akhir tampilan final gallery dengan CSS

Kali ini saya menambahkan sebuah selector baru: body. Untuk selector ini saya mengatur lebarnya sebesar 736 pixel, margin: 10px auto, dan efek bingkai melalui border: 2px solid black.

Dari mana datangnya angka 736 pixel? Angka ini berasal penjumlahan 2 lebar gambar. Untuk membuat sebuah kotak yang 'pas' membungkus gallery gambar, kita harus menghitung setiap sisi dari CSS Box Model.

Cara perhitungan ini sudah kita bahas pada tutorial sebelumnya: Cara Menghitung Lebar dan Tinggi CSS Box Model.

Lebar dan Tinggi dari sebuah element berasal dari penjumlahan width/height + padding + border + margin. Total lebar dari 1 gambar adalah: 300px width + 2*10px padding + 2*4px border + 2*20px margin = 368 pixel.

Karena saya ingin ada 2 gambar berdampingan, maka 368*2 = 736 pixel!


Tutorial kali ini menutup sesi pembahasan singkat tentang CSS Box Model di Duniailkom. Semoga anda bisa memahami ilustrasi dan contoh penggunaan CSS Box Model yang saya bahas di sini. CSS Box Model sangat penting untuk dipahami, tetapi sering juga membuat bingung.

Sebagai contoh, di dalam CSS juga dikenal konsep margin collapsing, yakni 'menyatunya' 2 buah margin vertikal ketika saling berhimpitan. Serta trik penggunaan CSS Reset dalam membuat design layout. Karena materi seperti perlu pembahasan yang cukup panjang dan detail, saya akan membahasnya di eBook CSS Uncover Duniailkom.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

65 Comments

  1. reza
    25 Jan 16
  2. Anonymous
    27 Apr 16
  3. Anonymous
    05 Jun 16
  4. Septian
    14 Jun 16
    • Andre
      14 Jun 16
  5. Azhar Lihan
    07 Aug 16
    • Andre
      07 Aug 16
      • Azhar Lihan
        08 Aug 16
        • Andre
          10 Aug 16
        • Azhar Lihan
          11 Aug 16
  6. Liyan
    10 Aug 16
  7. Azhar Lihan
    11 Aug 16
    • Andre
      11 Aug 16
  8. muhammad ramadhan iskandar
    15 Feb 17
    • muhammad ramadhan iskandar
      15 Feb 17
    • Andre
      17 Feb 17
  9. mrifqims
    25 Mar 17
    • Andre
      25 Mar 17
  10. Nasry
    22 Apr 17
    • Andre
      24 Apr 17
  11. Hari
    19 Jul 17
    • Andre
      21 Jul 17
  12. Ihsan Magazine
    09 Aug 17
  13. Iwan
    22 Mar 18
    • Andre
      23 Mar 18
  14. Alvin
    10 Apr 18
    • Andre
      12 Apr 18
      • Alfin
        17 Apr 18
        • Andre
          18 Apr 18
  15. Wahyu
    21 Jul 18
    • Andre
      22 Jul 18
  16. Eleazer
    20 Aug 18
  17. Dirext
    22 Aug 18
  18. Dirext
    29 Aug 18
  19. Dirext
    01 Sep 18
    • Andre
      03 Sep 18
  20. Msfalif
    13 Dec 18
    • Andre
      14 Dec 18
    • Andre
      23 Mar 19
  21. Hilman Restu
    30 Mar 19
    • Andre
      01 Apr 19
    • Desi
      21 Jul 20
  22. Hilman Restu
    30 Mar 19
    • Andre
      01 Apr 19
  23. Ismail
    08 Apr 19
    • Andre
      25 Jul 19
  24. Ardli Firdaus
    24 Jul 19
    • Andre
      25 Jul 19
  25. Agus
    06 Jan 20
    • Andre
      07 Jan 20
  26. Anonymous
    19 Apr 20
  27. Irah
    07 Sep 20
  28. Imam
    01 Oct 20
    • Andre
      01 Oct 20
  29. Abdullah Mukhlis
    12 Jan 22
    • Andre
      13 Jan 22
  30. Abdullah Mukhlis
    14 Jan 22
  31. Abdullah Mukhlis
    14 Jan 22
  32. Abdullah Mukhlis
    14 Jan 22
  33. Abdullah Mukhlis
    16 Jan 22

Add Comment

Leave a Reply to reza Cancel reply