1 중복 코드 줄이기 (공통은 common 으로 모아서 관리 유지보수 및 가독성 높이기 위해서 )

2 CSS의 display 속성: inline, block, inline-block 확실히 알기

• inline 전후 줄바꿈 없이 한줄에 다른 엘리먼트들과 나란히 배치된다
  width 와 height 속성을 지정해도 적용 안됨
  왜냐면 해당 태그가 마크업하고 있는 컨텐츠의 크기만큼 공간을
  차지하도록 되어 있기때문이다 margin 과 padding 좌우 간격만
  적용되고 상하는 반영이 안됨
  ex ) 줄바꿈없이 순서대로 한줄에 보임
• block 전후 줄바꿈이 들어가서 다른 엘리먼트들을 다른줄로 밀어내고
  혼자 한줄을 차지합니다
  width , height , margin , padding 속성 모두 반영
  ex )

• inline-block
  인라인 요소 처럼 나란히 배치 되지만 , 블럭요소 처럼 width 와 height 속성 margin padding 상하 지정 가능
  내부적으로는 block 규칙을 갖지만 외부적으로 inline 규칙을 가짐