html/ css Áú¹® µå¸³´Ï´Ù.. div ³ôÀÌ °ü·Ã.. .

   Á¶È¸ 3107   Ãßõ 0    

맨땅에 헤딩 하면서 개발하고 있습니다.. nodejs 로 개발하다가 .

백엔드와 기능쪽에 .. 집중하다가 .. 어느정도 되가는거 같아서 ui 쪽을 만지는데 

css도 처음이고 html만 쪼금 알고 있어서 .. 코드가 장난 아니게 ㅜㅜ 더러워지고 있네요 

질문 드릴건 요즘 은 표도 잘 안쓰고 div로 모든걸 거의 다 처리 하는 추세라서 

<div>

    <div>

        <div>


        </div>

    </div>

</div>

이런 구조인데 ..  세번째 div 의 높이를 100% 로 줘야 할때 .. 그 위의 div를 상속 받아야 하는걸로 알고 있습니다.

그래서 두번째에 div 에 height  속성으로 100%

3번째도 100이런식으로 .. 피라미드 처럼 내려가고 있는데 .. 이게 아닌데 싶어서 질문 드립니다.. 

뭔가 잘못됐다고 보는데 원래 어떻게 해야 하는건지 모르겠습니다.. 검색도 어떻게 해야 하는지 모르겠구요 .. div 높이

이런걸로 검색하면.. div 안에 또다른 div 할때 어떻게 하는건지 이런것들만 나와있어서요 .. 

1번째 div 안에 .. 

<div>

    <div style="height:200px">

        test

    </div>

    <div style="height:100%">

        <div >


        </div>

    </div>

</div>이런식으로 2개의 div가 있을 경우에는.. 첫 div 가 600일 경우 ... 

안쪽 div 에서 200px 를 잡아먹고 .. 나머지 height 는 400뿐인데 .. 저렇게 100%으로 하면.. 600으로 잡혀서 .. div

오버하게 되구요 .. 

flex를 써야 하는건지 다른 방법이 있는건가요 ? 어떻게 찾다가 calc(100% - 200px) 이렇게 하면.. 200% 빠진게 

자동으로 계산이 되어서 .. 저런식으로 하고 있긴 한데 .. 이또한 아닌것 같아서 질문드립니다.. 

ui 에서 height 만 정복하면 다른건 쉬운거 같은데 항상 height 가 헷갈리네요 .. 답변이나 .. 참고 할 만한 url이나 

아무거나 괜찮습니다.. 리플 부탁 드립니다. 

ªÀº±Û Àϼö·Ï ½ÅÁßÇÏ°Ô.
±èÁ¾¹Î 2019-03
<div style="position:relative; height:600px;">
    <div style="position:absolute; top:0; height:200px;">
    </div>
    <div style="position:absolute; top:200px; bottom:0;">
    </div>
</div>
     
±èÁ¦¿¬ 2019-03
Ç×»ó °íÁ¤ÀÌ ¾Æ´Ï¾î¼­¿ä ... â »çÀÌÁî¿¡ µû¶ó .. À¯µ¿ÀÌ¶ó¼­ % ·Î ÇØ¾ß ÇÕ´Ï´Ù.
Àú·±½ÄÀ¸·Î °è¼Ó ¹°°í ¿À´Â ¼ö¹Û¿¡ ¾ø³ª¿ä?
¹Ú°æ¿ø 2019-03
³× ¸Ç ¹Ù±ù div ¸¦ display: flex Çؼ­ flex ÄÁÅ×À̳ʷΠ¸¸µå½Ê½Ã¿À
±× ´ÙÀ½¿¡ flex Á¤·Ä ¹æÇâÀ» °¡·Î°¡ ¾Æ´Ñ ¼¼·Î·Î ÇÒ ¼ö ÀÖ½À´Ï´Ù
±×¸®°í °¢°¢ÀÇ child div µé¿¡ %´ø Çȼ¿ÀÌ´ø ³ôÀ̸¦ ÁöÁ¤ °¡´ÉÇÕ´Ï´Ù
     
