CSS Advent Calendar 2019 12일째 보도입니다.

주의사항

CSS in console.log는 Chrome만 지원합니다.

CSS in console.저는 로그가 앞으로의 업무에서 전혀 사용할 기회가 없다고 생각하기 때문에 여러분들이 시원하게 읽으실 것을 건의합니다.(실용적인 사용 방법이 있으면 알려주세요)

작품만 보고 싶은 사람은 읽으세요응용편.

왜 써요?

CSS console.log에 적용되는 보도에서 이 세상에 진지하게 대접받는 보도는 존재하지 않겠죠 (불가능합니다)
문서도 없어요.
이러다 콘솔.로그를 화려하게 만들고 싶은 사람은 곤란하죠.
그런 사람을 돕기 위해 이 기사를 썼어요.

일단 해볼게요.

우선 평범한 콘솔입니다.log

console.log("We Are CSS");

물론 아무런 변화는 없다.
스타일을 정의합니다.

const textStyle = "color: teal;";

console.log("We Are CSS");

한마디로 teal은 CSS가 기본적으로 정의한 색깔로 CSS 색계의 정점에 군림하는 색깔로'입력이 쉽다','눈에 대한 부드러움','발음의 멋스러움'을 겸비하고 있다.
이렇게 되면 평소redblueyellow가 배경색으로 지정돼 눈이 아픈 사람은 한 발자국 차이로 볼 수 있다.
그나저나 정의된 스타일을 맞추기 위해 콘솔.log를 (으)로 변경합니다.

const textStyle = "color: teal;";

console.log("%cWe Are CSS", textStyle);

깜짝이야, 콘솔.log의 글자 색깔이 바뀌었네요.
자세한 내용은 나중에 설명
"CSS의 문자열을 두 번째 매개 변수에 맡기면 %c 이후의 문자는 스타일이 있습니다."
그렇게 생각하세요.

입문서

그래서 왔습니다css in console.log入門編.
누가 입문한다고 들었는데, 나는 쓸 것이다.

여러 속성 사용

아까 콘셉트가 그랬어요.

const textStyle = "color: teal;";

하면, 만약, 만약...

const textStyle = "color: teal; font-size: 20px; font-weight: bold;"

보시다시피 이 작법이라면 속성이 가로로 연결되어 가독성이 낮습니다.
따라서 여기서 그룹을 사용해서 마지막으로 문자열로 바꾸세요.
console.log의 부분은 변하지 않습니다.

const textStyle = [
  "color: teal",
  "font-size: 20px",
  "font-weight: bold",
].join(";");

console.log("%cWe Are CSS", textStyle);

눈에 익은 형식으로 쓸 수 있고 출력 결과도 풍부해졌다.
그리고 js의 맛이 점점 강해지네요.

대상 위치에 스타일 지정

죄송합니다.log는class와 id 등 개념이 존재하지 않기 때문에 평소에 사용하는 선택기와 다른 방법이 필요합니다.
백문이 불여일견, 한번 봅시다.

const tealText = [
  "color: teal",
].join(";");

const plumText = [
  "color: plum",
].join(";");

const peruText = [
  "color: peru",
].join(";");

console.log("%cWe %cAre %cCSS", tealText, plumText, peruText);

왠지 알 것 같아.
즉, %c에서 다음%c으로 가는 요소에 대해 두 번째 파라미터부터 순서대로 적용한다.
축하합니다.입문편 돌파.

중급편

초급편 돌파를 축하합니다.
중급편은 콘솔입니다.로그의 함정과 디버깅을 이해합니다.

모든 속성을 사용할 수 있는 것은 아니다

정말 충격적이네요.
최대 20가지 정도의 속성을 사용할 수 있을 것 같습니다.
아래에 소개한 방법으로 속성이 대응하는지 하나하나 확인하세요.

출력 결과를 확인하는 DOM

실제로 Chrome에는 Developer Tools의 Developer Tools가 있습니다.
그러니까 그렇다는 거야.

평소 보았던 Developer Tools도 HTML, CSS로 제작되었음을 확인할 수 있습니다.
어떻게 보신 분들은 여기 참고하세요.
How do you inspect the web inspector in Chrome?
하면, 만약, 만약...%cspan으로 구분하고 스타일은 내연 방식으로 전개한다.
디버깅은 기본적으로 이곳에서 진행된다.

방금 말한 바와 같이 최대 20가지 속성을 사용할 수 있습니다.width, height, display 등...
이 세상에서 각양각색의 속성은 모두 지워진다.
이곳은 망라할 수 없으니 직접 확인하세요.

전편

여기서부터 구체적인 예로 이 제약이 많은 가운데 어떻게 생각을 형식적인 tips로 만드는지 설명한다.

