{"id":3566,"date":"2024-11-11T03:30:15","date_gmt":"2024-11-11T00:30:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/"},"modified":"2024-11-11T03:30:15","modified_gmt":"2024-11-11T00:30:15","slug":"css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/","title":{"rendered":"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme"},"content":{"rendered":"<p>CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme<\/p>\n<p>Web tasar\u0131m\u0131nda, g\u00f6rsel \u00f6\u011feleri do\u011fru \u015fekilde boyutland\u0131rmak ve konumland\u0131rmak \u00e7ok \u00f6nemlidir. CSS, web sayfalar\u0131n\u0131 bi\u00e7imlendirmek i\u00e7in kulland\u0131\u011f\u0131m\u0131z dil, bu ama\u00e7la \u00e7e\u015fitli \u00f6l\u00e7\u00fc birimleri sunar. Bu \u00f6l\u00e7\u00fc birimleri, \u00f6\u011felerin boyutunu, konumunu ve di\u011fer \u00f6zelliklerini belirlemek i\u00e7in kullan\u0131l\u0131r. Bu makalede, CSS&#8217;de kullan\u0131lan temel \u00f6l\u00e7\u00fc birimlerini inceleyece\u011fiz ve bunlar\u0131n kullan\u0131m alanlar\u0131n\u0131 ele alaca\u011f\u0131z.<\/p>\n<h2>Mutlak \u00d6l\u00e7\u00fc Birimleri<\/h2>\n<p>Mutlak \u00f6l\u00e7\u00fc birimleri, sabit bir de\u011fere sahiptir ve cihazdan ba\u011f\u0131ms\u0131zd\u0131r. Bu birimler, \u00f6\u011felerin boyutunun her cihazda ayn\u0131 \u015fekilde g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n<h3>Piksel (px)<\/h3>\n<p>Piksel, en yayg\u0131n kullan\u0131lan \u00f6l\u00e7\u00fc birimlerinden biridir. Bir piksel, ekran \u00fczerindeki tek bir noktay\u0131 temsil eder. Pikseller, \u00f6\u011felerin keskin ve net bir \u015fekilde g\u00f6r\u00fcnmesini sa\u011flar ve tasar\u0131mc\u0131lar taraf\u0131ndan genellikle metin boyutlar\u0131n\u0131, kenar bo\u015fluklar\u0131n\u0131 ve dolgular\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. <\/p>\n<h3>\u0130n\u00e7 (in)<\/h3>\n<p>\u0130n\u00e7, fiziksel bir \u00f6l\u00e7\u00fc birimidir ve 1 in\u00e7 2.54 santimetreye e\u015fittir. \u0130n\u00e7, genellikle bask\u0131 i\u015flerinde ve b\u00fcy\u00fck ekranlarda kullan\u0131l\u0131r. \u00d6rne\u011fin, bir afi\u015f tasar\u0131m\u0131 i\u00e7in 10 in\u00e7 geni\u015fli\u011finde bir \u00f6\u011fe kullanabilirsiniz.<\/p>\n<h3>Santimetre (cm)<\/h3>\n<p>Santimetre, metrik sistemde kullan\u0131lan bir \u00f6l\u00e7\u00fc birimidir. \u0130n\u00e7 gibi, santimetre de fiziksel bir \u00f6l\u00e7\u00fc birimidir ve genellikle bask\u0131 i\u015flerinde kullan\u0131l\u0131r. \u00d6rne\u011fin, bir kartvizit tasar\u0131m\u0131 i\u00e7in 5 cm geni\u015fli\u011finde bir \u00f6\u011fe kullanabilirsiniz.<\/p>\n<h3>Milimetre (mm)<\/h3>\n<p>Milimetre, santimetrenin onda biridir. Santimetre gibi, milimetre de fiziksel bir \u00f6l\u00e7\u00fc birimidir ve genellikle bask\u0131 i\u015flerinde kullan\u0131l\u0131r.<\/p>\n<h3>Puan (pt)<\/h3>\n<p>Puan, tipografik bir \u00f6l\u00e7\u00fc birimidir ve 1 puan yakla\u015f\u0131k 0.35 milimetreye e\u015fittir. Puan, genellikle metin boyutlar\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir paragraf i\u00e7in 12 puanl\u0131k bir font boyutu kullanabilirsiniz.<\/p>\n<h3>\u0130z (pc)<\/h3>\n<p>\u0130z, 12 puana e\u015fittir. \u0130z, genellikle b\u00fcy\u00fck metin bloklar\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir ba\u015fl\u0131k i\u00e7in 24 izlik bir font boyutu kullanabilirsiniz.<\/p>\n<h2>G\u00f6reli \u00d6l\u00e7\u00fc Birimleri<\/h2>\n<p>G\u00f6reli \u00f6l\u00e7\u00fc birimleri, di\u011fer \u00f6\u011felere veya ekrana g\u00f6re bir de\u011fere sahiptir. Bu birimler, \u00f6\u011felerin boyutunun farkl\u0131 cihazlar aras\u0131nda uyumlu olmas\u0131n\u0131 sa\u011flar. <\/p>\n<h3>Y\u00fczde (%)<\/h3>\n<p>Y\u00fczde, en yayg\u0131n kullan\u0131lan g\u00f6receli \u00f6l\u00e7\u00fc birimlerinden biridir. Bir \u00f6\u011fenin boyutunu, \u00fcst \u00f6\u011fesinin boyutunun y\u00fczdesi olarak belirtir. \u00d6rne\u011fin, <code>width: 50%<\/code>, \u00f6\u011fenin geni\u015fli\u011finin \u00fcst \u00f6\u011fesinin geni\u015fli\u011finin %50&#8217;si oldu\u011fu anlam\u0131na gelir.<\/p>\n<h3>Em<\/h3>\n<p>Em, font boyutuna g\u00f6re \u00f6l\u00e7\u00fclen g\u00f6receli bir \u00f6l\u00e7\u00fc birimidir. Bir em, ge\u00e7erli font boyutuna e\u015fittir. \u00d6rne\u011fin, <code>font-size: 1.5em<\/code>, ge\u00e7erli font boyutunun %150&#8217;si kadar bir font boyutu anlam\u0131na gelir. Em, metin boyutlar\u0131n\u0131 ve i\u00e7 bo\u015fluklar\u0131 tan\u0131mlamak i\u00e7in kullan\u0131labilir.<\/p>\n<h3>Rem<\/h3>\n<p>Rem, k\u00f6k font boyutuna g\u00f6re \u00f6l\u00e7\u00fclen g\u00f6receli bir \u00f6l\u00e7\u00fc birimidir. Bir rem, k\u00f6k font boyutuna e\u015fittir. \u00d6rne\u011fin, <code>font-size: 1.5rem<\/code>, k\u00f6k font boyutunun %150&#8217;si kadar bir font boyutu anlam\u0131na gelir. Rem, farkl\u0131 cihazlar aras\u0131nda tutarl\u0131 bir metin boyutu sa\u011flamak i\u00e7in kullan\u0131labilir.<\/p>\n<h3>Vw, Vh, Vmin, Vmax<\/h3>\n<p>Vw, g\u00f6r\u00fcn\u00fcr pencerenin geni\u015fli\u011finin y\u00fczdesidir. Vh, g\u00f6r\u00fcn\u00fcr pencerenin y\u00fcksekli\u011finin y\u00fczdesidir. Vmin, g\u00f6r\u00fcn\u00fcr pencerenin geni\u015fli\u011fi veya y\u00fcksekli\u011finden daha k\u00fc\u00e7\u00fck olan\u0131n y\u00fczdesidir. Vmax, g\u00f6r\u00fcn\u00fcr pencerenin geni\u015fli\u011fi veya y\u00fcksekli\u011finden daha b\u00fcy\u00fck olan\u0131n y\u00fczdesidir. Bu birimler, \u00f6\u011felerin boyutunu kullan\u0131c\u0131 ekran\u0131na g\u00f6re \u00f6zelle\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<h2>\u00d6l\u00e7\u00fc Birimlerini Se\u00e7erken Dikkat Edilmesi Gerekenler<\/h2>\n<p>En uygun \u00f6l\u00e7\u00fc birimini se\u00e7mek, web tasar\u0131m\u0131n\u0131n ba\u015far\u0131s\u0131 i\u00e7in \u00f6nemlidir. \u0130\u015fte dikkate al\u0131nmas\u0131 gereken baz\u0131 noktalar:<\/p>\n<ul>\n<li><strong>Uyumluluk:<\/strong> T\u00fcm taray\u0131c\u0131lar ve cihazlar taraf\u0131ndan desteklenen \u00f6l\u00e7\u00fc birimlerini kullan\u0131n.<\/li>\n<li><strong>G\u00f6r\u00fcn\u00fcrl\u00fck:<\/strong> Pikseller, \u00f6\u011felerin keskin ve net bir \u015fekilde g\u00f6r\u00fcnmesini sa\u011flar, ancak rem gibi g\u00f6receli birimler farkl\u0131 cihazlar aras\u0131nda tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm sa\u011flayabilir.<\/li>\n<li><strong>Esneklik:<\/strong> G\u00f6receli \u00f6l\u00e7\u00fc birimleri, farkl\u0131 ekran boyutlar\u0131nda esnek bir tasar\u0131ma olanak tan\u0131r.<\/li>\n<li><strong>Okuma kolayl\u0131\u011f\u0131:<\/strong> Metin boyutlar\u0131n\u0131 ve i\u00e7 bo\u015fluklar\u0131 tan\u0131mlamak i\u00e7in em veya rem gibi g\u00f6receli \u00f6l\u00e7\u00fc birimleri kullan\u0131n.<\/li>\n<\/ul>\n<p>\u00d6rne\u011fin, bir web sitesi tasar\u0131m\u0131 i\u00e7in metin boyutunu belirlerken, okuma kolayl\u0131\u011f\u0131 sa\u011flamak i\u00e7in rem kullanmak daha uygun olabilir. Ancak, bir resim boyutunu belirlerken, piksel kullanmak, resmin keskin ve net bir \u015fekilde g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n<h2>\u00d6rnek Kullan\u0131mlar<\/h2>\n<p>\u0130\u015fte CSS&#8217;de \u00f6l\u00e7\u00fc birimlerinin nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair baz\u0131 \u00f6rnekler:<\/p>\n<p>&#8220;`html<br \/>\n\/* Piksel kullanarak metin boyutunu tan\u0131mlama *\/<br \/>\nh1 {<br \/>\n  font-size: 24px;<br \/>\n}<\/p>\n<p>\/* Y\u00fczde kullanarak geni\u015fli\u011fi tan\u0131mlama *\/<br \/>\ndiv {<br \/>\n  width: 50%;<br \/>\n}<\/p>\n<p>\/* Em kullanarak i\u00e7 bo\u015flu\u011fu tan\u0131mlama *\/<br \/>\np {<br \/>\n  padding: 1em;<br \/>\n}<\/p>\n<p>\/* Rem kullanarak font boyutunu tan\u0131mlama *\/<br \/>\nbody {<br \/>\n  font-size: 16px;<br \/>\n}<br \/>\nh2 {<br \/>\n  font-size: 1.5rem;<br \/>\n}<br \/>\n&#8220;`<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>CSS&#8217;deki \u00f6l\u00e7\u00fc birimleri, web sayfalar\u0131n\u0131 bi\u00e7imlendirmek i\u00e7in \u00e7ok \u00f6nemlidir. Do\u011fru \u00f6l\u00e7\u00fc birimlerini kullanarak, \u00f6\u011feleri do\u011fru \u015fekilde boyutland\u0131rmak, konumland\u0131rmak ve t\u00fcm cihazlar aras\u0131nda tutarl\u0131 bir g\u00f6r\u00fcn\u00fcm sa\u011flamak m\u00fcmk\u00fcnd\u00fcr. <\/p>\n<p>Mutlak ve g\u00f6receli \u00f6l\u00e7\u00fc birimlerinin avantajlar\u0131n\u0131 ve dezavantajlar\u0131n\u0131 dikkatlice de\u011ferlendirerek, web tasar\u0131m\u0131n\u0131z\u0131 daha esnek, uyumlu ve etkili hale getirebilirsiniz. Web tasar\u0131m\u0131n\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, hissini ve kullan\u0131labilirli\u011fini iyile\u015ftirmek i\u00e7in bu konuyu iyi anlamak \u00f6nemlidir.<\/p>\n<h2>Referanslar<\/h2>\n<p>Daha fazla bilgi i\u00e7in a\u015fa\u011f\u0131daki kaynaklar\u0131 inceleyebilirsiniz:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/Values_and_units\">MDN Web Docs: Values and units<\/a><\/li>\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css_units.asp\">W3Schools: CSS Units<\/a><\/li>\n<li><a href=\"https:\/\/fatihsoysal.com\">Fatih Soysal<\/a><\/li>\n<\/ul>\n<p>#Etiketler: #CSS #\u00d6l\u00e7\u00fcBirimleri #WebTasar\u0131m #Boyutland\u0131rma #\u00d6l\u00e7eklendirme #Piksel #\u0130n\u00e7 #Santimetre #Milimetre #Puan #\u0130z #Y\u00fczde #Em #Rem #Vw #Vh #Vmin #Vmax #Uyumluluk #G\u00f6r\u00fcn\u00fcrl\u00fck #Esneklik #OkumaKolayl\u0131\u011f\u0131<\/p>\n","protected":false},"excerpt":{"rendered":"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme Web tasar\u0131m\u0131nda, g\u00f6rsel \u00f6\u011feleri do\u011fru \u015fekilde boyutland\u0131rmak ve konumland\u0131rmak \u00e7ok&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3566","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme<\/title>\n<meta name=\"description\" content=\"Web tasar\u0131m\u0131nda, g\u00f6rsel \u00f6\u011feleri do\u011fru \u015fekilde boyutland\u0131rmak ve konumland\u0131rmak \u00e7ok \u00f6nemlidir. CSS, web sayfalar\u0131n\u0131 bi\u00e7imlendirmek i\u00e7in kulland\u0131\u011f\u0131m\u0131z dil, bu ama\u00e7la \u00e7e\u015fitli \u00f6l\u00e7\u00fc birimleri sunar. Bu \u00f6l\u00e7\u00fc birimleri, \u00f6\u011felerin boyutunu, konumunu ve di\u011fer \u00f6zelliklerini belirlemek i\u00e7in kullan\u0131l\u0131r. Bu makalede, CSS&#039;de kullan\u0131lan temel \u00f6l\u00e7\u00fc birimlerini inceleyece\u011fiz ve bunlar\u0131n kullan\u0131m alanlar\u0131n\u0131 ele alaca\u011f\u0131z.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme\" \/>\n<meta property=\"og:description\" content=\"Web tasar\u0131m\u0131nda, g\u00f6rsel \u00f6\u011feleri do\u011fru \u015fekilde boyutland\u0131rmak ve konumland\u0131rmak \u00e7ok \u00f6nemlidir. CSS, web sayfalar\u0131n\u0131 bi\u00e7imlendirmek i\u00e7in kulland\u0131\u011f\u0131m\u0131z dil, bu ama\u00e7la \u00e7e\u015fitli \u00f6l\u00e7\u00fc birimleri sunar. Bu \u00f6l\u00e7\u00fc birimleri, \u00f6\u011felerin boyutunu, konumunu ve di\u011fer \u00f6zelliklerini belirlemek i\u00e7in kullan\u0131l\u0131r. Bu makalede, CSS&#039;de kullan\u0131lan temel \u00f6l\u00e7\u00fc birimlerini inceleyece\u011fiz ve bunlar\u0131n kullan\u0131m alanlar\u0131n\u0131 ele alaca\u011f\u0131z.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-11T00:30:15+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme\",\"datePublished\":\"2024-11-11T00:30:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/\"},\"wordCount\":987,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/\",\"name\":\"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-11-11T00:30:15+00:00\",\"description\":\"Web tasar\u0131m\u0131nda, g\u00f6rsel \u00f6\u011feleri do\u011fru \u015fekilde boyutland\u0131rmak ve konumland\u0131rmak \u00e7ok \u00f6nemlidir. CSS, web sayfalar\u0131n\u0131 bi\u00e7imlendirmek i\u00e7in kulland\u0131\u011f\u0131m\u0131z dil, bu ama\u00e7la \u00e7e\u015fitli \u00f6l\u00e7\u00fc birimleri sunar. Bu \u00f6l\u00e7\u00fc birimleri, \u00f6\u011felerin boyutunu, konumunu ve di\u011fer \u00f6zelliklerini belirlemek i\u00e7in kullan\u0131l\u0131r. Bu makalede, CSS'de kullan\u0131lan temel \u00f6l\u00e7\u00fc birimlerini inceleyece\u011fiz ve bunlar\u0131n kullan\u0131m alanlar\u0131n\u0131 ele alaca\u011f\u0131z.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme","description":"Web tasar\u0131m\u0131nda, g\u00f6rsel \u00f6\u011feleri do\u011fru \u015fekilde boyutland\u0131rmak ve konumland\u0131rmak \u00e7ok \u00f6nemlidir. CSS, web sayfalar\u0131n\u0131 bi\u00e7imlendirmek i\u00e7in kulland\u0131\u011f\u0131m\u0131z dil, bu ama\u00e7la \u00e7e\u015fitli \u00f6l\u00e7\u00fc birimleri sunar. Bu \u00f6l\u00e7\u00fc birimleri, \u00f6\u011felerin boyutunu, konumunu ve di\u011fer \u00f6zelliklerini belirlemek i\u00e7in kullan\u0131l\u0131r. Bu makalede, CSS'de kullan\u0131lan temel \u00f6l\u00e7\u00fc birimlerini inceleyece\u011fiz ve bunlar\u0131n kullan\u0131m alanlar\u0131n\u0131 ele alaca\u011f\u0131z.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme","og_description":"Web tasar\u0131m\u0131nda, g\u00f6rsel \u00f6\u011feleri do\u011fru \u015fekilde boyutland\u0131rmak ve konumland\u0131rmak \u00e7ok \u00f6nemlidir. CSS, web sayfalar\u0131n\u0131 bi\u00e7imlendirmek i\u00e7in kulland\u0131\u011f\u0131m\u0131z dil, bu ama\u00e7la \u00e7e\u015fitli \u00f6l\u00e7\u00fc birimleri sunar. Bu \u00f6l\u00e7\u00fc birimleri, \u00f6\u011felerin boyutunu, konumunu ve di\u011fer \u00f6zelliklerini belirlemek i\u00e7in kullan\u0131l\u0131r. Bu makalede, CSS'de kullan\u0131lan temel \u00f6l\u00e7\u00fc birimlerini inceleyece\u011fiz ve bunlar\u0131n kullan\u0131m alanlar\u0131n\u0131 ele alaca\u011f\u0131z.","og_url":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-11-11T00:30:15+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"5 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme","datePublished":"2024-11-11T00:30:15+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/"},"wordCount":987,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/","url":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/","name":"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-11-11T00:30:15+00:00","description":"Web tasar\u0131m\u0131nda, g\u00f6rsel \u00f6\u011feleri do\u011fru \u015fekilde boyutland\u0131rmak ve konumland\u0131rmak \u00e7ok \u00f6nemlidir. CSS, web sayfalar\u0131n\u0131 bi\u00e7imlendirmek i\u00e7in kulland\u0131\u011f\u0131m\u0131z dil, bu ama\u00e7la \u00e7e\u015fitli \u00f6l\u00e7\u00fc birimleri sunar. Bu \u00f6l\u00e7\u00fc birimleri, \u00f6\u011felerin boyutunu, konumunu ve di\u011fer \u00f6zelliklerini belirlemek i\u00e7in kullan\u0131l\u0131r. Bu makalede, CSS'de kullan\u0131lan temel \u00f6l\u00e7\u00fc birimlerini inceleyece\u011fiz ve bunlar\u0131n kullan\u0131m alanlar\u0131n\u0131 ele alaca\u011f\u0131z.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-olcu-birimleri-web-tasariminda-boyutlandirma-ve-olceklendirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS \u00d6l\u00e7\u00fc Birimleri: Web Tasar\u0131m\u0131nda Boyutland\u0131rma ve \u00d6l\u00e7eklendirme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=3566"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3566\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=3566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=3566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=3566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}