HTML - 인용문과 줄 바꿈 요소

 <h2>블록 인용문</h2>
 <blockquote cite="https://tvn.cjenm.com/ko/misaeng/">
      <p>
        우리가 할 수 있는 노력은 과정이 전부야.<br />
        결과는 우리 손안에 있는게 아니야.<br />
        결과까지 서너개 넣으려다 보니까 <br />
        무리수를 두는 거야
      </p>
      <cite>드라마 &lt;미생&gt; 중에서</cite>
    </blockquote>

 

책이나 연설문, 논문의 일부 내용을 인용할 때 <blockquote>와 <q> 요소를 사용한다.

<blockquote>는 텍스트가 긴 문장을 인용할 때 사용한다. <blockquote>를 사용하면 자동으로 들여 쓰기가 적용되며 CSS margin 속성으로 들여 쓰기 간격을 바꿔줄 수 있다.

출처 정보를 명시해야 할 때 <cite>를 사용한다. <em>과 시각적으로는 동일하지만 다른 성격을 가지고 있다.

cite는 속성으로도 사용하는데 링크를 걸거나 시각적으로 보이지는 않지만 SEO나 스크린 리더등 웹표준과 웹 접근성 방면에서 이점을 갖는다.

 

<br/> line break 는 문장 내에서 줄 바꿈이 필요할 때 사용한다. 

MDN 설명에 따르면 <br> 요소를 문단을 나누고자 할 때 사용하면 웹 표준을 어기는 것뿐만 아니라 아무런 내용이 없기 때문에 웹 접근성 역시 위반하기 때문에 문단 구분을 하고자 하면 <p>를, 레이아웃을 변경하고자 할 때는 margin 속성을 이용해 변경할 것을 권장한다. 

<h2>인라인 인용구</h2>
    <p>
      인상깊은 드라마를 시청했는데 대사가 마음을 움직였어. 대사는<q
        cite="https://tvn.cjenm.com/ko/misaeng/"
      >
        우리가 할 수 있는 노력은 과정이 전부야</q
      >라는 말이었어.
    </p>

<q>는 문장안에서 짧게 인용했음을 나타내는 요소이다. 자동으로 <q>로 감싼 문장은 자동으로 " "가 붙는다. cite 속성을 적용할 수 있다.