CSS 배틀 #1 - 심플리 스퀘어

나는 knowing only HTML and CSS is not enough . 나는 그것이 불공평하고 나 자신에게 아무것도 증명할 필요조차 없다는 것을 압니다. CSS는 매우 어렵습니다. 적어도 나에게는. 그래서 손을 더럽혀보기로 했습니다. 운 좋게도 a nice interactive website with CSS challenges이 있습니다. 누가 도전을 좋아하지 않습니까?

주어진 이미지만 스타일시트를 다시 만들어야 합니다. 가능한 한 적은 수의 문자로 달성한 경우 출력이 일치하는 정도와 추가 점수에 대한 대략적인 퍼센트를 얻습니다.



첫 번째 문제에 대한 가장 짧은 해결책을 본 후, 나는 높은 점수에 신경 쓰지 않고 대신 학습 부분에 집중하기로 결정했습니다. 이유가 궁금하시다면 여기에 그 해결책이 있습니다.

<img style=box-shadow:0+0+0+2in#b5e0ba,0+0+0+5in#5d3a3a>

점수는 솔루션이 첫 번째는 정확하고 두 번째는 짧을 것을 요구하기 때문에 정확성에 집중하는 것을 선호합니다. 그리고 CSS는 대안을 제공하는 데 매우 강력하기 때문에 동일한 질문에 대해 다른 답변을 제시하려고 노력할 것입니다.

1. 절대값

첫 번째는 매우 간단합니다. 200 x 200 픽셀의 정사각형 분할을 만들고 배경색을 지정합니다. 일반적인 문서 흐름은 위에서 아래로, 왼쪽에서 오른쪽으로 이루어지기 때문에 사각형은 화면의 왼쪽 상단 모서리에 있어야 합니다. 그렇지 않다는 것을 제외하고. 브라우저 기본 여백을 제거해야 합니다.
브라우저 기본값을 제거하는 것을 정규화라고 하며 a splendid library which does exactly that이 있습니다(모든 것을 위한 라이브러리가 있음). 소스 코드를 자세히 읽어보는 것이 좋습니다. 소스 코드는 짧고 설명이 포함된 주석이 있습니다. 여백에만 관심이 있기 때문에 배경색도 가져오는 본문 태그에 대해 여백을 0으로 설정합니다.

<div></div>
<style>
  body {
    margin: 0;
    background: #5d3a3a;
  }

  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }
</style>

2. 상대적 가치

하드코딩된 값에 얽매이지 않기 위해 width를 calc(100vw / 2)로, height를 calc(100vh * 2 / 3)로 바꿀 수 있습니다.

<div></div>
<style>
  body {
    margin: 0;
    background: #5d3a3a;
  }

  div {
    width: calc(100vw / 2);
    height: calc(100vh * 2 / 3);
    background: #b5e0ba;
  }
</style>

calc()를 사용하면 동일한 계산 내에서 서로 다른 단위를 혼합할 수 있습니다. 또는 너비가 뻔하기 때문에 50vw 로 직접 작성할 수 있습니다. 66vh는 정답으로 인정되지 않습니다. 66.6vh 그러나 될 것입니다.

3. 테두리

지금까지 솔루션은 크기 계산만 다를 뿐 거의 동일한 논리를 따르고 있었습니다. 여기 또 다른 접근법이 있습니다. 같은 사각형을 배치할 수 있지만 이번에는 본문 배경을 색칠하는 대신 테두리를 만들면 어떨까요?

<div></div>
<style>
  div {
    margin: -8px;
    width: 200px;
    height: 200px;
    background: #b5e0ba;
    border-right: 200px solid #5d3a3a;
    border-bottom: 200px solid #5d3a3a;
  }
</style>

여기서 여백을 음수 값으로 설정하는 것은 the default margin의 영향을 제거하고 두 태그의 스타일을 지정하지 않기 위해서만 수행됩니다.

4. 박스 섀도우

마지막 것은 가장 짧은 솔루션에서 영감을 얻었습니다. 분명히 기존 개체를 복제하여 그림자를 만드는 것이 가능합니다. box-shadow 는 스테이플 효과를 만드는 데 사용됩니다. generator for that! 처음 두 값은 X 및 Y 오프셋이며 음수일 수 있습니다. 세 번째는 흐림 반경입니다. 그리고 색상 이전의 마지막은 크기를 담당하는 확산 반경입니다. 이 경우 전체400 x 300 화면을 덮을 수 있을 만큼 충분히 큰 값으로 임의로 설정했습니다.

<div></div>
<style>
  div {
    margin: -8px;
    width: 50vw;
    height: 66.6vh;
    background: #b5e0ba;
    box-shadow: 0 0 0 200px #5d3a3a;
  }
</style>

이 솔루션 중 어떤 것을 선호하십니까? 당신은 다른 사람을 알고 있습니까?