MonthOcak 2019

Padding ve Margin Arasındaki Fark Nedir ?

Merhaba arkadaşlar bu yazımda sizlere genellikle yeni yeni CSS öğreneneler arasında anlaşılması zor olan bir konu olan Padding ve Margin arasında ki farklardan bahsedeceğim.

Bu yazımda bu konuyu daha detaylı anlamanız için 3 başlık adı altında inceleyeceğim.

  • Padding Nedir ?
  • Margin Nedir ?
  • Padding ve Margin Arasındaki Fark Nedir ?

Padding Nedir ?

Padding Nedir ?

Padding, border’ın içindeki elementlere boşluk vermeyi amaçlar. Padding özelliğine tam olarak erişebilmek için şu özellikler vardır. Bu özellikler

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Bu özelliklerin hepsinde belirli durumlar her zaman geçerlidir bu durumlar

  • uzunluğunu px, pt, cm vb. gibi özellikler ile belirlenebilir
  • % işareti ile elementin genişliğine göre bir değer verebilirsiniz.
  • Bir elemente verilen özellik o elementin bütün alt elementleri içinde geçerlidir.

Margin Nedir ?

Margin ise bir elementin border alanının dışından boşluk bırakmasını sağlar. Margin özelliklerini tam kontrollü kullanabilmek için şu 4 özelliği kullanabiliriz.

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Bu özellikler belirli benzerlikleri vardır bunlar

  • auto, web tarayıcısının yaptığı hesaplama ile uzunluğu belirlenir.
  • uzunluk değerleri px, pt, cm vb. uzunluk birimleri ile belirtilebilinir.
  • % işareti elementin genişliğine göre bir değer alır.
  • Bir elemente verilen özellik o elementin tüm alt elementlerine de uygulanır.

Padding ve Margin Arasındaki Fark


Padding ve Margin Arasındaki Farklar
Padding ve Margin Arasındaki Farklar

Padding ile margin arasında ki en iyi farkı aslında bu fotoğraf anlatıyor ama hine de daha iyi anlatabilmek için sizlere şöyle açıklayabilirim.

Padding ile bir elementin içinde ki içeriğe boşluk verdirirken. Margin ise direkt olarak elemente dış kısımlarından boşluk vermesini sağlar.

Bu yazımın da sonuna gelmişken sizlere Padding ve Margin’in neler olduğunu ve Padding ve Margin arasındaki farkı anlatmış oldum.

GitHub da Kullanılan En Popüler Programlama Dilleri

Bu yazım da sizlere GitHub’un her yıl yayınladığı Octoverse raporlarından GitHub kullanıcıları arasında ki en popüler 10 Programlama Dili Listesinden bahsedeceğim.

10-) Ruby

Ruby, sade ve basitliğe odaklanmış dinamik ve açık kaynak kodlu bir yazılım dilidir. Günlük olarak kullandığımız bir çok uygulama Ruby ile geliştirilmiştir. Ruby ile Web uygulamaları geliştirmek için yapılan Ruby on Rails frameworkü ile Twitch, SoundCloud, Hulu, Zendesk, Square ve GitHub’un kendisi dahil Ruby ile geliştirilmiştir.

9-) C

1970’li yıllarda geliştirilmeye başlanan ve çok eski programlama dillerinden biri olan C. Hala çok yaygın kullanılan bir programlama dilidir

😎 Shell

Shell, işletim sisteminde belirli komutların çalışması için geliştirilen bir yazılım dilidir. Shell, dosyalar üzerinde işlemler yapabilir, programları işleyebilir ve çalıştırabilir. Özellikle sistem yöneticileri arasında aşırı popülerdir.

7-) TypeScript

Typescript, Javascript’in süper güçlü haline benzetebiliriz aralarında ki tek farkı genel olarak geniş çaplı projelerde kullanılabilir bir haldedir.

6-) C#

C#, Microsoft tarafından geliştirilmeye başlanmış ve kurumsal uygulamalar geliştirmek için oluşturulmuştur ve OOP programlama dili Java’ya aşırı benzemektedir.

5-) C++

C++ 1970’lere dayanan geliştirilmeye başlayan ve genel olarak acemi olanlara ders olarak verilir. C++ hala aşırı popüler programlama dillerinden ve hala bir çok işletim sistemlerinin, web tarayıcılarının ve oyunların çekirdek dili olarak kullanılmaya devam etmektedir.

