CSS Layouting #1 : Display
•
76 likes•17,962 views
Setiap elemen HTML yang kita buat memiliki property css display, pada slide ini akan dibahas bagaimana masing-masing perilaku dari value pada properti display tersebut. value yang dapat digunakan adalah : - inline - inline-block - block - none slide bantuan untuk video youtube: https://youtu.be/VPaIdiPvWQM
Report
Share
Related slideshows
CSS Layouting #1 : Display
- 3. http://htmldog.com/guides/html/intermediate/spandiv/ tag pada HTML digunakan untuk memberikan ‘maksud’ / ‘arti’ pada sebuah konten (p untuk paragraf, h1 untuk heading utama, dll). Tag <div> dan <span> tidak memiliki ‘arti’ apapun, keduanya digunakan untuk mengelompokkan tag-tag HTML dan memberikan informasi terhadap tag-tag tersebut. “
- 4. <div>
- 9. <span>
- 17. CSS display
- 18. https://css-tricks.com/almanac/properties/d/display/ setiap tag pada HTML berada di dalam sebuah kotak. properti display pada CSS mengatur perilaku dari kotak tersebut. “
- 19. https://developer.mozilla.org/en-US/docs/Web/CSS/display setiap tag pada HTML memiliki nilai default untuk properti display.Tetapi kita juga dapat mengubah perilaku dari tag tersebut dengan mengganti value-nya. “
- 22. inline
- 23. inline • Elemen HTML yang secara default tidak menambahkan baris baru ketika dibuat
- 24. inline • Elemen HTML yang secara default tidak menambahkan baris baru ketika dibuat • Lebar dan tinggi elemennya sebesar konten yang ada di dalamnya
- 25. inline • Elemen HTML yang secara default tidak menambahkan baris baru ketika dibuat • Lebar dan tinggi elemennya sebesar konten yang ada di dalamnya • Kita tidak dapat mengatur tinggi dan lebar dari elemen inline
- 26. inline • Elemen HTML yang secara default tidak menambahkan baris baru ketika dibuat • Lebar dan tinggi elemennya sebesar konten yang ada di dalamnya • Kita tidak dapat mengatur tinggi dan lebar dari elemen inline • Margin dan padding hanya mempengaruhi elemen secara horizontal, tidak vertikal
- 27. elemen inline b, strong, i, em, a, span, sub, sup, button, input, label, select, textarea, … https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente
- 31. Tidak terpengaruh oleh width dan height
- 32. inline-block
- 33. inline-block • Tidak ada elemen yang secara default memiliki properti display: inline-block;
- 34. inline-block • Tidak ada elemen yang secara default memiliki properti display: inline-block; • Kita harus ubah secara manual properti tersebut
- 35. inline-block • Tidak ada elemen yang secara default memiliki properti display: inline-block; • Kita harus ubah secara manual properti tersebut • Perilaku dasarnya sama dengan elemen inline
- 36. inline-block • Tidak ada elemen yang secara default memiliki properti display: inline-block; • Kita harus ubah secara manual properti tersebut • Perilaku dasarnya sama dengan elemen inline • Perbedaanya, elemen inline-block dapat kita atur tinggi dan lebar-nya
- 38. Terpengaruh oleh width dan height
- 39. block
- 40. block • Elemen HTML yang secara default menambahkan baris baru ketika dibuat
- 41. block • Elemen HTML yang secara default menambahkan baris baru ketika dibuat • Jika tidak diatur lebar-nya, maka lebar default dari elemen block akan memenuhi lebar dari browser / parent-nya
- 42. block • Elemen HTML yang secara default menambahkan baris baru ketika dibuat • Jika tidak diatur lebar-nya, maka lebar default dari elemen block akan memenuhi lebar dari browser / parent-nya • Kita dapat mengatur tinggi dan lebar dari elemen block
- 43. block • Elemen HTML yang secara default menambahkan baris baru ketika dibuat • Jika tidak diatur lebar-nya, maka lebar default dari elemen block akan memenuhi lebar dari browser / parent-nya • Kita dapat mengatur tinggi dan lebar dari elemen block • Di dalam elemen block, kita dapat menyimpan tag dengan elemen inline, inline-block, atau bahkan elemen block lagi
- 44. elemen block h1-h6, p, ol, ul, li form, hr, div, … https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
- 46. none Digunakan untuk menghilangkan sebuah elemen
- 47. none
- 48. none
- 49. mengubah display
- 51. defaultnya block
- 52. defaultnya block Berubah menjadi inline