cuddly mood

새로운 회사에서, 기존 작업하시던 분의 스타일시트를 보던 중에 발견한

BEM 클래스 네이밍 규칙.

작업을 이어받아 해야하기 때문에, 처음 접해본 나에게는 생소했다.

BEM이 어떤 방식인지 무엇인지 알아보기로 했다.

getbem.com/?ref=hackernoon.com

BEM은?

Block  Element  Modifier 의 약자로, CSS 클래스명 네이밍 규칙이다.

블록은 사이트 전체에서 재사용할 수 있고 아닐 수도 있는 독립 실행형 구성 요소이다. 

더 자세한 설명을 원하면, 상단 사이트를 참고하자.

그럼, BEM의 기본구조를 살펴볼까 한다..

Block, Element, Modifier 세가지로 구성된 이름을 짓는다.

그리고 각각 '__'와 '--'로 구분을 지어져 있다.

예를 들면, 

Block은 이요소가 무엇인지 나타내는 단어를 사용 한다.

Element는 Block을 구성하는 요소라고 생각하면 된다.

Modifier는 수식어로서 Block과 Element에 추가적으로 내용을 더할수 있고, 강조하거나 숨김등의 처리를 표현한다.

클래스 네이밍을 프로젝트마다 통일성 있게 사용하지만, 처음 접해보았던 BEM도 보다 많은 프로젝트의 적용된다고 한다.

BEM은 클래스 이름을 지정할 때  모듈성에 의해서 CSS를 최대한 활용하려고 하기 때문에 사용한다.

상속을 피하고 요소에 고유한 CSS클래스 명을 사용하여 일종의 범위 제공하는 점도 있다. 그리고 CSS의 특이성을 최소소준으로 유지하여 충돌 방지에도 좋은 것 같다.

이번 프로젝트에서 경험을 하면서 더 익숙해지게끔 사용해보려 한다.

Window10을 새로 설치하면 기본적으로 파일 확장자명이 숨겨진 상태로 나타납니다.

하단 화면을 보면, 파일의 확장자는 안보이고 제목만 보입니다.

원래는 javascript 파일이기 때문에, "ui.js" 표시가 되어야 합니다.

확장자명 볼 수 있는 방법에 대해서 알아봅시다!

파일확장자명 표시하는 순서.

파일탐색기에서 왼쪽 상단에  [파일]  목록 클릭하면 하위리스트들이 나온다.

거기서  [폴더 및 검색 옵션 변경]  클릭!

그럼  [폴더 옵션]  창이 뜹니다.

폴더 옵션 창 안에는 일반, 보기, 검색 세가지의 탭이있죠?

"보기" 로 클릭해서 들어갑니다. 크게 두 단락으로 나누어있어요. 그 중 "고급설정" 부분에서 스크롤을 이용해서 

하단 이미지에 선택되어있는 항목을 찾으시면 됩니다.

'알려진 파일 형식의 확장명 숨기기' 항목을 찾으셨으면, 체크되어있는 부분을 클릭해서 해지해주시고

하단에  [확인]  또는  [적용]  버튼을 클릭해서 내용을 저장해줍니다 :)

하단의 이미지에서 적용된 확장자명 표시를 확인해볼 수 있습니다.

ui이름 옆에 .js 확장명 확인하셨죠?^^!

신축년 새해를 맞이하여 다짐했던 일,  하고자 했던 일들을 하고있는가 생각해 보는중...!

고작 몇일 뿐이었지만 시작이중요하다 생각했고, 시작을 하려고 미라클 모닝 비슷하게 실천하고 있는 것 같았다.

(* 미라클 모닝 : 자기주도적으로 삶을 꾸리고, 스스로 돌보기 위한 시간을 만드는 것.)

새벽 5시30~6시 사이 일어나서 30~40분 책을읽고,

10분 스트레칭을 하고,

아침은 시리얼로 간단히 먹고,

1시간정도 동영상 강의를 듣기까지..

물론 내 기준, 12시 이전에 수면을 해야 깔끔하게 일어나서 집중적으로 세가지의 미션(?)을 달성할 수 있었다.

이렇게 일주일정도 실천해보니 눈에 띄는 장단점이 있다.

1. 내가 하고자하는 일에 더 집중할수 있다.

올해안에 꼭 하고싶은 일이있는데, 그 일을 하기에 앞서 기초공부를 하고있다.

새벽 조용한 시간에 집중이 더 잘되고, 잡생각이 없이 몰두해서 할 수 있다.

2. 하루가 길다.

