코드블럭 내 들여쓰기 문제 해결

코드블럭 내 들여쓰기 문제 해결

Summary:

코드블럭이 자동 들여쓰기가 되는 문제의 원인을 파악하고 해결했습니다.


문제 파악

기본으로 세팅되어 있던 코드 블럭이 맘에 들지 않아서 속성을 바꾼 적이 있다.

비포


애프터


.scss 코드를 변경할 때 첫 줄 들여쓰기가 되도록 설정한 적이 없는데 코드블록 안 첫번째 줄이 들여쓰기가 되는 현상이 생겼다. 변경한 코드는 아래와 같다.

code,
tt
	padding: 1px 0
	font-family: $fontMonospace
	font-size: 12px
	line-height: 20px
	background: #fff
	border-radius: 2px
	border-radius: 2px

pre
	box-sizing: border-box
	margin: 0 0 1.75em 0
	width: 100%
	padding: 5px 10px
	font-family: $fontMonospace
	font-size: 1.2rem
	line-height: 2rem
	overflow: auto
	background: #fff
	border: 1px solid $epsilon
	border-radius: 2px
code,
tt
	padding: 3px 5px               // 테두리와의 간격 늘림
	font-family: $fontMonospace
	font-size: 13px                // 글자 크기 증가
	line-height: 20px
	background: $codebackground    // 배경색 변경
	margin: 0 5px 0 5px            // 글자 주변 거리 늘림
	border-radius: 5px             // 테두리 굴곡 동그랗게
	font-weight: 400               // 글자 굵게

pre
	box-sizing: border-box
	margin: 0 0 1.75em 0
	width: 100%
	padding: 5px 10px
	font-family: $fontMonospace
	font-size: 1.2rem
	line-height: 2rem
	overflow: auto
	code                           // tt pre 영향주지 않게 
		background: none
	background: #fff
	border: 1px solid $epsilon
	border-radius: 2px

하나씩 바꿔보기

뭘 잘못했는지 바로 눈에 들어오지 않아서 변경사항을 다 초기세팅으로 되돌린 뒤 한 줄씩 바꾸면서 커밋했다. 이렇게 하면 시간은 걸릴지라도 어떤 코드가 들여쓰기에 영향을 주는 지 알 수 있다.

범인은 이 녀석이다.

code,
tt
	margin: 0 5px 0 5px            // 글자 주변 거리 늘림

margin이 왜 문제일까

* [case 1] margin: 0 0 0 0

code,
tt
	margin: 0 0 0 0

너무 빡빡하다. 좌우를 늘려야겠다.

* [case 2] margin: 0 5px 0 5px

code,
tt
	margin: 0 5px 0 5px

좌우에 여유가 생긴다.

* [case 3] margin: 0 20px 0 0

code,
tt
	margin: 0 20px 0 0

오른쪽 여백이 늘어난다.

* [case 4] margin: 0 0 0 20px

code,
tt
	margin: 0 0 0 20px

왼쪽 여백이 늘어난다.


[case2] 가 가장 안정적이었다. 그러나 이 때 왼쪽 여백이 증가함에 따라 코드블럭의 첫째 줄에도 왼쪽 여백이 증가하는 결과가 생겼다. (근데 왜 첫째 줄만 마진이 늘어나는거지? 마진은 왼쪽 전체에 대해 늘어나야되는거 아닌가? 우선 이 질문은 보류.)


문제를 해결하자.

해결법은 2가지로 나뉜다.

  1. tt(낱말코드 속성)의 마진 없애기
  2. tt에서 마진을 유지하되 pre(여러 줄 코드)일 때는 tt의 마진이 반영되지 않도록 설정하기

1번 방법을 쓰면 여러 줄 코드에서 첫 줄 들여쓰기가 없어지는 대신 낱말코드 양옆이 너무 빡빡해져서 싫다. 2번을 시도하자.

2번 방법 시도

pre 안에 대해서는 code의 margin 설정을 사용하지 않도록 두고 블로그를 새로고침했다.

code,
tt
	margin: 0 5px 0 5px

pre
	margin: 0 0 1.75em 0
	code                           
		margin: none

결과 화면

변한 게 없다.

2번 방법 재시도

pre 안에 margin이 이미 있기 때문에 얘가 못 알아듣는 건가 싶어 pre의 margin 을 margin-bottom으로 바꿔봤다.

code,
tt
	margin: 0 5px 0 5px

pre
	margin-bottom: 1.75em
	code                           
		margin: none

결과 화면

역시나 변한 게 없다.

2번 방법 재재시도

margin: nonemargin: 0 0 0 0으로 바꾸면 될까?

code,
tt
	margin: 0 5px 0 5px

pre
	margin-bottom: 1.75em
	code                           
		margin: 0 0 0 0

결과 화면

는 fail.

2번 방법 재재재시도

margin: 0 0 0 0이 안먹히니까 아예 왼쪽으로 더 보내버릴 생각으로 0 0 0 -10px를 해봤다.

code,
tt
	margin: 0 5px 0 5px

pre
	margin-bottom: 1.75em
	code                           
		margin: 0 0 0 -10px

결과 화면


오!!!!! import가 왼쪽으로 움직였다. 이제 알겠다. tt가 +5px 일 때 pre가 0px 이면 pre 안 code는 5+0=5px 만큼 튀어나온다. 따라서 pre가 -10px 이면 pre 안 code는 5-10=-5px 만큼 튀어나온다. 결국 pre 안 code를 margin: 0 0 0 -5px로 두면 되는 문제였다.

2번 방법 재재재재시도

margin: 0 0 0 -5px으로 바꿨다.

code,
tt
	margin: 0 5px 0 5px

pre
	margin-bottom: 1.75em
	code                           
		margin: 0 0 0 -5px

해결!


최종 코드

code,
tt
	padding: 3px 5px
	font-family: $fontMonospace
	font-size: 13px
	line-height: 20px
	background: $codebackground
	margin: 0 5px 0 5px
	border-radius: 5px
	font-weight: 400

pre
	box-sizing: border-box
	margin: 0 0 1.75em 0
	width: 100%
	padding: 5px 10px
	font-family: $fontMonospace
	font-size: 1.2rem
	line-height: 2rem
	overflow: auto
	code
		background: none
		margin: 0 0 0 -5px
	background: #fff
	border: 1px solid $epsilon
	border-radius: 2px

결과 화면




Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora