Peep

뒤에 필수표시(*)를 적용 시키려고 하다가 발견한 이슈로...

word-break="keep-all"이 아닌 경우에는 붙이기가 굉장히 쉬웠다.

그냥 position: absolute해서 우측에 가져다가 붙이면 되니까.

여기서 이제 모바일에서 단어 기준으로 끊으려고 하다 발견.

떨어지는 공백 '자차'의 크기만큼 영역이 유지되고 있다.

따라서 떨어지는 글자수의 값이 다르면 필수표시(*)의 위치 값도 달라진다.

중요한 이슈가 아니다보니, 그냥 줄 바꿈 처리를 위해서 문자열 끝에 붙이기로 했다.

사용자에이전트란?

"

사용자 에이전트는 사용자를 대신하여 일을 수행하는 소프트웨어 에이전트이다.

예를 들어, 이메일 리더에서는 메일 사용자 에이전트이고, 사용자 에이전트를 뜻하는 용어인 세션 개시 프로토콜에서는 통신 세션 양 쪽 끝을 말한다

"
- 위키백과

주로 User agent string로 브라우저를 체크하여 방문자를 분기하는 작업을 할때 쓰고는 했습니다.

브라우저를 체크하는 스크립트에서 user agent를 사용한 예시를 보겠습니다.

점진적 삭제를 결심하게된 이유

개인정보 강화

- UA(User agent string)에는 브라우저이름, 브라우저버전, OS이름, OS버전등을 담고 있기 때문입니다.

구글 측 "한번 사용한 매케니즘이 다른 측면의 골치거리가 됐다."

정리가 잘 된 글

https://kkumalog.tistory.com/81

계획

- chrome 81(2020/3) : 경고 표시

- chrome 83(2020/6) : 버전 정지, OS 버전 통합

- chrome 85(2020/9) : 데스크톱 OS 문자열 브라우저 공통 값으로 통합, 모바일 OS/ 기기 문자열 비슷한 공통값으로 통합

또한 타 브라우저들도 UA 점진적 삭제를 지지한다고 표명했습니다.

하지만 시행 여부 및 시행일자는 확정되지않았습니다.

점진적 삭제에 대한 기사

국내 https://www.zdnet.co.kr/view/?no=20200115102836:

국외 https://www.zdnet.com/article/google-to-phase-out-user-agent-strings-in-chrome/

대안으로 나온 client Hint

https://wicg.github.io/ua-client-hints/

client hint 메타태그 예시

https://frontdev.tistory.com/entry/%EC%9D%B4%EB%AF%B8%EC%A7%80-User-Agent%EA%B0%80-%EC%82%AC%EB%9D%BC%EC%A7%84%EB%8B%A4%EA%B3%A0-%EC%9D%B4%EB%AF%B8%EC%A7%80-Client-Hints-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

javascript 예시

https://medium.com/@galmeiri/get-ready-for-chrome-user-agent-string-phase-out-c6840da1c31e

관련해서 읽어볼 유익한글

User-Agent Client Hints의 도입, UA 프리징을 대비하라

d2.naver.com/helloworld/6532276

checkbox를 커스텀하는 예제입니다. radio도 똑같은 방법으로 커스텀하면 될 것 같습니다.

HTML

<div class="wrap">
  <input id="agree" type="checkbox">
  <label for="agree">
    <span>환불 계좌 정보를 정확하게 입력하였습니다.</span>
  </label>
</div>

CSS

.wrap input[type="checkbox"]{ 
	position:absolute; 
    width:1px; 
    height:1px; 
    padding:0; 
    margin:-1px; 
    overflow:hidden; 
    clip:rect(0,0,0,0); 
    border:0; 
}
.wrap input[type="checkbox"] + label{ 
	display:inline-block; 
    position:relative; 
    padding-left:26px; 
    cursor:pointer; 
}
.wrap input[type="checkbox"] + label:before{ 
	content:''; 
    position:absolute; 
    left:0; 
    top:3px; 
    width:18px; 
    height:18px; 
    text-align:center; 
    background:#fff; 
    border:1px solid #ccc; 
    box-sizing:border-box; 
}