사정이 생겨 일을 관두게 되었고, 갑자기 나의 일상이 바뀌니 점차 게으른 생활에 익숙함이 생겼고, 그 결과 살도같이 찌고 하루가 짧게만 느껴졌다. 늦게 일어나 늦게 자니 오후의 시간에 낮잠이 찾아온적도 많다...(낮잠에 관해서 부정적인 편인데..나도 모르게)

패턴을 바꾸어 12시 이전에 취침하고, 새벽시간을 활용하니 오후에는 또다른 일이나, 못한 공부를 더 진행할 수도 있게 되었다.

3. 스스로 노력하지 않으면 습관화 되기가 어렵다.

한번 깨지면 다시 습관화 되는 과정이 어려운 것같다. 나도 일주일밖에 못했기 때문이다..

음.. 그에 대한 변명은.. 갑자기(?)나의 생활패턴이 변경되었기에(출 to the 근^^)

급하게 이력서를 냈고, 다음날 인터뷰를 보았고, 바로 출근하게되었다. 수,목,금 3일만에 이루어져 다음주 월요일에 (출 to the 근^^)

다시금 회사를 들어오니,, 긴장을 하게되고 내가 계획했던 일들이 금방 무너져간다. 일부는 바뀌었고...

새해 다짐했던.. 목표로 하고있는(지금도) 계획했던 일도 조금 틀어진게 아쉽다..(1월이 끝나간다구..!!)

내가 그냥 지금 하는 일(경력이 많지않지만 지금하고있는 일)을 직장에 들어가서 하고있는 것이 답인가...?주말부터 내내 되내어본다.

나도 물론 우리집, 우리가정에 이바지를 하고싶기에 급하게라도 출근을 했지만.. 마음이 편하지가않다.

호강하고싶다고, 호강시켜달라는 남편의 말이 내내 머릿속에 맴돈다..

내가 지금 실천하고 해야하는일이 현실적으로 이게 맞는것일까..? 길게보면 내가 이일을 꾸준히 할것 같지도...관심이 많지도... 잘하지도 않는데 말이다... 이 끊을 내가 계속 잡고있어야 하는게 맞는건지 아침저녁으로 머리가 아프다아..

얼떨결에 직장에 들어갔지만..

올해 일로써 내가 목표했던 일이 있고..

특히나 올해 안으로 임신계획이 있고..

내년에는 육아를 해야 할테고..

고민의 연속인 하루하루지만,

당일의 받은 스트레스는 당일에 풀고,

앞으로는 어떻게해야할지 이번주안으로 생각해보자 ㅎㅎ!!

다시 시작하는 모닝루틴이 나에게 어떤 긍정적효과를 가져올지 기대해본다 :)

Visual Studio Code를 새로 셋팅하는 과정에서,

확장프로그램들과 더불어 글씨체 설정을 찾다가 바꿔보았다.

코딩을 할때, 한글이 들어가는부분 그리고 한글주석 등, 언어는 영문인데 한글과 섞어서 작업을 해야하는 경우가

대다수.. 미세한 차이로 인해서 한글 글씨체를 포기하고 영문에 맞게 주로 쓰고있다.

이 두가지를 한번에 깔끔하게 표현가능한 네이버의 개발 전용 폰트를 설정해보았다.

D2코딩 폰트는, 네이버에서 무료 배포하는 폰트 입니다.

다양한 OS(windos, mac, linex(ubuntu) 환경에서 사용할 수 있고, 코딩에서 사용되는 특수 문자들을 간결하고 가독성 있게 볼수 있도록 지원합니다. 또한 자간과 행간을 유지하도록 고정폭 글꼴로 제작되었습니다.

* d2codingfont 다운받기!

github.com/naver/d2codingfont/releases

1. 상단 D2codingfont 페이지에 접속 한 뒤, 쭉 내려보면 하단 부분과 같은 ~~~ .zip파일 클릭!

2. 다운로드를 받은 뒤 압축을 해제하면, 하단과 같은 세 파일이 있습니다.

    이중 가운데 폴더(모든것이 다 포함되어있는 전체 폰트)를 더블클릭 합니다.

3. 클릭해서 들어오면 노란체크되어있는 설치부분 버튼을 클릭하셔 설치를 완료합니다.

    (* 설치가 완료되었는지 확인하려면, 제어판 > 모양 및 개인설정 > 글꼴에서 'D2coding'검색 )

* Visual Studio Code에서 디투코딩 글꼴 설정하기!

파일 -> 기본설정 -> 설정 

하단과 같이 "Font Family"에 설정해주면 글꼴 변경 완료!