{"id":583,"date":"2022-10-29T15:28:34","date_gmt":"2022-10-29T12:28:34","guid":{"rendered":"https:\/\/melic.com\/wp1\/?p=583"},"modified":"2022-10-29T15:28:34","modified_gmt":"2022-10-29T12:28:34","slug":"emmet-nedir-ve-ne-ise-yarar-2","status":"publish","type":"post","link":"https:\/\/melic.com\/wp1\/emmet-nedir-ve-ne-ise-yarar-2\/","title":{"rendered":"Emmet Nedir ve Ne \u0130\u015fe Yarar 2"},"content":{"rendered":"\n

Bir \u00f6nceki yaz\u0131mda verdi\u011fim \u00f6rnekler anla\u015f\u0131labilmesi i\u00e7in biraz uzuncayd\u0131 ; bu y\u00fczden ikinci yaz\u0131ma ge\u00e7tim. \u00d6ncelikle anlay\u0131\u015f\u0131n\u0131z i\u00e7in te\u015fekk\u00fcr ederim.<\/p>\n\n\n\n

\u015eimdi kald\u0131\u011f\u0131m\u0131z yerden devam edelim parantez yap\u0131s\u0131n\u0131 ve + ile nested yap\u0131da birden fazla farkl\u0131 nesneyi ya da tag\u0131 eklemeyi g\u00f6rd\u00fck ama baz\u0131 durumlarda eklemek istedi\u011fimiz tag sonda olmas\u0131 gerekir ve d\u00fczenlerken tag\u0131n bir \u00fcst\u00fcne eklme yapmak gerekebilir bunun i\u00e7in “^” i\u015faretlemesini kullan\u0131r\u0131z. \u00d6rnek :<\/p>\n\n\n\n

div+div>p>span+em <\/code><\/pre>\n\n\n\n
Yukar\u0131daki kod ile 2 ayr\u0131 div ve ikinci div tag\u0131n\u0131n alt\u0131nda bir paragraf ve o paragraf\u0131n i\u00e7inde iki ayr\u0131 tag g\u00f6receksiniz ; sonu\u00e7 \u015fu olacak :<\/p>\n\n\n\n
<div><\/div>\n<div>\n    <p><span><\/span><em><\/em><\/p>\n<\/div><\/code><\/pre>\n\n\n\n
Peki ben alt \u00f6\u011fe yani Chilad yap\u0131s\u0131n\u0131 bozmadan bir \u00fcste bir nesne eklemek istersem nas\u0131l yapar\u0131m derseniz o kodda yukar\u0131da bahsetti\u011fim “^” i\u015fareti ile yap\u0131labilir. \u00d6nce Kod :<\/p>\n\n\n\n
div+div>p>span+em^img<\/strong><\/code><\/pre>\n\n\n\n
Ve sonu\u00e7 :<\/p>\n\n\n\n
    <div><\/div>\n    <div>\n    \t<p><span><\/span><em><\/em><\/p>\n    \t<img src=\"\" alt=\"\"><\/strong>\n    <\/div><\/code><\/pre>\n\n\n\n
Peki bu “^” i\u015fareti tag\u0131 daha yukar\u0131 ta\u015f\u0131r m\u0131 ? Cevap : “Evet “<\/p>\n\n\n\n
div+div>p>span+em^^^img<\/strong>\n\n    <div><\/div>\n    <div>\n    \t<p><span><\/span><em><\/em><\/p>\n    <\/div>\n    <img src=\"\" alt=\"\"><\/strong><\/code><\/pre>\n\n\n\n
Bu arada “()” ile gruplama da daha \u00f6nceki \u00f6rneklerde anlatt\u0131\u011f\u0131m gibi. Her nesne grubunu bir tag gibi y\u00f6netebilirsiniz.<\/p>\n\n\n\n
Gelelim zurnan\u0131n son deli\u011fine , birazda en k\u0131ymetli ve tasar\u0131m i\u00e7in en de\u011ferli noktaya.<\/p>\n\n\n\n
div#header+div.page+div#footer.class1.class2.class3<\/code><\/pre>\n\n\n\n
Yukar\u0131da ki \u00f6rnekte “#” i\u015fareti ile “header” ID li bir div olu\u015fturuyoruz.<\/p>\n\n\n\n
Tag dan sonra konan “.” i\u015fareti ile “page” tan\u0131ml\u0131 bir CLASS olu\u015fturuyoruz.<\/p>\n\n\n\n
Ayr\u0131ca dikkat ederseniz birden “footer” ID si ile “class1” , “class2” ve “class3” arg\u00fcmanlar\u0131n\u0131 CLASS i\u00e7erisinde bir kerede olu\u015fturabiliyoruz.<\/p>\n\n\n\n
<div id=\"header\"><\/div>\n<div class=\"page\"><\/div>\n<div id=\"footer\" class=\"class1 class2 class3\"><\/div><\/code><\/pre>\n\n\n\n
Elbette tek sat\u0131rlar i\u00e7in de\u011fer mi de\u011fmez mi sorusuna geldiyseniz bence bir tag\/elementi a\u00e7\u0131p kapamak i\u00e7in bile kullan\u0131labilir. Bir m\u00fcddet zaman sonra eliniz o kadar al\u0131\u015facak ki Emmet’den vazge\u00e7ebilece\u011finizi sanm\u0131yorum. <\/p>\n\n\n\n
style{table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;} td{border: 1px solid #dddddd;text-align: center;padding: 8px;} tr:nth-child(even){background-color: #dddddd;} #header{background:black;color:white;}}+table>(tr>td#header[colspan=\"3\"]{White on Black})+(tr>td{data$$$}*3)*5\n<\/code><\/pre>\n\n\n\n
Biraz kar\u0131\u015f\u0131k bir kod yazd\u0131m ama bu kodlama ile ne kadar ileriye gidebilece\u011finizi g\u00f6stermek istedim. Sonu\u00e7 ise : <\/p>\n\n\n\n
    <style>\r\n    table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;} \r\n    td{border: 1px solid #dddddd;text-align: center;padding: 8px;} \r\n    tr:nth-child(even){background-color: #dddddd;} \r\n    #header{background:black;color:white;}\r\n    <\/style>\r\n    <table>\r\n    \t<tr>\r\n    \t\t<td id=\"header\" colspan=\"3\">White on Black<\/td>\r\n    \t<\/tr>\r\n    \t<tr>\r\n    \t\t<td>data001<\/td>\r\n    \t\t<td>data002<\/td>\r\n    \t\t<td>data0d03<\/td>\r\n    \t<\/tr>\r\n    \t<tr>\r\n    \t\t<td>data001<\/td>\r\n    \t\t<td>data002<\/td>\r\n    \t\t<td>data003<\/td>\r\n    \t<\/tr>\r\n    \t<tr>\r\n    \t\t<td>data001<\/td>\r\n    \t\t<td>data002<\/td>\r\n    \t\t<td>data003<\/td>\r\n    \t<\/tr>\r\n    \t<tr>\r\n    \t\t<td>data001<\/td>\r\n    \t\t<td>data002<\/td>\r\n    \t\t<td>data003<\/td>\r\n    \t<\/tr>\r\n    \t<tr>\r\n    \t\t<td>data001<\/td>\r\n    \t\t<td>data002<\/td>\r\n    \t\t<td>data003<\/td>\r\n    \t<\/tr>\r\n    <\/table><\/code><\/pre>\n\n\n\n
\"\"
\u00d6rnek  \u00c7\u0131kt\u0131<\/figcaption><\/figure>\n\n\n\n
Daha detayl\u0131 bilgi almak ve iyice \u00f6\u011frenmek ad\u0131na websitesini <\/a>ziyaret edebilirsiniz ayr\u0131ca muhakkak Emmet CheatSheet<\/a>‘e de g\u00f6z atmal\u0131s\u0131n\u0131z<\/p>\n\n\n\n
<\/p>\n\n\n\n
Kaynak ve bilgi : Emmet.io<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Bir \u00f6nceki yaz\u0131mda verdi\u011fim \u00f6rnekler anla\u015f\u0131labilmesi i\u00e7in biraz uzuncayd\u0131 ; bu y\u00fczden ikinci yaz\u0131ma ge\u00e7tim. \u00d6ncelikle anlay\u0131\u015f\u0131n\u0131z i\u00e7in te\u015fekk\u00fcr ederim. \u015eimdi kald\u0131\u011f\u0131m\u0131z yerden devam edelim parantez yap\u0131s\u0131n\u0131 ve + ile nested yap\u0131da birden fazla farkl\u0131 nesneyi ya da tag\u0131 eklemeyi g\u00f6rd\u00fck ama baz\u0131 durumlarda eklemek istedi\u011fimiz tag sonda olmas\u0131 gerekir…<\/p>\n","protected":false},"author":1,"featured_media":274,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,1,54,94],"tags":[289,293,294,62,296,290],"class_list":["post-583","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-html","category-genel","category-programala-dilleri-ve-programlamaya-giris","category-web-arayuzleri","tag-emmet","tag-emmet-addon","tag-emmet-io","tag-html","tag-html5","tag-zen-code"],"_links":{"self":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/583","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/comments?post=583"}],"version-history":[{"count":2,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/583\/revisions"}],"predecessor-version":[{"id":586,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/583\/revisions\/586"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/media\/274"}],"wp:attachment":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/media?parent=583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/categories?post=583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/tags?post=583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}