인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

오보배님의 프로필 이미지
오보배

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

HTML5 시멘틱 태그로 CSS 레이아웃 설계하기(부모요소, 자식요소, 형제요소)

.box2를 float으로 진행하셨는데 inline-block으로 진행하다가 막히는 점이 있습니다..ㅜ

해결된 질문

작성

·

185

1

안녕하세요! 레이아웃 강의를 진행하다가 가로로 정렬하는데 두가지 방법이 있다고 말씀해주셨는데, 강의에서는 float으로 진행을 해주셔서 저는  display속성을 inline-block으로 바꿔서 진행하는 방법으로 진행해보았습니다..!

그런데 문제는 전 강의처럼 inline-block으로 설정하고 부모요소인 .box2에 text-align을 center로 변경했을때 float처럼 붙지 않고 두개는 붙고 하나는 다른 줄에 이동해있더라구요...ㅜㅜ

혹시 제가 놓친부분이나 잘못한 부분이 있을까요..? 코드와 사진 첨부하겠습니다!

.container {
      border: 1px solid red;
      width: 1200px;
      margin: auto;
    }
    
    header {
      background-color: skyblue;
      overflow: hidden;
    }
    
    header article {
      /*공통적인 부분을 넣어주기*/
      background-color: gray;
      width: 300px;
      height: 100px;
    }
    
    .logo {
      float: left;
    }
    
    .navi {
      float: right;
    }
    
    .box1 {
      background-color: yellowgreen;
      height: 300px;
    }
    
    .box2 {
      text-align: center;
      background-color: greenyellow;
    }
    
    .box2 article {
      display: inline-block;
      width: 33.333333333%;
      height: 300px;
    }
    
    .sub1{
      background-color: darkgray;
    }
    
    .sub2{
      background-color: lightgray;
    }
    
    .sub3{
      background-color: lightslategray;
    }
    
    footer {
      background-color: skyblue;
      height: 100px;
    }

답변 1

2

div를 인라인블럭으로 변경하면 float를 주지 않아도 되는 장점은 있지만 div가 인라인블럭이 되면서 오른쪽에 4~5픽셀의 마진이 생깁니다. 곧 정확한 크기로 들어가야 하는 경우에는 div에 margin-left: -5px 이렇게 주셔야 해요.

그런데 정확한 픽셀을 요하는 레이아웃에서는 인라인블록으로 하지 않는게 좋습니다. div를 인라인블록으로 변경해서 쉽게 배치하는 것은 너비의 여유가 있는 경우에 사용하세요.

오보배님의 프로필 이미지
오보배

작성한 질문수

질문하기