4-) PHP

PHP, dinamik ve interaktif Web Sayfaları yapmak için kullanılan bir programlama dilidir. Facebook ve Yahoo gibi büyük internet siteleri PHP kullanılarak geliştirilmiştir fakat bir çok geliştiricilerinden en kötü programlama dillerinden biri olarak adlandırıyorlar ve bunu daha anlatmak için PHP’ye “Tekerleksiz Bisiklet” olarak tanımlıyorlar.

3-) Python

Python, gittikçe büyümeye devam eden bir üst seviye programlama dilidir. Başlangıç için öğrenilmesi kolay olan bir programlama dilidir. Genel olarak makine öğrenmesi ve veri analizi gibi işlemler için kullanılır.

2-) Java

Java, Sun Microsystems tarafından geliştirilen ve şu anda Oracleye ait olan bir OOP programlama dilidir. Veritabanı, Android uygulamaları ve web siteleri geliştirmek için kullanılır.

1-) Javascript

Javascript, GitHub’da en çok tercih edilen bir programlama dillerdir. Javascript genel olarak Web Sitelerinden tasarımlarını daha aktif olarak kullanılması için geliştirilmiştir fakat son zamanlarda interaktif eklentiler ve websiteleri geliştirilmek için kullanılır. Bunun haricinde geliştirilen Frameworkler ile native uygulama geliştirmek için bile kullanılmaya başlanmıştır ve şunu söylemek gerekirse çok benzetilse bile Javascript’in Java ile isim benzerliği haricinde herhangi bir benzerliği yoktur.

Responsive CSS Grid Layout

Merhaba arkadaşlar bu yazımda sizlere kendinize ait Responsive CSS Grid Layout’unuzu yapmayı göstereceğim.

Öncelikle ihtiyacımız olan şey normalize.css dosyası Normalize CSS’in ne olduğunu ileri ki zamanlarda sizlere anlatacağım. Normalize CSS indirmek buraya tıklayınız.

Normalize CSS’i sisteminize ekledikten sonra kendi oluşturduğunuz bir CSS dosyasını da HTML kodlarınıza ekleyin ve head taglerinizin içine şu kodları eklemeyi unutmayın.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Oluşturacağımız Grid Sistemi HTML Olarak şu şekilde olacaktır.

<div class=”row”>

<div class=”col one”></div>

<div class=”col one”></div>

<div class=”col one”></div>

<div class=”col one”></div>


<div class=”col one”></div>


<div class=”col one”></div>

<div class=”col one”></div>


<div class=”col one”></div>


<div class=”col one”></div>

<div class=”col one”></div>


<div class=”col one”></div>


<div class=”col one”></div>

</div>

Şeklinde olacaktır yani 1 satırda maksimum 12 adet kolon bulunmak zorundadır.

Şimdi yapacağımız Grid Layout’un asıl kısmı olan CSS kısmına başlayalım ve en sonunda belirli hesaplamalar nasıl yapılır ondan bahsedeyim. Sizlere

CSS

*{
box-sizing: border-box;
}

body{
width: 100%;
min-width:320px;
max-width: 1200px;
margin: 0 auto;
}

.row{
padding: 20px;
width: 100%;
min-height: 1px;
float: left;
}

.col{
background: #FF0000;
min-height: 40px;
border-radius: 8px;
margin-left: 2.4%;
margin-right: 2.4%;
display: inline-block;
float: left;
}

.col:first-child{
margin-left: 0px;
}
.col:last-child{
margin-right: 0px;
}

.col.one{width: 3.93%;}
.col.two{width: 12.66%}
.col.three{width: 21.4%;}
.col.four{width: 30.13%}
.col.five{width: 38.867%;}
.col.six{width: 47.6%;}
.col.seven{width: 56.333%;}
.col.eight{width: 65.07%;}
.col.nine{width: 73.8%;}
.col.ten{width: 82.533%;}
.col.eleven{width: 91.27%;}
.col.twelve{width: 100%;}

@media (max-width: 768px){
.col{
width: 100% !important;
margin: 5px 0px 5px 0px;
}
}

