UI 개발을 하다 보면 디자인 때문에 줄 바꿈을 하려고 <br/> 태그를 사용할 일이 참 많다!!
절대 없지는 않다!!
일반적으로 <br/>태그를 사용하는 것은 문제가 되지 않는다.
하지만 장점과 단점 있다.
1. 일반적으로 고정 문장일 경우 html 파일의 <br/> 태그를 사용할 경우 아래와 같이 노출됩니다.
<!DOCTYPE>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<p>
나는 너고 하지만,<br/>
나는 너가 아니다!
</p>
</body>
</html>
*웹 화면에서 노출 시
나는 너고 하지만,
나는 네가 아니다!
*스크린 리더기 : 읽고 한번 쉬고 다시 읽어 준다고 한다.
단점 : 듣는 입장에서 한 문장이 아니 다른 문장으로 인식할 수 있습니다.
나는 너고 하지만,
나는 네가 아니다!
하지만, html 파일의 <p> 태그에 고정 문구가 아니라, react.js 또는 vue.js, script 등으로 <p> 태그 안에 상황에 맞게 변경 또는 react.js은 경우 고정 문구라고 해도 아래와 같이 노출 시 <br/> 태그를 그대로 노출이 된다.
2. React.js에서는 <br/>를 사용할 경우, 아래와 같이 출력됩니다.
const text = "나는 너고 하지만, <br/>나는 너가 아니다!"나는 너고 하지만, <br/>나는 네가 아니다!
react.js에서는 <br/>태그를 사용하기보다는 css 상에서 white-space: pre-wrap을 사용하기를 권장한다.
또는 변경해야 문구일 경우에는 <br/>태그 대신 개행 문자('\n')을 인식하기 때문에 줄 바꿈 한 결과물을 노출시킬 수 있다.
3. vue.js에서는 <br/>태그를 html 태그가 아닌 텍스트로 인지하기 때문에 줄 바꿈이 적용되지 않는다.
<div v-html="content"></div>
<script>
computed: {
content() {
return this.content.split('\n').join('<br>');
}
}
</script>
4. <pre></pre>태그를( 고정 너비 글꼴로 표시되며 텍스트 공백과 줄 바꿈을 모두 유지합니다.) 사용하여 css로 내가 원하는 스타일로 잡는 방법도 있다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
</head>
<style>
pre{
width: 100px;
height: 100px;
text-align: center;
}
</style>
<body>
<pre>
나는
너고
하지만,
나는
너가
아니다
</pre>
</body>
</html>위와 같이 코딩할 경우 아래와 같이 노출이 된다.
나는
너고
하지만,
나는
네가
아니다
만약, 반응형으로 노출되기를 원한다면 'width', 'white-space'를 사용하여 노출하는 방법도 있다.
디자인과 기획, 개발의 따라 방법은 여러 방법이 나올 수 있다.
'UI 개발의 모든 것 > HTML5' 카테고리의 다른 글
| html5에서 <**>은 태그?? 요소? (1) | 2023.09.05 |
|---|---|
| 브라우저의 접근성!! (0) | 2023.09.04 |
| Block 태그는 무엇?? Inline 태그는 무엇?? (0) | 2023.03.16 |
댓글