사진과 글자 나란히 놓기

사이트를 만들다보면 사진과 글자를 나란히 놔야할때가 생각보다 흔하다.

단순히 박스 두개 만들어서 내용을 적으면되겠지 했었는데, 구성을 처음에 잘해야지 아니면 몇번을 수정해야한다는것을 (삽질)배웠다.

1. div 박스안에 list 2개 넣기.

일단 내가했던 시행착오를 적어보자면, 박스안에 왼쪽에 사진 오른쪽에 글자를 넣어야할때 레이아웃을 어떻게 잡을까 고민했다.

처음에는 이미지 박스 하나에 div 박스 만들어 안에, list 2개를 나란히 두려고 했는데 그럴듯해 보이나, css 를 하다보니 글자의 높이가 삐뚤어 지는 문제가 생긴다. 예 Name부분은 위로 살짝 올라가고, Rebecca는 살짝 내려간다던지 padding을 같은 값을줘도 그런 문제가 생겼다.

2. table로 레이아웃잡기

그래서 그 다음으로 태그를 이용해 이미지를 넣은 table형식으로 만들까했으나 모바일 반응형으로 만들때, 이미지와 글자가 세로 형식으로 배치되어야해서 다른방법을 찾아야했다.

3. ul 하나에 span2개 사용

마지막으로찾은 방법은 div 안에 img , ul을 만들고 li 안에 2개의 span을 넣고 첫번째 span의 뒤에 공백을 넣는 방법을 이용했다.
그러면 모바일에서도 괜찮고, 문제 없어보인다.

코드

import React from 'react';
import styled from 'styled-components';

const Wrap = styled.div`
  display: flex;
  flex-direction: row;
  background: #ccadbb78;
  max-width: 62%;
  margin: 0 auto;
`;
const Img = styled.img`
  heigth: 150px;
  width: 180px;
`;
const Div = styled.div`
  margin: 0 auto;
  padding: 10px;
`;

const Span = styled.span`
  &:after {
    content: '';
    display: block;
    width: 80px;
  }
`;
const Li = styled.li`
  text-align: start;
  padding-top: 1%;
  display: flex;
  padding-left: 10px;
`;
const ContextWrap = styled.div`
  display: flex;
  flex-direction: row;
  width: 70%;
`;
const Chart = () => {
  return (
    <Wrap>
      <Div>
        <Img src="img/zas.JPG" alt="cow" />
      </Div>
      <ContextWrap>
        <ul style={{ padding: '0px' }}>
          <Li>
            <Span>Name</Span>
            <span>Rebecca</span>
          </Li>
          <Li>
            <Span>Email</Span>
            <span>leejoeun0948@gmail.com</span>
          </Li>
          <Li>
            <Span>Skill</Span>
            <span>Javascript, React, Oracle</span>
          </Li>
          <Li>
            <Span>Nation</Span>
            <span>South Korea</span>
          </Li>
        </ul>
      </ContextWrap>
    </Wrap>
  );
};

export default Chart;

초보 개발자라 부족한점이 있습니다. 피드백 달게 받겠습니다!