white-space: pre 사용할때 왼쪽에 생기는 공백을 없앨수 있는 방법이 있을까요?
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)
- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다
- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
4:53분에 나오는 예시에서 pre로 설정한 부분들은 default랑 다르게 좌측이 띄어져서 나오는데 그 부분을 없애려면 어떤걸 바꿔줘야 하나요?
답변 1
0
안녕하세요. 답변 도우미입니다.
white-space: pre 속성을 사용할 때 발생하는 왼쪽의 공백을 없애고자 한다면, HTML에서 해당 요소에 적용되는 공백이나 줄바꿈을 실제로 제거하거나, CSS를 조정하는 방법을 고려해볼 수 있습니다. white-space: pre는 요소 내의 공백과 줄바꿈을 그대로 유지하는 역할을 하기 때문에, HTML 코드 내에서 불필요한 공백이나 줄바꿈이 실제로 존재한다면 이를 직접 제거해야 합니다.
예를 들어, 다음과 같이 HTML 코드에서 pre 태그나 white-space: pre가 적용된 요소 앞에 공백이나 줄바꿈이 있다면:
```html
<div style="white-space: pre;">
여기에 텍스트가 있습니다.
</div>
```
이 경우, HTML에서 공백이나 줄바꿈을 제거하여 div 태그 바로 앞에서 시작하도록 수정할 수 있습니다:
```html
<div style="white-space: pre;">여기에 텍스트가 있습니다.</div>
```
만약 HTML 코드를 변경하기 어렵거나, 다른 이유로 HTML 수정이 불가능한 경우, CSS를 사용하여 시각적으로 공백을 조정하는 방법도 있습니다. 예를 들어, text-indent 속성을 사용하여 첫 줄의 들여쓰기를 조정하거나, margin이나 padding을 조정하여 요소의 위치를 조정할 수 있습니다. 하지만, 이러한 방법은 white-space: pre가 적용된 요소의 고유한 공백 처리 방식에 영향을 주지 않기 때문에, 주로 시각적인 조정에 한정됩니다.
감사하빈다.
교육기간을 연장할 수 있는지 문의드립니다.
0
38
1
메일 확인부탁드립니다
0
57
1
CodeSandbox Vanilla 질문있습니다
0
59
1
part1을 수강하지 않아도 지장이 없다 하셨는데
0
107
1
강의에 관해 문의 드립니다.
0
90
1
메일확인 부탁드립니다.
0
91
1
14강 - 72,73번 강의 영상이 동일한거 같습니다.
0
106
1
Symbol 관련 테스트 코드 실행 결과 문의
0
141
1
호환성 관련 태그
0
120
1
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
0
136
1
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
0
144
1
div id="highlighter"가 강의화면에는 없는데 왜 샌드박스파일에는 있는지 궁금해요
0
86
1
강의화면에 height 가 vh가 아닌 vw라고 나와있는데 뭐가맞는거죠
0
117
1
메일 확인 부탁드립니다.
0
146
1
메일 확인 부탁드립니다
0
150
1
특별한 형태의 javascript배열에서
0
135
1
메일 확인부탁드립니다!
0
160
1
codesandbox 업데이트..
0
144
1
pdf 파일에 있는 링크주소로 들어가지지가 않습니다.
0
266
2
강의에서 알려주신 Properties for the flex container 복습 사이트, 검색 발견되어서 공유드립니다~
0
152
1
removeEventlistener 를 왜 해주어야 하는지
0
227
1
100vw 관련 질문
0
335
2
VS CODE html:5 <tab>기능이 안됩니다
0
350
1
[모던웹페이지 만들기9](1:40)class-desc 카드부분관련
0
247
2