CSS Layouting - Display

Properti Display Merupakan hal yang Sangat penting dalam Properti CSS Untuk Mengontrol Sebuah layout. ada 4 Value dalam Properti Display.

  1. Inline
  2. Inline-Block
  3. Block
  4. None

Berikut Ciri Inline HTM Secara Default :
  • Tidak Menambah Baris Baru Ketika Dibuat
  • Lebar & Tinggi Sebesar Kontennya
  • Tidak Dapat Mengatur Tinggi dan Lebar Kecuali tag <img>
  • Margin & padding Hanya Mempengaruhi Secara Horizontal, tidak Vertikal
Contoh Inline :
  • <span>
  • <a>
  • <img>
  • <sub>
  • <label>
  • <textarea>
  • dll

Berikut Contoh Penggunan Display Inline
B


Inline-Block Ciri-cirnya :
  • Secara Default pada Tag HTLM tidak ada property inline-block
  • Mengubah Secara Manual Properti nya
  • Prilaku sama dengan Inline
  • pada inline kita tidak dapat mengatur tinggi dan lebar (kecuali tag img) namun pada inline-block kita bisa mengatur tingginya

Berikut contoh penggunaan Inline-Block

Block  Memiliki Ciri :
  • Secara Default Element yg Menambah Baris baru ketika dibuat
  • Dapat Mengatur tinggi & lebar element blok
  • di dalam tag block kita dapat menyimpan lain seperti  inline, inline-block atau block lagi
Contoh Element Block :
  • <h1> s/d <h6>
  • <p>
  • <li>
  • <ol>
  • <ul>
  • dll

Contoh Penggunaan Element Block



Display None Yaitu untuk tidak menampilkan sebuah element pada halaman web. Contohnya :













hjMddffeg

Comments

Post a Comment

Popular posts from this blog

install node js arsitektur arm (HG680 armbian / raspberry pi)

install node js versi 12.x.x atau lebih jalankan perintah curl (client url) curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - setelah di update kita install node js nya dengan perintah sudo apt-get install -y nodejs setelah selesai bisa cek versi node js dan npm node -v maka nanti akan keluar tulisan v12.17.0 (artinya versi 12.17.0 bisa saja versi yang lain tergantung versi yang akan diinstall) npm -v perintah diatas mengecek dari versi npm yang digunakan Berikut beberapa daftar versi dari node js Node.js v14.x : curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash - sudo apt-get install -y nodejs Node.js v13.x : curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash - sudo apt-get install -y nodejs Node.js v12.x : curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs Node.js v10.x : curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bas...
Read more

Dasar CSS - Pengenalan

Image
menurut w3schools.com : CSS merupakan sebuah bahasa yang menjelaskan style sebuah Dokumen HTML  CSS Mendeskripsikan bagaimana Element dari HTML harus ditampilkan (Cth : Warna, Ukuran, Posisi, tata letak dll) Contoh Syntax dari CSS          p  {              background :  black ;              Color :  white ;              text-align :  center         } Dari Syntax diatas kita bisa membagi Anatomi (Bagian) d ari CSS : Selector =>>      p     Property =>>  Background, color, text-align Value =>> black, white, center   Selector ==> p  {     Property ==> background :  black <...
Read more

membuat Kiosk Menggunakan STB HG680P Debian Buster

Image
install os pilih yang debian buster 5.10 https://yadi.sk/d/pHxaRAs-tZiei/OLD/5.90/s9xxx/default ========= install kiosk =============== sebelumnya ganti dulu repo debian busternya seperti ini caranya menggunakan perintah nano untuk mengeditnya nano /etc/apt/sources.list ganti repo yg sebelumnya http://httpredir.debian.org/debian menjadi http://deb.debian.org/debian setelah itu install xorg openbox dan chromium apt-get install update apt-get install upgrade apt install xorg xserver-xorg-legacy openbox chromium dan install unclutter. fungsi unclutter agar menyembunyikan cursor pada saat tidak digunakan apt-get install unclutter setelah itu kita setting Xwrapper file nano -w /etc/X11/Xwrapper.config ubah bagian baris allowed_user allowed_users=anybody needs_root_rights=yes selanjutnya membuat startup script untuk pengguna kiosk. kita buat usernya dulu useradd -m kiosk-user setelah itu baru kita buat scriptnya gunakan perintah nano nano /opt/kiosk.sh edit s...
Read more