맨땅에 헤딩 하면서 개발하고 있습니다.. 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이나
아무거나 괜찮습니다.. 리플 부탁 드립니다.
<div style="position:absolute; top:0; height:200px;">
</div>
<div style="position:absolute; top:200px; bottom:0;">
</div>
</div>
저런식으로 계속 물고 오는 수밖에 없나요?
그 다음에 flex 정렬 방향을 가로가 아닌 세로로 할 수 있습니다
그리고 각각의 child div 들에 %던 픽셀이던 높이를 지정 가능합니다
혹시 알고 계신가요?
js로 화면 바뀔때마다 계산해서 어떻게 하지 않았을까요
이 코드 참고해보세요.
<header> 와 <section> 란게 쓰였지만... 어찌보면.. 상단에 고정된 높이의 것은 header 라고 표현해주면 되지 않을까요?
아니면
<div>
<div style="height:200px">
test
</div>
<div>
<div >
</div>
</div>
이런 식으로 두번쨰 것에 높이에 대해 지정하지 않으면...
그리고 height:auto 와 min-height 이것도 보시면서 해보세요.
그리고 어떤 경우에는 위에 나열하신 갯수의 div보다 더 들어가야할수도 있구요.