[TIL] 06.15 이미지와 텍스트 정렬하기

오늘은 css와 사투를 벌이고 왔다.... 컴포넌트 로직 짜는거 보다 css 적용하는게 더 힘든 것 같다.

 

이미지와 텍스트를 정렬해 주기 위해서 이미지와 텍스트를 <div> 로 감싸주고 각각을 <div>로 감싸는 형태로 만들어 주었다. 

 

<div>
    <div>
    	<Image/>
    </div>
    <div>
    	<Text/>
    </div>
</div>

제일 최상위 <div>에 width:100% 속성을 준다.그리고 이미지와 텍스트를 감싸고 있는 각각의 <div> 에 display: inline-block 과 width 속성을 적용해준다. width 속성은 image에 30%, text에 70% 이런 식으로 합이 100%이하가 되도록 지정하면 된다. 그러면 일단 이미지와 텍스트가 가로로 정렬이 될것이다. 

그리고 이미지 윗부분과 텍스트 윗부분이 일직선으로 정렬이 안되는 경우가 있을 수 있는데 이때 이미지와 텍스트에 vertical-align:top 속성을 주면 일렬로 정렬이 된다. 

 

여기서 또 애를 먹은 부분이 텍스트 바로위에 작은텍스트를 정렬해야 하는 일이였는데 이건 작은 텍스트에 line-height 을 적용하여 해결할 수 있었다. 

 

" test  |  100원 "  여기서 "|" 이 부분을  만들어 줘야 했는데 <div>와 <span>으로 감싸준 다음 vertical-align:top을 주고 position:absolute 와 transform: translate(X,Y) 속성을 사용하여 미세한 부분을 수정하여 만들어 줄 수 있었다. 

 

웹 뷰만 만들었다면 진작 끝났을 작업이였지만 반응형으로 들어거 가장 작은 모바일 화면 까지 고려하려고 하다보니 구조를 다시 바꾸기도하고 다양한 시도를 해야만 했고 시간이 꽤나 걸렸다. 그래도 또 새로운 것들을 많이 알아 갈 수 있었고 아직 마무리 하지 않은 작업에도 잘 써 먹을 수 있을것 같다.