[HTML&CSS] CSS - Display : inline 요소의 정렬과 block 요소의 정렬

0. 해당 개념을 들어가기 앞서 display : inline요소와 block요소의 특징 정리

   

   1) block : ★블럭취급(레고)★
      -너비가 최대한 넓어진다. (width : auto가 기본값)
      -한줄을 무조건 혼자!
      -높이문제 (높이가 0이면 안나옴)

   

   2) inline(-block) : ★글자취급★
      -너비가 최대한 좁아진다. (최소화)
      -한줄에 최대한 여러개
      -너비문제(너비가 0이면 안나옴)

   

   **예외
      -a, img, span 엘리먼트는 기본적으로 display가 inline 이다.
      - inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.
        (inline 요소는 inline-block의 속성을 따르지만 margin, padding등이 안되는 차이)
        => width, margin 등을 주려면 inline을 inline-block으로 만들면 됨.

 

1. inline요소의 정렬 : 글자화 => text-align 사용!

   

   -text-align : 절대로 자신을 정렬하는게 아니라 자신이 가지고 있는 "텍스트!!"를 정렬함!

    ★ 정렬하고자 하는 텍스트를 정확히 파악해야 함!! ★

 

See the Pen WEB : text-align_01 by hoyeol0513 (@hoyeol0513) on CodePen.

 

2. block요소의 정렬 : width와 margin-left/right를 활용

   : block은 한줄을 무조건 혼자 차지하여 width : auto 가 기본!

 

  ★ width를 특정값으로 고정한 채 정렬하는 방법 (margin-left/right 중 하나를 포기해야 함.)

    1) 왼쪽정렬 : margin-left : 0으로 두고 margin-right : auto로 둠!

    2) 오른쪽정렬 : margin-right : 0으로 두고 margin-left : auto로 둠!

    3) 가운데정렬 : margin-left와 margin-right : auto로 둠! (둘다 auto라 양쪽 동일하게 가운데로 정렬)

 

See the Pen block요소 정렬 by hoyeol0513 (@hoyeol0513) on CodePen.