[HTM]HTML pre, code 태그

글상자를 따로 구성해줄수있는 태그.
통상 워드프레스 같은 태그를 사용할수있는 설치형 블로그에서 특정 문구에 구분을 두기위해 사용된다.
참고로 네이버 블로그에서는 사용 불가.


<pre>
<code>
쓰고자하는 문구
</code>
</pre>

위와같이 쓰면 아래와 같이 표기된다.


쓰고자하는 문구

위처럼 그냥 일반으로 사용하면 모바일이나 기타 화면크기나 비율이 다른 디바이스에서는 문구가 길어지면 화면이 옆으로 늘어난다거나 하는식으로 보기 안좋아지는데 아래 CSS 스타일을 적용함으로써 문구에 자동으로 라인리턴을 해준다.


<pre style="word-wrap: break-word;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-break:break-all;">
<code>
긴 문구를 테스트하기위해 뻘글을 길게 쓰고있습니다. 간장공장공장장은간공장장이고된장공장공장장은콩공장장이다. 가나다라마바사아자차카타바하가갸겨개게고교구규가거기그. ABCDEFGHIJKLMNOPQRSTUVWXYZ.
</code>
</pre>

스타일 적용을 하지 않았을때


긴 문구를 테스트하기위해 뻘글을 길게 쓰고있습니다. 간장공장공장장은간공장장이고된장공장공장장은콩공장장이다. 가나다라마바사아자차카타바하가갸겨개게고교구규가거기그. ABCDEFGHIJKLMNOPQRSTUVWXYZ.

스타일을 적용했을때


긴 문구를 테스트하기위해 뻘글을 길게 쓰고있습니다. 간장공장공장장은간공장장이고된장공장공장장은콩공장장이다. 가나다라마바사아자차카타바하가갸겨개게고교구규가거기그. ABCDEFGHIJKLMNOPQRSTUVWXYZ.

추가로 마이크로소프트 엣지에서는 스타일을 적용했을때와 아닐때의 차이가 없었다.
구글 크롬에서는 가로 스크롤이 생기게되는데 그것을 막아주는 역활을 해준다.