HTML

html 레이아웃 나눌 때 주의사항/ 중앙정렬 width 값 주고 margin: 0 auto;

coco030030 2025. 3. 24. 23:06

 

중앙정렬

 

 

width 값 주고 margin: 0 auto;

 

 

출처 : https://www.youtube.com/watch?v=uh8gxb3f8gA

 

 

 

이 레이아웃일 때 이걸 나누면 내가 헷갈려할 부분이 있었음

main에 4개의 자식을 주는 것.

세로칸하나 가로칸 세 개일 때.

 

 

검은색 네모박스는 큰 가로 div이다.

 

<body>
  <div id="wrap"> <!-- 전체박스로 감싸주기 -->
    <div id="header"></div>
    <div id="nav"></div>
    <div id="main">
      <!--  여기 부분에서 4개로 박스를 나눠야 한다. -->
      <div id="aside"></div>
      <div id="article1"></div>
      <div id=" article2"></div>
      <div id=" article3"></div>

      <!--  단순히 가로줄만 볼 게 아니라 칸을 봐야함.
    내 생각엔 저거 내가 하면 분명히 세로는 따로 빼놓고 
    그 아래 박스에서 자식 3개로 나누고 뒤에 CSS 하다가 혼란에 빠질 것 같아서 메모함
    +그렇게 작업해도 무방함. 왼편/오른편 나눠서 할 수도 있음. 
   -->
      <div di="footer"></div>
    </div>
</body>

 

그리고 CSS에서 main에서 배치를 할 때, 세로를 맞춰주면 블록이 쌓이려고 해서 맞춰진다.

height 780px; (왼편의 긴 세로칸 aside의 높이값이 저거임) 

 

왼편/오른편 새로운 div 박스를 만들어서 정렬하기도 가능함. 영상 선생님은 그게 싫어서 저렇게 작업했다고 하셨음. (보통 실제 작업을 할 땐 이렇게까지 배치하진 않는다고)