Tüm CSS kodlarımız böyleyken teker teker sizlere bu kodları açıklamaya başlayalım.

*{
box-sizing: border-box;
}

*işareti tüm elemanların içindeki işlemlerden etkileneceğini temsil eder.

box-sizing, bir elementin genişliği ve uzunluğunun nasıl hesaplanacağını temsil eder.

box-sizing’i border-box olarak tanımlamak ise elementin genişliği ve uzunluğunun içinde ki içerik, padding ve border değerlerinin de eklenerek hesaplanmasını sağlar.

body{
width: 100%;
min-width:320px;
max-width: 1200px;
margin: 0 auto;
}

body, elementinde yaptığımız bu düzenlemeleri incelersek

Genişliğini %100 yapıyoruz böylece her zaman bulunduğu elementin maksimum genişliğinde olmasını sağlıyoruz.

Body elementinin minimum genişliğini 320px ve maksimum genişliğini ise 1200 px olarak ayarlıyoruz.

margin:0 auto; ise tüm elemanların ortalanmasını sağlıyor.

.row{
padding: 20px;
width: 100%;
min-height: 1px;
float: left;
}

row classına sahip elementlere verdiğimiz özellikleri incelersek

20 px bir padding veriyoruz böylece içerdeki tüm elemanlar yukarıdan, aşağıdan, sağdan ve soldan 20px ötelenmiş oluyor.

Hine genişliğini %100 yapıyoruz böylece içinde bulunduğu alanın genişliği kadar geniş olmasını sağlıyoruz.

Olabileceği minimum yüksekliği 1px veriyoruz ve float: left ile de sola yapıştırılmasını sağlıyoruz.

.col{
background: #FF0000;
min-height: 40px;
border-radius: 8px;
margin-left: 2.4%;
margin-right: 2.4%;
display: inline-block;
float: left;
}

col classına sahip elementlere verdiğimiz özellikleri incelersek,

arka plan rengi sadece doğru çalışıp çalışmadığını anlamak için

minimum uzunluğunu 40px olarak ayarlıyoruz.

border-radius ile köşelerinin kısımlarının dik olarak değil daha eğimli olmasını sağlıyoruz.

margin-left: 2.4% ve margin-right: 2.4% kısmını hesaplamaları anlatırken açıklayacağım.

display: inline-block kodu ise görünümünü inline-block olarak yani bir satır boyunca her elemanın yan yana olmasını amaçlıyor.

float: left ise hine sola doğru yatırılmasını sağlıyor.

.col:first-child{
margin-left: 0px;
}
.col:last-child{
margin-right: 0px;
}

Bu kodlar row’un içindeki col classına sahip ilk elemanın margin-left’ini 0px ve son elemanın margin-right özelliğini 0px e eşitliyor böylece en baştaki ve en sondaki elemanlar direkt olarak içinde bulundukları elemanın en köşelerinde olmuş oluyorlar.

Şimdi asıl karmaşık olan kısma geliyoruz önce kodları daha sonra ise hesaplamanın nasıl yapıldığını anlatacağım.

.col.one{width: 3.93%;}
.col.two{width: 12.66%}
.col.three{width: 21.4%;}
.col.four{width: 30.13%}
.col.five{width: 38.867%;}
.col.six{width: 47.6%;}
.col.seven{width: 56.333%;}
.col.eight{width: 65.07%;}
.col.nine{width: 73.8%;}
.col.ten{width: 82.533%;}
.col.eleven{width: 91.27%;}
.col.twelve{width: 100%;}

Bu kısım aslında en karmaşık olan kısım önce bir fotoğraf ile nasıl bir görüntümüz olduğunu göstereyim

İlk başta verdiğim HTML kodların dan bu tasarım ortaya çıkacaktır. Siyah olarak çizdiğim çizgiler ise her bir margin-left ve margin-right değerleridir. Hatırlıyorsanız bunlara %2.4 değerlerini vermiştik. Şimdi çizdiğim her çizgi için 2.4 olarak kabul edip toplarsam 52.8 değerini ve toplam sonucu 100’den çıkartırsam. 47.2 gibi bir değer çıkar bunu da 12’ye bölersek 3.93 değeri çıkar.

