HTML의 행의 홀/짝수에 특정 태그를 넣어보기(nth-child(odd와 even))

HTMl의 1,3,5...같은 홀수 번째 행과
똑같은 2,4,6...같은 짝수 번쨰 행에 원하는 태그를 집어 넣을 수 있다.

<div class="testimonial">
      <img
        src="imgs/testimonial/man.jpg"
        alt="girl profile photo"
        class="testimonial__avatar"
      />
      <div class="testimonial__speech-bubble">
        <p>
          the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now 
        </p>
        <p class="name">
          <a href="http://www.naver.com">Kim Congsoon</a>/ SAMSUNG
        </p>
      </div>
    </div>
    <div class="testimonial">
      <div class="testimonial__speech-bubble">
        <p>
          the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now 
        </p>
        <p class="name">
          <a href="http://www.naver.com">Kim Congsoon</a>/ SAMSUNG
        </p>
      </div>
      <img
        src="imgs/testimonial/man2.jpg"
        alt="girl profile photo"
        class="testimonial__avatar"
      />
    </div>


.testimonial__avatar:nth-child(odd){
margin-right: 12px;
}

.testimonial__avatar:nth-child(even){
margin-left: 12px;
}

testimonial__avatar의 행은 총 2개가 들어가 있다.
따라서 첫번째 행(홀수 행)에는 nth-child(odd)를 사용해 margin값을 오른쪽에만 12px,
두번째 행(짝수 행)에는 nth-child(even)을 사용해 margin값을 왼쪽에만 12px 적용시켰다.

이렇게 html내에서 몇번쨰 행이냐에 따라서도 각각 다른 기능을 적용 시킬 수 있다.