display 속성 정리

{"__browser ":{"device ":"unknown_device ","mobile ":false,"name ":"chrome ","platform ":"pc ","version ":"112 "},"__constants ":{},"__CPDATA ":{"domain_iframe ":"https://cdpn.io ","environment ":"production ","host ":"codepen.io ","iframe_allow ":"accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write ","iframe_sandbox ":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation "},"__graphql ":{"data ":{"data ":{"sessionUser ":{"id ":"pEbYKL ","name ":"guenhyuck ","title ":"guenhyuck ","avatar ":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto &version=0 ","currentContext ":{"id ":"pEbYKL ","title ":"guenhyuck ","name ":"guenhyuck ","avatar ":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto &version=0 ","username ":"guenhyuck ","__typename ":"User "},"currentTeamId ":null,"username ":"guenhyuck ","admin ":false,"anon ":false,"pro ":false,"verified ":false,"teams ":[],"__typename ":"User "}}},"url ":"https://codepen.io/graphql ","api ":"cprails ","cpedata ":{"action ":"show ","controller ":"live_fullpage "}},"__user ":{"anon ":false,"base_url ":"/guenhyuck/","current_team_id ":0,"current_team_hashid ":null,"hashid ":"pEbYKL ","id ":9770131,"itemType ":"user ","name ":"guenhyuck ","paid ":false,"tier ":0,"username ":"guenhyuck ","created_at ":"2023-02-28T04:23:20.099Z ","email_verified ":false,"collections_count ":0,"collections_private_count ":0,"followers_count ":0,"followings_count ":0,"pens_count ":15,"pens_private_count ":0,"projects_count ":0,"projects_private_count ":0},"__firebase ":{"config ":{"apiKey ":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls ","authDomain ":"codepen-store-production.firebaseapp.com ","databaseURL ":"https://codepen-store-production.firebaseio.com ","disabled ":false,"projectId ":"codepen-store-production "},"token ":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoicEViWUtMIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjgxMDk4MDc3LCJpYXQiOjE2ODEwOTQ0NzcsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6InBFYllLTCJ9.CURcww0DozhLV0zJg9LEZ_WYWBDJYvoVKBo1u5Gmlm3LI06wzdMh2EpPeC5HPra-JvFfvGyLlxiWcnKV2LQSi0sc2dkfMb4hI7eLo1IwmHE-xkALGYbkbp-6zpvlZk9g7wGO4nrjeSIedGvNxaTvSmYg-V4HmX9Aozb2v-IqCxgjj7I_5ZQKYAOmnIq9AX3p7Q678OZJqr7sxSNkUt1tmE_1BFCiPBdKGYn2TvG7WZmhCOVD1EnhLbNmS__kCYxpaLEaPnmEQ6gXtUFZEKOY3yXPlXzJiaCpEQvLdjy5_It8eAHfRvpNULzYxUc54xrxQ2uKViRFkDWf2cVt0gC1fg "},"__pay_stripe_public_key ":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH ","__pay_braintree_env ":"production ","__item ":"{\"id\":26243667,\"user_id\":587134,\"html\":\"<h1 >display 속성 정리<\\/h1 >\\n <table >\\n <thead >\\n <tr >\\n <th >종류<\\/th >\\n <th >inline-block, inline <\\/th >\\n <th >block <\\/th >\\n <th >none <\\/th >\\n <\\/tr >\\n <\\/thead >\\n <tbody >\\n <tr >\\n <th >너비<\\/th >\\n <td >너비가 설정되어 있지 않다면, 최소한으로 줄어든다.<\\/td >\\n <td >너비가 설정되어 있지 않다면, 최대한으로 넓어진다.<\\/td >\\n <td >없어진다.<\\/td >\\n <\\/tr >\\n <tr >\\n <th >높이<\\/th >\\n <td >높이가 설정되어 있지 않다면, 최소한으로 줄어든다.<\\/td >\\n <td >높이가 설정되어 있지 않다면, 최소한으로 줄어든다.<\\/td >\\n <td >없어진다.<\\/td >\\n <\\/tr >\\n <tr >\\n <th >본질<\\/th >\\n <td >글자화<\\/td >\\n <td >블록화<\\/td >\\n <td >-<\\/td >\\n <\\/tr >\\n <tr >\\n <th >line 사용<\\/th >\\n <td >한 줄에 최대한 여러개가 나온다.<\\/td >\\n <td >한 줄을 무조건 혼자 쓴다.<\\/td >\\n <td >-<\\/td >\\n <\\/tr >\\n <tr >\\n <th >정렬<\\/th >\\n <td >부모의 text-align에 의해서 정렬<\\/td >\\n <td >스스로 margin-left, margin-right를 사용해서 정렬<\\/td >\\n <td >-<\\/td >\\n <\\/tr >\\n <\\/tbody >\\n <\\/table >\\n\\n <h2 >\\n 예외\\n <\\/h2 >\\n\\n <ul >\\n <li >a, span 엘리먼트는 기본적으로 display가 <strong >inline <\\/strong >이다.<\\/li >\\n <li >img 엘리먼트는 기본적으로 display가 <strong >inline-block <\\/strong >이다.<\\/li >\\n <li ><strong >inline <\\/strong >요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.<\\/li >\\n <\\/ul >\",\"css\":\"table {\\n border-collapse:collapse;\\n}\\n\\ntable th, table td {\\n border:1px solid black;\\n}\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2018-07-13T10:52:37.000Z\",\"updated_at\":\"2022-05-15T04:47:31.737Z\",\"title\":\"display 속성 정리\",\"description\":\"\",\"slug_hash\":\"ZjbpPR\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"1660d8dc240b1c8aceac514c04d788f3\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"cpid\":null,\"pen_hash\":null,\"hashid\":\"ZjbpPR\"}"}