issue

위와 같이 placeholder 속성에 @@iptPlaceholder라는 이상한 속성값이 들어가는 것을 확인.

해당 부분인데, gulp-file-include 모듈을 사용한 부분입니다.
보면 JSON 객체 전달 부분에 "iptPlaceholder" 전달값은 없습니다.

그렇기 때문에 해당 전달값이 없을 경우엔 @@inpPlaceholder 값이 그대로 들어가버리는 것입니다.

이를 해결하기 위해 위와 같이 빈 문자열을 추가해줍니다.

위와 비슷한 이슈입니다.
특정 페이지의 레이어 팝업을 수정하여야 했는데, 해당 ly-leave 레이어 팝업은 여러 페이지에서 사용되고 있기 때문에 ly-leave의 스타일을 수정하면 다른 페이지에도 영향을 줄 수밖에 없는 상태였습니다.

그래서 위와 같이 JSON 객체로 className 속성을 전달하고,

layer.html에서 위처럼 작성해서 className 속성을 받도록 하였습니다.
하지만 이렇게하니, className 속성을 전달받지 않은 페이지에서는 모두 @@className 클래스명이 추가되었습니다.

이를 해결하고자 위에처럼 @@if문을 사용했습니다.
하지만 이번엔 gulp-file-include 에러가 떴습니다.
className is not defined 라는 메시지와 함께 말입니다. (캡쳐못함)
이는 모든 파일이 JSON 객체로 className 속성을 전달하지 않기 때문에 className이 정의되어 있지 않기 때문입니다.

이러한 문제를 해결하기 위해 gulpfile.js에서 위와 같이 className 속성을 모든 페이지에서 인식할 수 있도록 적어줬습니다.

이 이슈의 전제조건 - remote 브랜치에 push가 안되어있는 상황일 때, 가급적이면 이럴때만 아래 명령어 사용.
안 그러면 충돌날 확률이 매우 큼

직전 커밋을 수정하고 싶을 때: git commit --amend
과거 커밋의 내용을 수정하고 싶을 때: git rebase -i <commit>
git commit --amend
git rebase --continue
rebase 취소 방법: git reflog <branch 명> // 이 명령어로 어떤 커밋으로 되돌릴지 확인
git reset --hard <commit 번호> // 되돌리고 싶은 커밋 시점
git log // 확인

line-height:20px
line-height:normal
줄 간격에는 단위를 사용할 수 있지만 일반적으로 단위를 사용하지 않는 것이 좋습니다.
그 이유는 1.2em dlsk 120% 와 같이 단위 있는 값을 사용하게 되면 계산 결과를 자손 요소까지 상속하게 되기 때문입니다.
이러한 차이점에 대해 알아보도록 하겠습니다.

위에서 언급했듯이 단위를 가진 줄 간격은 자식요소까지 상속된다고 했습니다.
아래의 마크업과 CSS를 살펴보도록 합시다.

                    
                        <ul>
                            <li>Lorem ipsum dolor sit amet.</li> 
                            <li>consectetur adipisicing elit. <span>Odit, porro!</span></li> 
                        </ul>

                    
                        ul { font-size: 15px; line-height: 1em; }
                        li { font-size: 10px; }
                        span { font-size: 80%; }

ul 요소의 줄 간격은 15px로 계산되어집니다.
줄간격을 계산할 때는 em 단위, % 단위와 마찬가지로 요소 자신의 font-size를 기준으로 계산하게 됩니다.
ul 요소에서 폰트사이즈 15px을 선언했으므로 15 * 1em = 15px로 계산됩니다.

여기서 중요한 점은 계산된 값인 15px이 자손요소로 상속된다는 점입니다.
즉, li 요소와 span 요소가 15px이라는 줄 간격을 상속받습니다.
li 요소와 span 요소는 자신의 글씨 크기를 기준으로 줄 간격을 다시 계산하지 않습니다.
부모의 값 15px으ㅏㅣ 값을 상속받고 그것을 그대로 사용하게 됩니다.
다음과 같이 선언된 것처럼 상속될 것입니다.

                    
                        ul { font-size: 15px; line-height: 1em; }
                        li { font-size: 10px;; line-height: 15px; }
                        span { font-size: 80%; line-height: 15px; }

물론 li 요소에 명시적으로 line-height 다른 값을 부여하면 재선언되겠지만 사용자 의도에 따라 불필요할 수 있습니다.

참고로 위 CSS에서 line-height 의 다른 값을 적용하게 하려면 span 요소를 인라인블록 요소로 바꾸어 주어야 합니다.

이제 줄 간격 값에서 em 단위를 제거하고 단위없는 정수로만 사용한다고 가정해 봅니다.

                    
                        ul { font-size: 15px; line-height: 1; }
                        li { font-size: 10px; }
                        span { font-size: 80%; }

위와 같이 단위없는 줄 간격을 선언하게 되면 이제 li 요소와 span 요소로 그 숫자가 전달되게 됩니다.
그럼 자손 요소에서 전달받은 숫자를 곱해서 줄 간격을 계산하게 되며, UL 요소에서 계산한 줄 간격은 상속받지 않습니다.
다시 말해, 1이란 숫자를 전달받은 모든 요소에서 자신의 font-size 에 1을 곱해서 줄 간격으로 사용하게 됩니다.

li 요소의 font-size 는 10px 이므로 줄 간격도 10px이 되고, span 요소도 font-size 8px 에 1을 곱해서 8px 의 줄 간격이 사용되게 될 것입니다.

li 요소의 font-size 가 10px 이므로 자식 요소인 font-size 가 80%이르로 10px 의 80% 로 font-size 는 8px 입니다.

위에서 선언한 line-height: 1; 로 인해 CSS 는 다음과 같은 값을 지니게 될 것입니다.

                    
                        ul { font-size: 15px; line-height: 1; }
                        li { font-size: 10px; line-height: 10px; }
                        span { font-size: 80%; line-height: 8px; }

이러한 이유 때문에 html 요소나 body 요소, 혹은 자손 요소가 있는 모든 요소에 줄 간격을 단위 없이 숫자만 사용하는 것이 많은 이점을 가져올 수 있습니다.

추론
해당 폰트 사이즈에 비례해서 baseline이나 xline 등등이 설정되어야하는데,
line-height는 고정되어있고 font-size만 0이니깐,
그리고 vertical-align: baseline이다 보니, 빈노드들이 baseline에 정렬되는데, font-size:0이면 실제 레이아웃을 차지하는 line-box는 높이가 0이되지만 글자들이 차지하는 영역(content area)은 font-size가 0이라도, baseline topline xline, bottomline 등등 해서 0이아니게 됩니다.
그런데 영역은 line-box로 결정되기 때문에 공간을 차지하지 않아서 밑으로 떨어진다. 하지만 아이러니하게도 content area는 있기 때문에 그만큼 영역이 벌어진 것
보통 line-box는 content-area보다 크다. 즉, 이래서 line-height:1, 그리고 단위를 주지말라는 이유가 여기에 있다.
여튼 line-height는 고정값이다보니, (px) font-size는 0이라도 다른 라인들 때문에, 밑에 공간이 생기는듯.
즉, line-height를 단위없이 비율로 상속받게하면 font-size에 맞는 line-height를 상속받게되므로 이런 문제가없는 거 같다.

업무일지 라인 3주차