Console.log Styling, Ascii Art

💬 Preview

💬 Ascii Art

쉽게 생각해 텍스트와 특수문자만을 조합하여 그림을 따라하는 예술(?)을 말함.
'>..<", ": )" 같은 것들도 텍스트로 그림을 흉내냈다는 점에서
아스키 아트라고 할 수 있다.

(현재 내 벨로그 프로필 사진을 Ascii Art로 변환한 것이다)

아스키 아트 변환은 https://wepplication.github.io/tools/asciiArtGen/
위 사이트에서 할 수 있다.

💬 Console.log Styling

'console.log()' 는, Web Console에 문자를 출력하는 함수입니다.
보통의 경우, 개발자들이 값을 확인할 때 쓰는데,
이를 이용해 숨겨진(?) 이스터에그(?)를 만들 수 있습니다.

아래 코드가 그 예시입니다.

console.log("%c검은색 %c갈색 %c빨간색 %c주황색 %c노란색 %c초록색 %c파란색 %c보라색 %c회색 %c흰색 %c금색 %c은색",
      "color: black", "color: chocolate", "color: red", "color: orange", "color:yellow", "color:green", "color:blue", "color:purple", "color:gray", "color:white", "color:gold", "color:silver");

(그러니까 이게 본인 전공할때 배우던 건데... 저항 띠색깔...)

그래서 위에서 언급한 아스키 아트와 연결하면 아래와 같이 사용할 수 있습니다.

console.log(`%c\n
      :::::::::  :::::::::: :::::::::
      :+:    :+: :+:        :+:    :+:
      +:+    +:+ +:+        +:+    +:+
      +#++:++#:  +#++:++#   +#+    +:+
      +#+    +#+ +#+        +#+    +#+
      #+#    #+# #+#        #+#    #+#
      ###    ### ########## #########
      `, `color:red`);

      console.log(`%c\n
      ::::::::  :::::::::  :::::::::: :::::::::: ::::    :::
     :+:    :+: :+:    :+: :+:        :+:        :+:+:   :+:
     +:+        +:+    +:+ +:+        +:+        :+:+:+  +:+
     :#:        +#++:++#:  +#++:++#   +#++:++#   +#+ +:+ +#+
     +#+   +#+# +#+    +#+ +#+        +#+        +#+  +#+#+#
     #+#    #+# #+#    #+# #+#        #+#        #+#   #+#+#
      ########  ###    ### ########## ########## ###    ####
      `, `color:green`);

      console.log(`%c\n
      :::::::::  :::        :::    ::: ::::::::::
      :+:    :+: :+:        :+:    :+: :+:
      +:+    +:+ +:+        +:+    +:+ +:+
      +#++:++#+  +#+        +#+    +:+ +#++:++#
      +#+    +#+ +#+        +#+    +#+ +#+
      #+#    #+# #+#        #+#    #+# #+#
      #########  ##########  ########  ##########
      `, `color:blue`);

끝!