-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
inline-block 요소 가로배치 관련 질문입니다.
20.10.21 18:43 작성 조회수 360
2
안녕하세요!
강의를 들으면서 디스플레이 속성의 중요성을 느끼고 있는 중, 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 적용을 통해서 네비게이션이나 콘텐츠를 가로배치하는 경우는 드문가요?
감사합니다!
답변을 작성해보세요.
0
jinw0909
질문자2020.10.22
말씀해주신대로 vertical-align 속성을 적용해서 원하는 세로위치로 정렬됐습니다!
가로배치를 위해서 overflow: hidden을 적용해본건 강의에서 float: left 시킨 이미지 옆에 p태그 택스트가 넘칠때 깔끔하게 가로배치 시키기 위해서 p태그에 overflow: hidden을 적용시키시는걸 보고 혹시나 해서 해본건데, 이 부분도vertical: align으로 배치하니까 해결 됐습니다.
앞으로도 궁금한 점이 있으면 질문 올리도록 하겠습니다 - 감사합니다!
0
코딩웍스(Coding Works)
지식공유자2020.10.21
<질문1>에서 두개를 인라인블록으로 하셨으면 둘 중에 하나에 vertical-align: middle을 주시면 됩니다. 그리고 같은 라인에 있는 인라인 블록이라 margin-top을 주면 폰트어썸 아이콘도 같이 움직입니다.
<div class="test">
<i class="fa fa-leaf"></i><h3>Heaing title</h3>
</div>
<style>
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.test .fa {
font-size: 20px;
vertical-align: middle;
margin-right: 10px;
}
.test h3 {
display: inline-block;
}
</style>
=====================================================
<질문2>에서 overflow: hidden을 왜 사용하셨는지 모르겠는데 인라인 블록으로 여러개 배치되면 인라인 블록 안의 텍스트 내용의 길이에 따라 높이를 위로 고정하시면 됩니다. vertical-align: top을 주시면 3개가 모두 위에 위치합니다.
네비게이션을 만들 때 인라인 블록으로 하시는 경우도 많이 있습니다. 이건 제작자의 취향입니다. 인라인 블록으로 만들고 모바일에서는 그 인라인블록을 블록으로 변경하시면 됩니다.
답변 2