İlginizi Çekebilir
  1. Ana Sayfa
  2. Nasıl Yapılır?

CSS Layout Nedir?

CSS Layout Nedir?
1
+ - 0

CSS Layout Temel Bilgiler

Bu yazımızda CSS Layout (Sayfa Düzeni) bahsetmeye çalışacağız. CSS kendi içerisinde bir çok konuya ayrılan fazla önemsenmeyen ama en önemsenmesi gereken teknolojidir. Diğer yazılım teknolojilerinde de olduğu gibi devamlı kendini güncelleyen ve kodlama yapan kişilerin işlerini kolaylaştıran bir teknolojidir. Farklı ekran ayarları, konumlandırma, flexbox ve CSS ızgarası gibi modern düzen araçları hakkında kısa bilgiler vereceğiz. Detaylı bilgilere ulaşmak için konu başlıkları arasında dolaşarak detaylı bilgi alabilirsiniz.

Ön Koşullar

CSS Layouts (Sayfa düzenlerini) anlamak ve detaylı araştırma yapabilmek için aşağıdaki başlıklar ile ilgili ufak da olsa bilgi sahibi olmanız sizin yararınıza olabilir.

  1. Temel HTML bilgisi
  2. Telem CSS bilgisi

CSS Sayfa Düzenleri Nelerdir?

CSS geliştikçe, Flexbox ve CSS Izgara Düzenleri de dahil olmak üzere mizanpajlar üzerinde kontrol için yeni ve güçlü özellikler eklendi. Ancak, position, floatsve çok multi-column layout gibi eski düzen teknikleri hala çok kullanışlıdır ve kesinlikle CSS geliştiricisinin cephaneliğinin bir parçası olmalıdır. Flexbox ve CSS Grid Layout, küçük web sayfaları çapında düzeni işlemek için harikadır, ancak karmaşık düzen ihtiyaçlarının üstesinden gelmek için her zaman kullanışlı değildir.

css layout

Çeşitli CSS düzenleri şunlardır;

  • Normal flow
  • Flexbox
  • Grids
  • Floats
  • Positioning
  • Multiple-Column Layout

Normal Flow (Normal Akış)

Normal akış, varsayılan yerleşimdir.Bunda, elemanlar kendilerini normal bir şekilde düzenler ve kayan nokta, konumlandırma vb. özellikler buna uygulanmaz.

Basit kullanım durumları için kullanılır, ancak karmaşık düzen için bu davranışın diğer düzenler kullanılarak değiştirilmesi gerekir. Default olarak elementler yan yana gelecekse inline, bütün bir satırı kaplayacaksa block olarak tanımlanır.

Örneğin, <div>, <p>, ve <li> blok öğelerdir ve tüm satırı kendilerine alır ve sonraki öğeleri sayfa akışında yeni bir satıra iter.

<strong>, <em>, <span> satır içi öğelerdir ve sayfada aynı satırda yan yana akar.

Flexbox (Esnek Kutu)

Flexbox, öğeleri satırlar veya sütunlar halinde yerleştirmek için tek boyutlu bir yerleşim yöntemidir. Öğeler, ek alanı doldurmak için esner ve daha küçük alanlara sığacak şekilde küçülür. Flexbox konusunu ayrıca bir yazı olarak buradan inceleyebilirsiniz.

Grids (Izgaralar)

Grid düzeni iki boyutlu manipülasyon için kullanılır. Bunu sağlamak için satırlar ve sütunlar kullanır. Float ve konumlandırma kullanımını sınırlayarak web sayfalarını tasarlamayı kolaylaştırır. Sayfadan sayfaya geçerken öğelerin taşmadığı tasarımlar oluşturmamıza yardımcı olarak, web sitelerimizde daha fazla tutarlılık sağlar ve onu duyarlı hale getirir. Buradan detaylı bilgilere ulaşabilirsiniz.

Float

Başlangıçta metin blokları içinde kayan resimler için oluşturulan float özelliği, web sayfalarında birden çok sütun düzeni oluşturmak için en sık kullanılan araçlardan biri haline geldi. Flexbox ve Grid’in ortaya çıkmasıyla orijinal amacına geri döndü.

Position (Konumlandırma)

Konumlandırma, öğeleri normal belge düzeni akışından çıkarmamıza ve farklı davranmalarına olanak tanır. Öğelerin ekrandaki konumunu ayarlamamıza yardımcı olur. Örneğin sabit gezinme çubukları, aşağı kaydırdığımızda bile üstte sabit kalır.

Multi-Column Layout (Çoklu Sütun Düzeni)

Çok sütunlu düzen belirtimi, bir gazetede görebileceğiniz gibi içeriği sütunlara yerleştirme yöntemi sunar.

CSS sayfa düzenleri hakkında internet sayfalarında kafa karıştırıcı nitelikte bilgiler yer alıyor. Nereden başlayacağınızı bilmiyorsanız yukarıdaki konu başlıklarından yola çıkarak incelemelere başlayabilirsiniz.

Yazar Hakkında

Bu Yazıyı Yorumla