unslug tr: move

1 files changed, 153 insertions, 0 deletions

diff --git a/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html
new file mode 100644
index 0000000000..9da820f78a
--- /dev/null
+++ b/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -0,0 +1,153 @@
+---
+title: CSS'de öğeleri boyutlandırma
+slug: Öğren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS
+tags:
+  - Acemi
+  - Beginner
+  - CSS
+  - Eğitim
+  - Intrinsic size
+  - Learn
+  - boyutlandırma
+  - goruntu alanı birimleri
+  - maksimum boyut
+  - max size
+  - min size
+  - minimum boyut
+  - percentage
+  - sizing
+  - viewport units
+  - yüzde
+  - İç boyut
+translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+---
+<p>https://wiki.developer.mozilla.org/tr/docs/%C3%96%C4%9Fren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS$edit</p>
+
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Şimdiye kadar ki derslerde, CSS kullanarak bir web sayfasındaki öğeleri buyutlandırmanın çeşitli yollarıyla karşılaştık. Tasarımındaki özelliklerin ne kadar çok olacağını anlamak önemlidir ve bu derste, öğelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yollarını özetleyip, gelecekte size yardımcı olacak boyutlandırma ile ilgili birkaç terimi ele alacağız.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Ön koşullar:</th>
+   <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve  HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Amaç:</th>
+   <td>CSS'de nesneleri boyutlandırmanın farklı yollarını anlamak.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Nesnelerin_doğal_veya_içsel_boyutu">Nesnelerin doğal veya içsel boyutu</h2>
+
+<p>HTML öğeleri, herhangi bir CSS'den etkilenmeden önce ayarlanmış doğal bir boyuta sahiptir. Görüntü buna iyi bir örnektir. Bir <code>&lt;image&gt;</code>'nin sayfaya gömdüğü görüntü dosyasında, tanımlı bir genişlik ve yükseklik vardır. Bu boyut, görüntünün kendisinden gelen <strong>gerçek boyut</strong> olarak tanımlanır.</p>
+
+<p>Bir sayfaya bir resim yerleştirirsen ve yüksekliğini, genişliğini <code>&lt;img&gt;</code> etiketi veya CSS üzerindeki niteklikleri kullanarak değiştirmezsen, görüntü iç boyut kullanılarak görüntülenir. Dosyanın boyutunu görebilmen için aşağıdaki örnekte görüntüyü bir çerçevenin içerisinde gösterdim.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
+
+<p>Boş bir {{htmlelement("div")}}, kendine ait bir boyuta sahip değildir. HTML'ye içeriği olmayan bir {{htmlelement("div")}} ekleyip, buna da bir kenarlık verirsen, sayfada düz bir çizgi görürsün. Bu, öğenin daraltılmış kenarlığıdır — öğemize yükseklik verebilecek bir içerik yoktur. Aşağıdaki örneğimizde düz çizgi, içinde bulunduğu kutunun sınır genişliğine kadar uzanır, çünkü bu bir blok seviyesi öğesidir, size aşına olmaya başlaması gereken bir davranış. İçerik olmadığı için yüksekliği(veya blok boyuntunda boyutu) yoktur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
+
+<p>Yukarıdaki örnekte, boş öğenin içine biraz metin eklemeyi deneyin. Kenarlık şimdi bu metni içerir, çünkü öğenin yüksekliği içerik tarafından belirlenir. Dolayısıyla <code>&lt;div&gt;</code> blok boyutundaki boyutu içeriğin boyutundan gelmektedir. Yani içeriğindeki öğenin gerçek boyutuyla öğemizin boyutu belirlenir.</p>
+
+<h2 id="Belirli_bir_boyut_belirleme">Belirli bir boyut belirleme</h2>
+
+<p>Elbette tasarımımızdaki öğelere belirli bir boyut verebiliriz. Bir öğenin boyutunu biz belirtirsek buna <strong>dışsal boyut</strong> denir. Yukarıdaki <code>&lt;div&gt;</code> örneğimizi ele alalım — ona belirli bir {{cssxref("width")}} ve {{cssxref("height")}} nitelikleri ile boyutunu belirttiğimizde içeriğine, ne gelirse gelsin boyut sabit kalacaktır. <a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşma konusundaki dersimizde</a> öğrendiğimiz gibi, sabit bir yüksekliğe sahip öğenin, alanına sığamayacak kadar büyük bir içerik gelirse, bu içeriğin öğenin sınırları dışına taşmasına neden olur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
+
+<p>Taşma sorunu nedeniyle, web tasarımı yaparken öğelere vereceğin yüksekliklere çok dikkat etmelisin.</p>
+
+<h3 id="Yüzdeler_kullanma">Yüzdeler kullanma</h3>
+
+<p>Yüzdeler birçok yönden uzunluk birimleri gibi davranır ve <a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">değerler ve birimlerle ilgili derste</a> tartıştığımız gibi, genellikle uzunluklarla birbirinin yerine kullanılabilirler. Bir yüzde kullanırken, yüzdenin neyi baz alacağını bilmen çok önemlidir. Kutu içinde kutu olması durumunda, alt kutunun genişliğini yüzde ile belirtirsen, alt kutunun genişliği üst kutunun genişliğinin yüzdesi olacaktır.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
+
+<p>Bunun nedeni, yüzdelerin kapsayıcı bloğunun boyutuna göre çözülmesidir. <code>&lt;div&gt;</code>'e yüzde uygulanmaz ise, blok düzeyinde bir öğe olduğu için, içinde bulunduğu alanın %100'ünü kaplar. %1 genişlik verirsek, bu normalde dolduracağı alanın %1 olur.</p>
+
+<h3 id="Yüzde_kenar_boşlukları_ve_dolgu">Yüzde kenar boşlukları ve dolgu</h3>
+
+<p>Eğer <code>margins</code> ve <code>padding</code> niteliklerini yüzdelik olarak ayarlandığında, bazı garip davranışlar sergiler. Aşağıdaki örnekte bir kutumuz var. İç kutuya {{cssxref("margin")}}  %10 ve {{cssxref("padding")}} %10 değerlerini verdik. Kutunun üstündeki ve altındaki dolgu ve kenar boşluğu, sol ve sağdaki kenar boşluğuyla aynı boyuttadır.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
+
+<p>Mesela, üst ve alt kenar boşluklarını öğenin yüksekliğinin bir yüzdesi, sol ve sağ kenar boşluklarının öğenin genişliğinin bir yüzdesi olmasını bekleyebilirsin. Ancak durum bu şekilde değildir!</p>
+
+<p>Yüzdelik cinsinden kenar boşluğu ve dolgu niteliğini tanımladığında, yüzdelik ebeveynin <strong>satır içi boyutundan</strong> hesaplanır — yatay bir dilde çalışırken genişlik istenilmeyen bir sonuç verecektir. Bu nedenle, tüm kenarların kenar boşlukları ve dolgu genişlikleri eşit olacaktır — tüm kenarlara %10 değeri atandığı için. Yüzdelikleri bu niteliklerde kullandığında, bu davranışa dikkat etmen gerekir.</p>
+
+<h2 id="min-_ve_max-_boyutlar">min- ve max- boyutlar</h2>
+
+<p>Her şeye sabit bir boyut vermenin yanı sıra, CSS'de bir öğeye alabilecekleri minimum ve/veya maksimum bir boyutta tanımlayabiliriz. Değişken miktarda içerik barındırabilecek bir kutunuz varsa ve her zaman <em>en azından</em> belili bir yükseklikte olmasını istersen, {{cssxref("min-height")}} niteliğiyle bunu ayarlayabilirsin. Kutunun içeriği boş dahi olsa en azından bu boyuta sahip olacaktır. Fakat kutunun içeriği minimum alanın taşıyabileceğinden daha fazla içerik almaya başladığında, kutunun boyutları içeriği kapsayabileceği boyuta genişleyecektir.</p>
+
+<p>Aşağıdaki örnekte, her iki kutununda {{cssxref("min-height")}} niteliği 150 piksel olarak tanımlandı. Soldaki kutu 150 piksel yüksekliğindedir; sağdaki kutu daha fazla alan gerektiren içeriğe sahip olduğu için 150 pikselden daha uzundur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
+
+<p>Bu teknik değişken içeriğe sahip olan öğelerde taşmayı önelemek için çok kullanışlıdır.</p>
+
+<p>Bunun diğer bir yaygın kullanımı ise görüntüleri kendi iç genişliklerinde görüntülemek için yeterli alanın olmadığı durumlarda, görüntünün gösterilmek istenilen kutunun genişliğinden daha fazla genişleğe sahip olmasını engellemek için {{cssxref("max-width")}} niteliğini kullanmaktır.</p>
+
+<p>Misal; <code>width: 100%</code> olarak tanımladığında görüntü içinde bulunduğu kutunun genişliğinden daha fazla olmayacaktır fakat görüntü kutunun genişliğinden küçük oluduğu durumlarda görüntü ebeveyninin genişliği kadar bir genişliğe sahip olması istendiği için büyütülecekti ve bu büyüme görüntünün pikselli görünmesine sebeb olurdu.</p>
+
+<p>Bunun yerine <code>max-width: 100%</code> tanımını kullanırsan, görüntü ebeveyninin genişliğinden daha büyük olsa bile ebeveyninin genişliğinin %100'ne geldiğinde duracaktır ve ebeveyninin genişliğinden küçük olması durumunda, görüntünün boyutu ebeveyninin boyutuna genişletilmeyip içsel boyutunda görüntüleneceğinden görüntüde bir bozulma olmayacaktır.</p>
+
+<p>Aşağıdaki örnekte aynı resmi üç kez kullandık. İlk görüntüye <code>width: 100%</code> tanımlaması yaptık ve kendisinden daha büyük bir kutu içerisine yerleştirdik. Bu nedenle kutunun genişliğine genişledi ve görüntünün pikselleri görünür hale geldi. İkinci görüntü <code>max-width: 100%</code> tanımlası yapıldı, bu nedenle kutuyu duldurmak için genişlemiyor sadece kendi iç boyutu kadar genişliyor. üçüncü kutu yine <code>max-width: 100%</code> tanımlası yapıldı ve kendisinden daha küçük genişliğe sahip bir kutunun içerisine yerleştirildi; bu durumda kutuya sığmak için nasıl küçüldüğünü görebilirsin.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
+
+<p>Bu teknik, görüntüleri <em>duyarlı</em> hale getirmek için kullanılır, böylece daha küçük bir kutuda görüntülendiğinde uygun bir şekle bürünür. Büyük boyutlu resimleri görüntülemek için bu tekniği kullanmayın, bunun yerine büyük resimleri tarayıcı için uygun boyutta küçültmelisin. Görsellerin, tasarımda gösterildikleri boyuttan daha büyük olması, görsellerin indirilme süresini uzatacağından sitenin yavaşlamasına neden olur ve kotalı bir bağlantıya sahip kullanıcılara daha fazla ücrete mâl olabilir.</p>
+
+<div class="blockIndicator note">
+<p><strong>Not</strong>: <a href="/tr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Duyarlı görüntüleme teknikleri</a> hakkında daha fazla bilgi edinin.</p>
+</div>
+
+<h2 id="Görüntü_alanı_birimleri">Görüntü alanı birimleri</h2>
+
+<p>Bir siteyi görüntülemek için kullandığın tarayıcının, web sayfasını görüntülediği pencerenin de bir boyutu vardır. CSS'de, bu alanla da ilgili birimlerimiz de vardır — görüntüleme alanı genişliği(<code>vw</code>) ve görüntüleme alanı yüksekliği(<code>vh</code>) birimi. Bu birimleri kullanarak, kullanıcının görüntüleme alanına göre herhangi bir öğeyi boyutlandırabilirsin.</p>
+
+<p><code>1vw</code> görüntüleme alanının genişliğinin %1'ine, <code>1vh</code>'de görüntüleme alanının yüksekliğinin %1'ine eşittir. Bu birimleri kutuları, metinleri boyutlandırmak için kullanabilirsin. Aşağıdaki örnekte 20vh ve 20vw boyutlarında bir kutumuz var. Kutu içerisinde <code>font-size</code>'ı 10vh olan bir "A" harfi var.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
+
+<p><strong>Eğer <code>vh</code> ve <code>vw</code> değerlerini değiştirirsen, kutunun ve yazı tipinin boyutuda değişecektir. Ayrıca görüntüleme alanının boyutunuda değiştirilmesi, kutu ve yazı tipinin boyutunun görüntüleme alanına bağladığımız için bunlarında boyutu değişecektir. Görüntüleme alanın değiştirildiğinde örnekteki boyutlarında değişmesini istiyorsan <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">örneği yeni bir pencerede açın</a>(yukarıdaki örnek <code>&lt;iframe&gt;</code> içerisinde gömülü olduğu için görüntüleme alanı olarak gömülü olduğu pencerenin değerlerine göre hareket edecektir)</strong></p>
+
+<p>Nesneleri görüntüleme alanına göre boyutlandırmak tasarımlarında faydalı olabilir. Örneğin, içeriğinin geri kalanından önce tam sayfa görüntülemek istediğin bir bölümün olmasını istiyorsan, sayfanın bu bölümünün yüksekliği <strong>100vh</strong> olarak tanımlarsan,  içeriğin geri kalanı sayfanın altına itilir ve sayfan açıldığında sadece istediğin bölüm gözükür. Diğer içerikler için sayfanın kaydırılması gerekir.</p>
+
+<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2>
+
+<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Becerilerini test et: Boyutlandırma</a>.</p>
+
+<h2 id="Özet">Özet</h2>
+
+<p>Bu ders de web'deki öğeleri boyutlandırırken karşılaşabileceğin bazı temel sorunların bir özetini anlattım. <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Düzenine</a> geçtiğinde, farklı düzen yöntemlerinde uzmanlaşmanda boyutlandırma çok önemli hale gelecektir, bu nedenle devam etmeden önce buradaki kavramları iyi anlamaya çalışmalısın.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Bu_kısımda">Bu kısımda</h2>
+
+<ol>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a>
+  <ul>
+   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li>
+   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li>
+   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li>
+   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li>
+  </ul>
+ </li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li>
+ <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li>
+</ol>