[코드잇] HTML, CSS display inline 속성으로 가로 배치(그리드 레이아웃)

안녕하세요, 온라인 코딩 스쿨 코드잇입니다.

​

이번에 소개드릴 내용은 HTML/CSS에서 너무나도 중요하지만 정확하게 개념을 알고 사용하기 힘든 가로 배치입니다.

​

가로 배치란?

이미지 같은 요소들이 가로로 배치되는 것을 의미합니다.

아래 화면을 참고해주세요!

​

잘생긴(?) 사진이 계속 나오네요...^^;; 댓글에 잘생겼다는 말 나올때까지 계속해야지..)

만약에 왼쪽 사진처럼 되어 있는 이미지를 오른쪽처럼 가로로 배치하고 싶다면 어떻게 해야할까요?

​

가로 배치 되기 전에는 아래와 같이 요소들이 배치됩니다.

가로 배치를 적용하면 다음과 같이 노출됩니다.

아래 왼쪽 사진은 <div> 태그를 활용해서 박스 3개를 만든건데요. <div> 태그로 만들었기 때문에 세로로 배치되어 있습니다.

​

    



    
box1
    
box2
    
box3

예전에 display 속성이 inline 인 요소는 가로로 배치된다고 했습니다.

그러니까 display 속성을 inline으로 바꿔주면 됩니다.

​

display 속성이 inline에 대해서 궁금하신 분들은 링크에서 다시 확인해보세요^^~

​

그럼 box1, box2, box3 의 display 속성을 inline으로 바꿔보겠습니다.

    



    
box1
    
box2
    
box3

코드를 실행 해보면 어떻게 될까요?

어..!?! 우리가 원했던 결과와는 조금 다르게 나오는데요.

inline 요소는 가지고 있는 content의 양만큼만 공간을 차지하기 때문입니다.

​

그러면 이 문제는 어떻게 해결할 수 있을까요?

​

바로 또다른 display 속성인 inline-block을 활용하면 됩니다!

​

inline-block 은 inline과 block의 성질을 모두 가지고 있는 간편한 친구에요~

​

그럼 box1, box2, box3 의 display 속성을 inline-block으로 바꿔보겠습니다.

    



    
box1
    
box2
    
box3

다시 한 번 코드를 실행해볼게요

짜잔~ 우리가 원하는 모습대로 가로 배치가 된 것을 확인할 수 있습니다.

​

inline과 block의 성질을 모두 가지고 있는 inline-block! 신기하시죠?

​

inline-block에 대해서 자세히 알아보고 싶다면? codeit 웹 퍼블리싱 강의에서 확인하세요.

​

오늘은 display 속성이 inline-block을 활용해서 가로 배치를 해봤는데요.

​

여기서 문제 하나 드릴게요!

​

아래 사진처럼 box1과 box2는 왼쪽으로 box3은 오른쪽으로 배치하려면 어떻게 해야할까요?

어떻게 했지? 궁금하시다면 코드잇 블로그를 구독해주세요!

​

그럼 다음 블로그 포스팅을 기대해주세요!