[Tailwind Css] Container, Margin

<div className={""}>
    <h3>Article One</h3>
        <p>
        매월 70만원씩 5년간 저축하면 최대 5000만원 목돈을 마련할 수 있는
        ‘청년도약계좌’가 가입 신청을 재개한다. 2일 금융위원회는 청년도약계좌의
        7월 신청 접수를 오는 3일부터 14일까지 은행 영업일 중에 받는다고
        밝혔다. 청년도약계좌는 매월 가입을 신청할 수 있는데 이달의 경우 해당
        기간 영업일 중 출생연도와 관계없이 가입신청을 받는다. 청년도약계좌는
        출시 초반 신청자가 몰릴 것에 대비해 5영업일 동안 출생연도 끝자리로
        가입 신청일을 제한한 5부제를 적용해왔다. 11개 청년도약계좌 처리 앱으로
        오전 9시∼오후 6시 30분에 비대면으로 신청하면 된다. 가입 신청자는 은행
        앱에서 연령 요건, 금융소득종합과세자 해당 여부 등을 확인할 수 있다.
        이달부터는 지난해 소득이 확정되면서 2022년 기준 개인소득, 가구소득으로
        가입 가능 여부를 확인한다. 지난해부터 소득이 발생한 사회 초년생도
        신청할 수 있다.
        </p>
</div>

이런식으로 화면이 작아지고 길어지면 이에 맞게 글도 자동으로 따라오고 있다

<div className={"container"}>
        <h3>Article One</h3>
        <p>
          매월 70만원씩 5년간 저축하면 최대 5000만원 목돈을 마련할 수 있는
          ‘청년도약계좌’가 가입 신청을 재개한다. 2일 금융위원회는 청년도약계좌의
          7월 신청 접수를 오는 3일부터 14일까지 은행 영업일 중에 받는다고
          밝혔다. 청년도약계좌는 매월 가입을 신청할 수 있는데 이달의 경우 해당
          기간 영업일 중 출생연도와 관계없이 가입신청을 받는다. 청년도약계좌는
          출시 초반 신청자가 몰릴 것에 대비해 5영업일 동안 출생연도 끝자리로
          가입 신청일을 제한한 5부제를 적용해왔다. 11개 청년도약계좌 처리 앱으로
          오전 9시∼오후 6시 30분에 비대면으로 신청하면 된다. 가입 신청자는 은행
          앱에서 연령 요건, 금융소득종합과세자 해당 여부 등을 확인할 수 있다.
          이달부터는 지난해 소득이 확정되면서 2022년 기준 개인소득, 가구소득으로
          가입 가능 여부를 확인한다. 지난해부터 소득이 발생한 사회 초년생도
          신청할 수 있다.
        </p>
      </div>

여기에 container로 아래 글을 묶으면

화면 비율이 달라짐에 따라 container 크기가 자동적으로 변하고, 이에 따라 글의 배치도 변하게 된다.

Margin : 바깥 여백

m 

: right, left, bottom, top을 포함한 margin을 말한다.

mx-auto

: right, left의 margin을 자동으로 잡아준다.

my-auto

: bottom, top의 margin을 자동으로 잡아준다.

 

각 방향에 마진을 넣고싶다면 right(mr-), left(ml-), bottom(mb-), top(mt-) 이런식으로 코드를 짜면 된다.

<p className={"bg-gray-400 m-10"}>Hello world</p>
<p className={"bg-red-400 mr-10"}>Hello world</p>
<p className={"bg-orange-400 mb-10"}>Hello world</p>
<p className={"bg-yellow-400 ml-10"}>Hello world</p>
<p className={"bg-green-400 mt-10"}>Hello world</p>

(참고) mt-[20px]이런식으로 px단위로 줄 수도 있음