color:var(--kirmizi);
background-color:var(--mavi);
kodlarının yazılması gerekir.
Web Arayüz Programlama — Ünite 3 Soru-Cevap
Web Arayüz Programlama (BIL205U) soru-cevapları.
Aşağıda verilen HTML kod çalıştırıldığında WEB sayfası görüntüsü :
şeklinde olmaktadır. Bu kod içerisinde boş bırakılan yerleri en uygun biçimde nasıl doldurmak gerekir?
HTML Kod:
Farklı cihazlarda çalışacak CSS kodları için Bootstrap 5 sürümü ile ekran boyutları ve bu boyutlara ait kısaltmalar belirlenmiştir. Telefon ekranları ve büyük masaüstü ekranlar için bu kısaltmalar nelerdir?
Telefon ekranları : xs
Büyük Masaüstü ekranlar : xl
Geliştiriciler için hazırlanmış stil kurallarını içeren CSS çatısına ne ad verilir?
Bootstrap adı verilir.
Yazılan CSS kurallarınının ekran genişliği 550 px den küçük ekranlarda uygulanabilmesi için gereken kod nedir?
CSS Flexbox nedir ne için kullanılır?
CSS flexbox, öğelerin farklı ekran boyutları ve farklı görüntüleme cihazlarıyla kullanıldığında tahmin edilebilir şekilde davranmasını sağlamak için kullanılır. Konteynerdeki öğeler arasında alanı yerleştirmek, hizalamak ve dağıtmak için daha verimli bir yol sağlar.
Bir flexbox kullanabilmek için bir konteyner yaratıldığında bunu kullanmak için gereken kod nedir?
Display:flex
Flex kullanarak bir konteyner yaratmak için bir örnek veriniz. Bu örnekte HTML ve CSS kodları tanımlanmalıdır.
HTML
CSS
.ornek-container {
display:flex;
}
Flex-wrap ne işe yarar?
Tarayıcı genişliği değiştirildiğinde elemanların nasıl kaydırılacağını tanımlar.
Elemanları yerleştirirken flexbox özellikleri kaç gruba ayrılır, bunlar nelerdir?
Elemanları yerleştirirken kullanılan flexbox özellikleri kapsayıcı için olanlar ve elemanlar için olanlar olarak iki gruba ayrılır.
Elemanlar için kullanılan flexbox özellikleri nelerdir? Bunlardan üç tanesini yazmanız yeterli olacaktır.
Elemanlar için kullanılan flexbox özellikleri aşağıda verilmiştir.
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
Flexbox ile Grid arasında kullanım alanları bakımından fark nedir?
Tarayıcı genişliği değiştirildiğinde öğelerin nasıl kaydırılacağını tanımlayın Flexbox, özellikle site içindeki daha küçük alanlar için çok kullanışlı bir yerleşim aracıdır. CSS Grid, daha çok tüm sayfa için bir düzen aracıdır. Flexbox, öğeleri tek bir eksen boyunca yerleştirme konusunda üstün olsa da, Grid, hem yatay hem de dikey eksenli düzenler, yani ızgaralar için daha iyidir!
CSS Grid nedir?
Bir CSS Grid, iki boyutlu grid tabanlı düzenler oluşturmak için bir düzen sistemidir. Ekran boyutuna duyarlı düzenler oluşturmak için güçlü bir araçtır ve çok çeşitli farklı düzen türleri oluşturmak için kullanılabilir.
CSS Grid bağlamında bir grid kapsayıcının (container) ne olduğunu açıklayabilir misiniz?
Grid kapsayıcı, grid içeren bir öğedir. Tüm grid öğelerinin doğrudan ebeveynidir.
Aşağıda verilen HTML kodunda:
ifadeleri ne işe yaramaktadır?
HTML kod:
İçerisinde "box-" geçen ifadelerin 1 pixel kalınlığında çevresi olacağı, arka plan renginin tanımlandığı, yazı fontunun kalın olacağı ve bu "box-" için yazıların ortanmasını belirleyen biçim düzenleyicidir. Verilen Kodda 12 adet 3X4 grid için bu blok ismiyle başlayan ifadeler yani "box-1", "box-2", ... "box-12" için bu template kullanılacaktır.
Kapsayıcı elemenı blok yapısında grid yapmak için hangi komut kullanılır?
display:grid komutu kullanılır. Komut bu şekliyle blok yapısında olacaktır.
Gridleri diğer gridlerin içerisine yerleştirmek mümkün mü? Evet ise, nasıl?
Evet, ızgaraları diğer ızgaraların içine yerleştirmek mümkündür. Bu, grid-template-columns ve grid-template-rows'un CSS Grid özellikleri kullanılarak gerçekleştirilebilir. Her ızgara için sütun ve satır sayısını belirterek, iç içe ızgaraların genel düzeni kontrol edilebilir. Burada display:inline-grid ile inline yapıda grid oluşturmak mümkün.
2 x 3 lük bir grid oluşturabilmek için basit bir kod yazabilir misiniz?
Basit örnek kod :
.container{
display: grid;
grid-template-rows: 200px 200px;
grid-template-columns: 200px 200px 200px;
}
Aşağıda verilen kod çalıştırıldığında nasıl bir grid yapısı elde edilir?
Kod :
Aşağıdaki gibi bir grid yapısı elde edilir.
Aşağıda şekilde verilen 4 x 4 grid içerisindeki ".item-a" alanını tanımlayacak CSS kodu nedir?
.item-a {
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 4;
}
Aşağıda verilen grid için ".item-a" alanını
grid-column:<başlangıç> / <bitiş>
grid-row:<başlangıç> / <bitiş>
şeklinde ifade edecek CSS kodu nedir?
.item-a {
grid-column:3/5;
grid-row: 2/5;
}