/* 보여질 부분의 스타일을 추가하면 된다. */
.wrap input[type="checkbox"]:checked + label:after{ 
	content: ''; 
    position:absolute; 
    top:3px; 
    left:0; 
    width:18px; 
    height:18px; 
    background-color:skyblue;
}

예제

See the Pen xxwMxYX by leeyoonseo (@okayoon) on CodePen.

CSS만 사용하다가 SASS, SCSS로 작업을 해보고 싶다는 생각을 종종하고는 했었다.

하지만 컴파일이 필요했었던터라 실제로 행동으로 옮기는데 까지는 시간이 좀 걸렸다.

gulp로 테스트 작업을 해본적은 있었으나 그게 전부였다.

그러던 중에 VSCode 에디터에 extension이 있어서 진짜 쉽게 작업할 수 있는 것을 찾았다!

VSCode Extension 다운로드

- Sass

- Live Sass Compiler (실시간 컴파일한 것을 확인)

-> Live Server (라이브 서버, Live Sass Compiler를 다운로드 받으면 종속성으로인해 같이 받아집니다!)

필수는 아니지만 문법을 도와주는 Extension

- Sass lint

Extension을 다운로드받게되면 우측 하단의 파란색 바에 Sass 관련 툴이 제공된다.

VSCode Extension Setting

- settings.json 수정

File > Preferences > Settings 혹은 단축키(Ctrl + ,)

User와 Workspace 중에서 선택

User는 사용자 설정으로, VSCode 전체에 적용

Workspace는 작업공간 설정으로 해당 프로젝트에 적용

(Lint 사용 시 Check)

그리고 사용자 설정을 봍붙해서 사용하고 싶다면 검색창에 use split 쳐서 체크해준다.

저거를 체크하면 넣어야하는 세팅과 설명을 볼 수 있다.

- Ctrl + p 단축키 클릭 후 settings.json 검색 후 클릭

위에서 use split JSON 체크를 했으면 아래와 같이 왼쪽에는 예시가 보일거고 오른쪽에는 내 settings.json 파일이 열릴것이다.

확인한 후 사용하고 싶은 세팅코드가 있다면 연필 아이콘 누른 후에 Copy to Settings 클릭

적용된 것을 확인할 수 있다.

- 위에서 코드를 찾아서 추가, 혹은 검색 후 해당하는 세팅 코드를 추가한 후 저장한다.

아래는 예시코드입니다.

예시

{
    "editor.detectIndentation": false,
    "workbench.iconTheme": "material-icon-theme",
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "workbench.editorAssociations": [
    ],
    "files.associations": {
        "*.tpl": "html"
    },
    "window.zoomLevel": 0,
    "sass.lint.enable": true,
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
    ],
    
    // 아래부터 추가
    "liveSassCompile.settings.formats":[
        {
        	// 참조 문서에서 압축관련 확인
            "format": "compressed", 
            
            // output 파일
            "extensionName": ".min.css",
            
            // output 파일경로
            "savePath": "~/" 
        }
    ],
    
    // map 생성 여부
    "liveSassCompile.settings.generateMap": true,    
    
    // 크로스브라우징
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],
    
    // 모든 .scss 파일
    "liveSassCompile.settings.includeItems":[
        "*.scss"
    ]
}

세팅 옵션을 확인해보세요.

참조 문서 : https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

압축 참조 문서 :  https://designmeme.github.io/ko/blog/sass-comments/

SCSS 컴파일 방법

1.해당 SCSS파일에서 단축키(Ctrl + p) 눌러서 'live sass: watch sass' 검색어 입력 > 클릭

2.우측 하단 파란색 바에서 제공하는 툴 클릭

그후 저장(Ctrl +S)하게 되면 파일이 생성된다. 

세팅에 추가한 경로대로 아래와 같이 생성된다.

설정한경로/{기존파일이름}.설정한확장자

파일이 생김과 거의 동시에 output에서도 확인가능하다.

컴파일 1,2 번을 반복해서 watch sass를 끄게되면 파일에 수정이 있어도 업데이트가 되지 않는다.