inline-block 요소 가로배치 관련 질문입니다.

Question

안녕하세요! 강의를 들으면서 디스플레이 속성의 중요성을 느끼고 있는 중, inline-block 요소 관련해서 궁금한 점이 있어서 질문드립니다. 상세페이지섹션 Location 부분 제작 강의를 듣다가 궁금한 점이 생겼는데요, 질문은 크게 두가지입니다. <질문1> .service-item div의 자식요소인 .service-item .fa 와 .service-item h3 를 한번 가로로 배치시켜보고싶어서 (강의에서는 세로배치) .service-item h3에 display: inline-block을 줬습니다. 그 결과 아래의 화면처럼 가로배치는 잘 됐는데요, 문제는 이후에 .service-item h3 의 세로위치를 .service-item .fa 아이콘과 맞추기 위해 .service-item h3 에 margin-top: -20px 을 줬지만 margin-top 속성이 적용되지 않았습니다. 이럴 경우 .service-item h3의 세로위치를 조정할 수 있는 방법을 알고 싶습니다. <질문2> 두번째 질문도 display: inline-block 을 통한 엘리먼트 가로배치에 대한 질문인데요, 나름대로 실험해본 결과 아래 그림처럼 overflow: hidden을 적용해야 가로배치가 된다는 것을 알 수 있었습니다. 될수있으면 float: left 보다는 inline-block을 통해서 가로배치를 하고싶은데요, 인터넷 검색결과 inline-block은 기본 마진 4px이 들어가고 자식요소 가로배치가 잘 안된다는 등의 문제가 있다고 하는데, 실제로 디스플레이 inline-block 적용을 통해서 네비게이션이나 콘텐츠를 가로배치하는 경우는 드문가요? 감사합니다!

jinw0909 · Answer

말씀해주신대로 vertical-align 속성을 적용해서 원하는 세로위치로 정렬됐습니다! 가로배치를 위해서 overflow: hidden을 적용해본건 강의에서 float: left 시킨 이미지 옆에 p태그 택스트가 넘칠때 깔끔하게 가로배치 시키기 위해서 p태그에 overflow: hidden을 적용시키시는걸 보고 혹시나 해서 해본건데, 이 부분도vertical: align으로 배치하니까 해결 됐습니다. 앞으로도 궁금한 점이 있으면 질문 올리도록 하겠습니다  - 감사합니다!

codingworks · Answer

<질문1> 에서 두개를 인라인블록으로 하셨으면 둘 중에 하나에 vertical-align: middle을 주시면 됩니다. 그리고 같은 라인에 있는 인라인 블록이라 margin-top을 주면 폰트어썸 아이콘도 같이 움직입니다.

Heaing title

===================================================== <질문2>에서 overflow: hidden을 왜 사용하셨는지 모르겠는데 인라인 블록으로 여러개 배치되면 인라인 블록 안의 텍스트 내용의 길이에 따라 높이를 위로 고정하시면 됩니다. vertical-align: top을 주시면 3개가 모두 위에 위치합니다. 네비게이션을 만들 때 인라인 블록으로 하시는 경우도 많이 있습니다. 이건 제작자의 취향입니다. 인라인 블록으로 만들고 모바일에서는 그 인라인블록을 블록으로 변경하시면 됩니다.