Şimdi burada yaptığımız şey şu tüm satırın genişliği %100 ve biz %100’den tüm margin-left ve margin-right değerlerini çıkartırsak aslında bu 12 siyah karenin kapladığı genişliği % değerini bulmuş oluyoruz daha sonra elde ettiğimiz değeri toplam kare miktarına bölersek tek 1 karenin kapladığı genişliği % olarak bulmuş oluyoruz. Yani eğer margin-left ve margin-right değerleri %2.4 den farklı olsaydı yukarı da yazmış olduğum tüm kodlar daha farklı olacaktı.

Şimdi son kısım olan bunları responsive hale getirme kısmına gelelim burada devreye @media kodları giriyor.

@media (max-width: 768px){
.col{
width: 100% !important;
margin: 5px 0px 5px 0px;
}
}

Burada yaptığımız işlem aslında basit kullandığımız cihaz da genişliğimiz 768px ve altındaysa col classına sahip elementlere şu işlemi uyguluyor.

genişliklerini alabilecekleri maksimum genişliğe eşitliyoruz yani artık yan yana değil de alt alta olmaya başlıyorlar daha sonra margin-top: 5px margin-right:0px margin-bottom: 5px ve margin-left: 0px’miş gibi gözükmesini istedik. Yukarıda verdiğim HTML kodu örneği yukarıda bahsettiğim şartlar sağlandığında

şeklinde gözükecektir. Yani her element sanki col twelve gibi davranmaya başlayacaktır.

Bu yazımda kendimize özel Responsive CSS Grid Layout’u oluşturmuş olduk. Bu konuda ki bazı hesaplamaların nasıl hesaplandığından bahsettik ve bu sistemin nasıl responsive hale getirebileceğimizden bahsettik.

Bu yazımı beğendiyseniz ve CSS hakkında yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz.

RGB’den Hex’e Çevirme (RGB to Hex)

Bu yazımda sizlere RGB Renk Kodunu Hex Renk koduna çevirmekten bahsedeceğim yani kısaca RGB to Hex işlemini yapacağız. Öncelikle sizlere RGB Renk Kodlarının nasıl bir kombinasyona sahip olduklarından bahsetmek gerekirse.

RGB Renk Kodu

RGB Renk Kodları, kırmızı, yeşil ve mavinin kombinasyonları kombinasyonu ile hesaplanır.

(R,G,B)

Kırmızı, Yeşil ve Mavi, renklerini 0-255 arasında ki tam sayılar ile tanımlıyoruz.

HEX Renk Kodu

Hex Renk Kodu, 6 haneden oluşan 16’lık sistemde çalışır.

Oluşturduğumuz HEX Renk Kodu

RRGGBB şeklinde oluşturulur.

  • İlk 2 hane kırmızı rengin 16’lık sistemdeki halini temsil eder.
  • Ortadaki 2 hane yeşil rengin 16’lık sistemdeki halini temsil eder.
  • Son 2 hane mavi rengin 16’lık sistemdeki halini temsil eder.

RGB to Hex

  • Kırmızı, yeşil, mavi renklerin sayılarını 10’luk sistemden 16’lık sisteme çevirilir.
  • Çevirdiğimiz sayıları RRGGBB şeklinde yan yana yazarsak RGB to Hex işlemini tamamlamış oluruz.

Örnek 1

(255, 0, 0) renk kodunu Hex Renk koduna çevirmeye çalışalım.

Kırmızı

10’luk sistemde 255’i 16’lık sistemde FF olarak tanımlanır.

Yeşil

10’luk sistemde 0’ı 16’lık sistemde 00 olarak tanımlanır.

Mavi

10’luk sistemde 0’ı 16’lık sistemde 00 olarak tanımlanır.

Sonuç;

Sonuç olarak elimizde Kırmızı için FF, Yeşil için 00, Mavi için 00 vardır.

HEX Renk kodları RRGGBB olarak tanımlandığına göre (255,0,0) FF0000 olarak tanımlanacaktır.

RGB to Hex
RGB to Hex

Bu yazımda sizlere RGB kodunu Hex koduna çevirmiş olduk yani RGB to Hex işlemini yapmış olduk. Bu yazımı beğendiyseniz ve diğer yazılarımı merak ediyorsanız tıklayabilirsiniz.