1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
title: 'Becerilerinizi test edin: Boyutlandırma'
slug: Öğren/CSS/CSS_yapi_taslari/Sizing_tasks
tags:
- Acemi
- Beginner
- CSS
- Example
- Örnek
translation_of: Learn/CSS/Building_blocks/Sizing_tasks
---
<div>{{LearnSidebar}}</div>
<div></div>
<p>Bu görevin amacı <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de Öğeleri Boyutlandırma</a> dersinde incelediğimiz bazı bazı değerler ve birimler hakkındaki öğrendiklerinizi kontrol etmenize yardımcı olmaktır.</p>
<div class="blockIndicator note">
<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanılması da yararlı olabilir.</p>
<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p>
</div>
<h2 id="Birinci_Görev">Birinci Görev</h2>
<p>Bu görevde iki kutunuz var. İlki, yüksekliğin en az 100 piksel olacak şekilde boyutlandırılmalıdır, kutu, içerik alanına sığabilecek miktardan daha az içeriğe sahip olsada bile bu boyutu korumalıdır. Ayrıca kutunun içerik alanına sığabilecek miktardan daha fazla içerik girildiğinde, içerik kutunun sınırlarını aşmamalıdır. Taşma engellenecek.</p>
<p>İkinci kutu 100 piksel yüksekliğinde sabitlenmelidir, böylelikle içeriğinin alabileceğinden fazla içerik alırsa taşma gerçekleşecektir.</p>
<p><img alt="Two boxes one with overflowing content" src="https://mdn.mozillademos.org/files/17140/mdn-sizing-height-min-height.png" style="height: 551px; width: 746px;"></p>
<p>Aşağıdaki örneği resimdeki gibi görünebilemesi için kodu düzenleyin:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}</p>
<div class="blockIndicator note">
<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/height-min-height-download.html">Kaynak Kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>
<h2 id="İkinci_Görev">İkinci Görev</h2>
<p>Bu görevde başka bir kutu içeren bir kutu vardır. Sizin göreviniz, iç kutuyu dış kutunun geniliğinin %60'ı kapsacak şekilde tanımlamaktır. {{cssxref("box-sizing")}} niteliği {{cssxref("border-box")}}olarak ayarlanmıştır; bu dolgu ve kenarlığın toplam genişliğe dahil edildiği anlamına gelmektedir. Ayrıca, bu yüzdenin hesaplanacağı boyut olarak genişliği (veya satır iyi boyutu) kullanarak iç kutu dolgusunu %10 olarak tanımlamalısınız.<img alt="A box with another box nested inside" src="https://mdn.mozillademos.org/files/17141/mdn-sizing-percentages.png" style="height: 274px; width: 720px;"></p>
<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/percentages-download.html">kaynak kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>
<h2 id="Görev_Üç">Görev Üç</h2>
<p>Bu görevde, kutularda iki resim var. Bir görüntü kutudan daha küçük, diğeri daha büyük ve kutudan taşmış durumda. Kutunun duyarlı olduğunu ve bu nedenle büyüyüp küçülebileceğini hayal ederseniz, küçük ve büyük görüntünün kutularına göre boyutlandırılması ve küçük görüntünün gerilmemesi için gerekli kodları yazın.</p>
<p><img alt="Two boxes with images in" src="https://mdn.mozillademos.org/files/17142/mdn-sizing-max-width.png" style="height: 807px; width: 742px;"></p>
<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}</p>
<div class="blockIndicator note">
<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/max-width-download.html">kaynak kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p>
</div>
<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2>
<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p>
<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p>
<ol>
<li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li>
<li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler:
<ul>
<li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li>
<li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li>
<li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li>
<li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li>
</ul>
</li>
</ol>
|