높이 확인 ->line-height

사용할 수 없는 경우heightline-height참고로 vh 사용할 수 있습니다.
높은 기준은 당연히 Developer Tools입니다.

const textStyle = [
    "line-height: 100vh"
].join(";");

console.log("%cWe Are CSS", textStyle);

순조롭게 존재감 있는 수출에 성공했다.

중앙에 다가가고 싶다 - > margin

중앙에 고정된 flex, position, transform 등 속성은 완전히 통용되지 않는다.
이 밖에 margin: 0 auto;도 작용하지 않는다.
따라서 margin-left로 미세 조정한다.
평소 CSS는 절대 할 수 없습니다.

const textStyle = [
  "margin-left: 45%",
].join(";");

console.log("%cWe Are CSS!", textStyle);

느낌이 좋다.

참고로 평소에 CSS를 쓰는 사람들은 알아차릴 수 있겠지만 이 글은 현수막이 좁아지면 중앙에 가까워지지 않는다.

이것margin: 0 45%;을 피하기 위해 시도한 결과가 바로 여기다.
직업이 바뀌어서 유감입니다.
참고로 환행계의 속성은 line-break 이외에는 통용되지 않는다.

나는 이곳에서 완벽한 중앙 접근을 찾을 수 없다.
만약 좋은 중앙 해결 방안이 있다면 반드시 공유해 주십시오.

이미지 표시 -> 배경 이미지

이미지 탭background-image을 사용할 수 없기 때문입니다.
이 일대는 여느 때와 마찬가지로 문제없다. 강하다면 padding 사이즈를 확보해야 한다.

const imageStyle = [
  "padding: 200px",
  "background-image: url(https://media.giphy.com/media/VbnUQpnihPSIgIXuZv/giphy.gif)",
  "background-repeat: no-repeat"
].join(";");

console.log("%c ", imageStyle);

다크 모드 지원 ->matchMedia

미안합니다. 저는 JS입니다.matchMedia를 사용하면 CSS의 Media Queries 역할을 할 수 있으므로 prefers-color-scheme 라고 부르면 됩니다.

const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

const textStyle = [
  `color: ${isDark ? "white" : "black"}`,
  "font-size: 30px",
  "font-weight: bold",
].join(";");

console.log("%cCan you read me?", textStyle);

그래서 상급편에서는 쓸데없는 tips를 소개했다.
만약 또 누군가가 이런 내막이 있다고 말한다면, 나는 너를 기다릴 것이다.

응용편

여기서부터 원본 코드가 섞여 작품을 소개한다.
CODEPEN을 먼저 붙이지만 CODEPEN 페이지를 방문하지 않고 콘솔을 열면 보이지 않으니 육안으로 확인하고 싶은 사람만 사용하세요(대부분의 환경에서 잘 작동할 수 있을 것 같지는 않지만)

포켓몬 슬라이드 쇼

일단 그림부터.
최근 10년 만에 포켓몬 게임에 푹 빠졌어요.
모두들 아직 눈치채지 못한 것 같지만, wow는 무섭게 강하다.

See the Pen YzPybwb by Kotaro ( @mo-ro )
on CodePen .

텍스트 shadow 예술

다음은 text-shadow축으로 진행합니다.

쓸 수 있겠어?감각이 대단하다.

참고로 box-shadow 사용할 수 없습니다.p>

text-shadow
잘 쓰면
이렇게 됩니다.

See the Pen We Are CSS! by Kotaro ( @mo-ro )
on CodePen .

조금만 더 노력하면

그렇군요.p>

See the Pen Colorful Bar by Kotaro ( @mo-ro )
on CodePen .

メリークリスマス

올해 메리 크리스마스도 곧 다가온다.

모처럼의 기회인 만큼 소개된 기술로 크리스마스를 표현하고 싶어요.p>

완성

See the Pen wvBGXjK by Kotaro ( @mo-ro )
on CodePen .

진짜 힘들었어요.br/>
이 기술량은 이틀 정도 걸렸다p>
특히 힘든 것은 이 녀석들이 강제inline-block할 뿐만 아니라width를 지정할 수 없다는 것이다. 물론 모두 나란히 있다.br/>
따라서 \n에 줄을 끼워 억지로 세로로 배열할 때 (대략) 버그로 이전에 정의된 스타일을 복사했다p>
하면, 만약, 만약...만약 로그 예술에 힘쓰는 사람이 있다면, 줄을 바꾸는 설치를 사용하지 않는 것을 권장합니다p>

おわりに

Qiita로 이런 일을 하면 비판받을 수도 있고 무서워요.
실습·취직지를 모집 중입니다.

console.만약 기업이 로그를 아름답게 만들고 싶다면, 우리는 당신의 연락을 기다릴 것입니다p>