±èÁ¦¿¬ 2019-03
³×.. flex ¹Ú½º ½á¾ß Çϴ±º¿ä ¤Ì¤Ì html ·Î ´Ù ´öÁö´öÁö Çسö°¡Áö°í .. ±×°Íµµ ÀÏÀ̰ڳ׿ä .. flex¹Ú½º ¾øÀ»¶§´Â ¾î¶²½ÄÀ¸·Î Çß´ÂÁö
Ȥ½Ã ¾Ë°í °è½Å°¡¿ä?
          
¹Ú°æ¿ø 2019-03
Àúµµ... À¥À» Ãë¹Ì·Î ÃÖ±Ù °øºÎÇغÁ¼­ flex ¾ø´ø ½ÃÀý¿¡´Â ¾î¶»°Ô Çß´ÂÁö Àß ¸ð¸£°Ú³×¿ä...
js·Î È­¸é ¹Ù²ð¶§¸¶´Ù °è»êÇؼ­ ¾î¶»°Ô ÇÏÁö ¾Ê¾ÒÀ»±î¿ä
¹«¾Æ 2019-03
http://jsbin.com/yukozi/1/edit?html,css,output
ÀÌ ÄÚµå Âü°íÇغ¸¼¼¿ä.
 <header> ¿Í  <section> ¶õ°Ô ¾²¿´Áö¸¸... ¾îÂ¸é.. »ó´Ü¿¡ °íÁ¤µÈ ³ôÀÌÀÇ °ÍÀº header ¶ó°í Ç¥ÇöÇØÁÖ¸é µÇÁö ¾ÊÀ»±î¿ä?
¾Æ´Ï¸é
<div>
    <div style="height:200px">
        test
    </div>
    <div>
        <div >
        </div>
    </div>

ÀÌ·± ½ÄÀ¸·Î µÎ¹ø¤Š °Í¿¡ ³ôÀÌ¿¡ ´ëÇØ ÁöÁ¤ÇÏÁö ¾ÊÀ¸¸é...
¾¾Çü 2019-03
display:block À» ÀûÀýÈ÷ »ç¿ëÇÏ¼Å¾ß ÇÕ´Ï´Ù.
±×¸®°í height:auto ¿Í min-height À̰͵µ º¸½Ã¸é¼­ Çغ¸¼¼¿ä.
±×¸®°í ¾î¶² °æ¿ì¿¡´Â À§¿¡ ³ª¿­ÇϽŠ°¹¼öÀÇ divº¸´Ù ´õ µé¾î°¡¾ßÇÒ¼öµµ ÀÖ±¸¿ä.


QnA
Á¦¸ñPage 4670/5691
2015-12   1552771   ¹é¸Þ°¡
2014-05   5017372   Á¤ÀºÁØ1
2018-03   3111   ÇöÁø
2020-10   3111   µÎ¸®¾È
2019-09   3111   ³ªºñz
2021-04   3111   bangCH
2014-03   3111   ¹Ì¼ö¸Ç
2015-08   3111   µà¿ìÅ©
2020-05   3110   Å°°¡180
2020-04   3110   Â÷³ÝÄÄÇ»ÅÍ
2018-11   3110   dotlee
2021-04   3110   ¾Ë¼ö¾ø´ÂÈû
2020-10   3110   ´ÏÆ÷
2019-11   3110   ±¤ÁÖµ¿Å°È£Å×
2015-06   3110   ±èÁØÀ¯
2015-02   3110   ´ÏÆ÷
2017-04   3110   ³ªÆÄÀÌ°­½ÂÈÆ
2017-03   3109   ¹Ú¹®Çü
2018-12   3109   ha2mil
2015-07   3109   ȲÁø¿ì
2022-03   3109   Áý±¸¼®
2019-10   3109   ¸Þ·Î´Ï