CSSBATTLE.DEV에서 코드 챌린지 #2 : 4 더 높은 점수에 대한 4 가지 팁

CSSBATTLE.DEV : CSS 기술을 향상시키기위한 탁월한 도전

코어 포인트

CSSBattle.dev의 도전은 CSS 기술을 향상시키는 훌륭한 방법입니다. 빈 출력 패널이 실제로 비어 있지 않다는 것을 기억합니다. 요소. CSSBattle의 문자를 저장하려면 측정 단위를 신중하게 선택하고 CSS의 "상속"및 "특이성"을 활용하여 현대 브라우저는 짧고 약간 불규칙한 코드에 친숙하다는 것을 기억하십시오.

CSSBATTLE.DEV에 참여하는 목적은 나쁜 코딩 습관을 장려하는 것이 아니라 정상적인 강력한 생산 코드를 작성하는 것보다 CSS를 테스트, 실험 및 결국 이해하는 것입니다.

• 당신은 우리가 일주일 전에 두 번째 코드 챌린지를 시작하는 것을 보았을 것입니다 - cssbattle.dev에서 친구들과 협력합니다. CSS 전투는 4 월에 시작된 웹 사이트 인 비교적 새로운 개념이며, 그것이 어떻게 작동하는지가 항상 분명하지는 않습니다.
CSSBATTLE의
• 기본 출력 및 편집기 패널. 간단히 말하면 :
• 목표는 HTML 및 CSS 만 사용하여 "대상"이미지의 사본을 만드는 것입니다.
외부 이미지를 사용할 수 없습니다.

SVG (인라인 SVG) 또는 특수 문자를 사용할 수 없습니다.

모든 솔루션은 정확도와 효율성 (문자 수)을 기준으로 자동으로 점수를 매겼습니다.

가장 높은 점수로 대상 이미지를 재현하는 플레이어가 승리합니다.

나는이 아이디어를 처음 보았을 때 조금 믿어지지 않았다는 것을 인정해야합니다. "트윗 길이"보다 적은 HTML 및 CSS로 디자인을 누가 만들 수 있습니까? 이것은 확실히 불가능합니다.

그래서 나는 그것을 시도했지만 대부분은 실패했지만 나는 또한 무언가를 얻었고 점차 필요한 기술 중 일부를 이해하기 시작했습니다. 당신이 궁금하다면, 나는 당신이 더 높은 점수를 얻는 데 도움이되는 4 가지 팁을 소개 할 것이라고 생각합니다.

명확하게하겠습니다 : 내가 이것을 썼을 때, 나는이 전투 라운드에서 24 위를 차지했습니다. 나는 지금까지 모든 목표를 달성하고 전반적으로 26 위를 차지 했으므로 나보다 훨씬 더 나은 솔루션을 가진 최소 20 명 또는 30 명의 플레이어가 있습니다. 그러나 나는 내 지식을 공유하고 더 나은 아이디어를 가진 사람의 조언을 받아들이고 싶습니다.

<:> 팁 #1 : 빈 출력 패널이 실제로 빈

대상을 처음로드 할 때 위의 이미지와 비슷한 것을 볼 수 있습니다. 편집기는 항상 샘플 HTML 및 CSS로 미리 채워져 기본 시작 위치를 제공합니다. 그러나 편집기의 모든 문자를 삭제하더라도 출력 패널은 기술적으로 비어 있지 않습니다.

• 왜? 출력 패널의 소스 코드를 확인하면 (팁 : 이제 "슬라이드 및 비교"기능을 먼저 끄는 경우) 두 개의 보이지 않는 요소가있는 와 하나 요소가 있습니다.

  아래 이미지에 표시된대로 CSS 행에 존재한다는 것을 알 수 있습니다. 물론, 당신은 캐릭터를 만들기 위해 어떤 캐릭터를 쓰지 않고도이 두 HTML 요소를 의지 할 수 있습니다.

  스타일에 항상 HTML과 바디 요소가 있습니다. 이것은 당신이 자신의 HTML 요소 (,

  , 등)를 추가하지 않는다는 것을 의미하지는 않지만 항상 무료 "내장 요소"의 우선 순위를 정하려고 노력합니다.

  기술 #2 : 측정 단위 를 조심스럽게 선택하십시오 CSSBattle 대상은 항상 400px와 높이가 300px이므로 중심점을 왼쪽으로 올바르게 설명 할 수 있습니다. 200px (10 자) 및 상단 : 150px (9 자). 그러나 정확한 위치를 왼쪽으로 설명 할 수 있습니다 : 50% (8 자) 및 상단 : 50% (7 자). 이것은 편리한 4 자 저축입니다.

  그러나 백분율이 항상이기는 ​​것은 아닙니다. 위치 상단 : 100px (9 자)는 상단으로 변환됩니다 : 33.33% (10 자) - 한 단계 뒤로 물러납니다. 최고의 경기를 찾는 데는 많은 시행 착오가 필요합니다. 잠재적으로 유용한 측정 단위는 다음과 같습니다
  <:> 픽셀 : px
  백분율 : % rems : rem ems : em 인치 : in mm : mm 파운드 : PC 포인트 : pt

  뷰포트 높이 장치 : vh

  뷰포트 너비 장치 : vw

  쿼트 밀리미터 : Q

  마지막 단위 유형 인 "Q"는 비교적 거의 알려지지 않은 장치입니다. 그러나 그것은 캐릭터이기 때문에 CSS 전투에서 매우 유용하다고 생각합니다. 50px가 53 q로 변환된다는 것을 알았습니다.

  또한 단위 유형을 명시 적으로 선언하지 않으면 일부 CSS 속성은 픽셀을 참조한다고 가정합니다. 다시 말해, 너비 : 80은 너비 : 80px와 동일합니다. 높이와 여백도 마찬가지입니다. 반면에, 측정 단위를 선언하지 않으면 Box-Shadow가 완전히 실패합니다. <:> 팁 #3 : CSS는 계단식입니다. CSS는 "상속"및 "특이성"에 매우 능숙합니다. 상속을 통해 아이들은 부모의 요소에서 스타일을 얻을 수 있습니다. "특정"은 광범위한 규칙이보다 신중하거나 최근에 선언 된 규칙에 적용될 것임을 의미합니다. CSS에서 가장 광범위한 규칙은 * 와일드 카드이며, 이는 "모든 요소에 적용"을 의미합니다. 따라서 다음 규칙은 모든 컨텐츠에 #222 배경을 적용합니다. 추가 html을 추가하지 않으면

  및 입니다.

  • 우리가 만 찾기 위해보다 구체적인 규칙을 추가하면 직접 이름을 지정하지 않고
  를 3자를 저장합니다.
  한 걸음 더 나아가 봅시다.
  • CSS에서 "& gt;"는 "x가 y의 부모 인 경우에만"(예 : x & gt; y {})를 의미합니다. 우리가 글을 쓰면 :

    … 우리는 "다른 요소 내에있는 모든 요소 에이 규칙을 적용합니다", 즉, 자식 요소에 대해 이야기하고 있습니다. 요소는 아동 요소가 아니기 때문에

    만 두 번째 규칙을 얻습니다. 우리는 다른 캐릭터를 저장했습니다.

    <code>*{background:#222}</code>

    <:> 팁 #4 : 브라우저는 강력합니다. 그들이 작동하게하십시오 손가락 끝에서 모든 결과를 얻으면 문자를 자르는 유일한 방법은 기술적으로 필요하지만 최종 렌더링에 절대적으로 중요하지 않은 코드를 제거하는 것입니다. 최신 브라우저는 짧고 약간 불규칙한 코드에 친숙 할 것이라고 말할 수 있습니다. 여기에는 다음이 포함되지만 다음이 포함되지 않습니다 삭제 끝

    <code>*{background:#222}
    body{background:#F2994A}</code>

    삭제 종료 html 태그 (즉, )) 스타일 블록 삭제의 마지막 끝} 대부분의 공간과 캐리지 리턴 문자를 제거하십시오. 시행 착오는 여기에 친구입니다.
  • 물론 생산 CSS에서 그러한 극도의 최적화를 채택하는 것은 의미가 없습니다. 사소한 비용 절감에 대한 코드의 신뢰성을 손상시킵니다. 그러나 CSSBattles는 브라우저가 어떻게 생각하고 좋아하지 않는지에 대해 더 많이 가르쳐 줄 것입니다.
  그래서 CSSBattle은 나쁜 코딩 습관을 장려합니까?
  • 나는 이것이 잠재적 인 단점이라고 언급했다. 실제로 CSS 베테랑 인 Eric Meyer는 최근 CSSBattle.dev Spectrum 피드백 에서이 질문을 제기했습니다.
  파서 결함 (특히 공간 분리)을 사용하여 의도적 인 점수를 낮추는 데 의존적입니까, 아니면 부작용입니까? - eric meyer

  나는 그렇게 생각하지 않습니다. 저에게는 일반적인 강력한 생산 코드를 작성하는 것보다 테스트, 실험 및 결국 CSS에 대한 더 깊은 이해를 얻는 방법입니다.

  당신은 그것을 일본 Haiku시와 비교할 수 있습니다. Haiku는 엄격한 제한을 기반으로 한 형식, 즉 3 줄과 17 음절의 제한입니다.

  세계에서 가장 위대한 하이쿠 마스터조차도 매일 신중하게 구성된 하이쿠와 대화하거나 글을 쓰지 않을 것입니다. 그러나 이것이 Haiku를 읽거나 쓸 때 단어 선택, 리듬, 균형 및 아름다움에서 중요한 교훈을 배울 수 없다는 것을 의미하지는 않습니다.

  "CSS 전투 코드"를 쓰는 것은 "생산 코드"를 쓰는 것과 같지 않지만

  다른 곳에서는 배울 수없는 과정을 가르쳐 줄 것입니다.

  CSSBATTLE DEV (FAQ)에 대한 FAQ CSSBATTLE DEV 란 무엇이며 어떻게 작동합니까?

  CSSBattle Dev는 개발자가 CSS 코딩 문제를 위해 서로 경쟁 할 수있는 온라인 플랫폼입니다. 플랫폼은 대상 이미지를 제공하며 작업은 HTML 및 CSS를 사용하여 복사하는 것입니다. 출력이 대상 이미지에 가까울수록 점수가 높아집니다. 이 플랫폼은 출력의 정확도와 코드 길이를 고려하여 고유 한 스코어링 시스템을 사용합니다. 코드가 짧을수록 정확도가 높을수록 점수가 높아집니다.

  CSSBattle Dev에서 점수를 향상시키는 방법은 무엇입니까?

  CSSBattle Dev에서 점수를 향상하려면 정확도와 단순성의 조합이 필요합니다. 출력은 가능한 한 대상 이미지에 가깝고 코드가 가능한 한 짧아야합니다. CSS 속성 및 값을 마스터하고 다른 CSS 속성이 서로 상호 작용하는 방법을 이해하고 간결하고 효율적인 코드를 작성하는 방법을 배우면이를 수행 할 수 있습니다.

  CSSBATTLE DEV를 마스터하기위한 몇 가지 팁은 무엇입니까?

  CSSBattle Dev 마스터 링에는 CSS에 대한 실습과 심층적 인 이해가 필요합니다. 다음은 몇 가지 팁입니다

  <:> 상자 모델 이해 : CSS 박스 모델은 레이아웃 디자인의 초석입니다. 패딩, 국경 및 여백이 어떻게 작동하는지 이해하는 것이 중요합니다.
  1. <:> 마스터 포지셔닝 : 다른 위치 값 (정적, 상대, 절대, 고정)이 요소의 위치에 어떤 영향을 미치는지 이해하면 요소를 정확하게 배치하는 데 도움이됩니다.
  약식 속성 사용법 학습 : 약식 속성을 사용하면 한 줄로 여러 속성을 지정할 수 있으므로 더 짧고 깨끗한 코드를 작성할 수 있습니다.
  CSS 속성 및 값에 대해 어떻게 더 많이 배우나요?
  3. CSS 속성과 값을 배우기 위해 온라인으로 사용할 수있는 많은 리소스가 있습니다. MDN 웹 문서, CSS- 트릭 및 W3Schools와 같은 웹 사이트는 CSS에 대한 포괄적 인 안내서 및 자습서를 제공합니다. 또한 CSSBattle Dev와 같은 플랫폼에서 연습하면 실제 시나리오에서 다양한 속성과 가치가 어떻게 작동하는지 이해하는 데 도움이됩니다.
  CSS를 처음 사용한다면 CSSBattle Dev에 참여할 수 있습니까?

  물론

  ! CSSBattle Dev는 초보자가 CSS를 배우고 연습 할 수있는 훌륭한 플랫폼입니다. 도전은 단순에서 어려운 것에마다 다르므로 단순한 도전으로 시작하고 기술이 향상됨에 따라 점차 복잡한 도전으로 이동할 수 있습니다.

  CSSBattle Dev의 등급 시스템은 어떻게 작동합니까?

  CSSBattle Dev의 등급 시스템은 정확도와 코드 길이의 두 가지 요소를 기반으로합니다. 플랫폼은 출력을 대상 이미지와 비교하고 일치하는 방법에 따라 점수를 계산합니다. 또한 코드의 길이 - 코드가 짧을수록 점수가 높아집니다.

  CSSBattle Dev에서 다른 참가자의 솔루션을 볼 수 있습니까?

  예, 자신의 솔루션을 제출 한 후 다른 참가자의 솔루션을 볼 수 있습니다. 이것은 동일한 과제를 해결하는 다양한 방법을 배우고 코딩 기술을 향상시키는 데 도움이 될 수있는 좋은 방법입니다.

  CSSBattle Dev에서 피해야 할 일반적인 실수는 무엇입니까?

  CSSBattle Dev에서 피해야하는 몇 가지 일반적인 실수에는 다음이 포함됩니다. CSS 박스 모델을 완전히 이해하지 못하고 약어 특성을 사용하지 않으며,이를 간결하게 만들기 위해 코드를 최적화하지 않습니다. 또한 대상 이미지를 정확하게 복사 할 수 있도록 코드를 철저히 테스트하는 것이 중요합니다.

  CSSBattle Dev를 사용하여 면접을 준비 할 수 있습니까?

  예, CSSBATTLE DEV는 면접 준비에 유용한 도구입니다. 문제 해결 기술을 향상시키고 효율적인 코드를 작성하는 법을 배우고 CSS에 대한 더 깊은 이해를 얻는 데 도움이 될 수 있습니다. 그러나 면접은 웹 개발의 다른 측면을 다룰 수 있으므로 유일한 준비 도구가되어서는 안됩니다.

  CSSBattle Dev를 통해 CSS를 배우는 동안 어떻게 동기를 유지합니까?

  CSSBattle Dev로 CSS를 학습하는 것은 어려울 수 있지만 매우 흥미로울 수 있습니다. 플랫폼의 경쟁 측면은 기술을 향상 시키도록 동기를 부여 할 수 있습니다. 또한 특정 점수에 도달하거나 동기 부여를 유지하기 위해 특정 수의 문제를 완료하는 것과 같은 개인적인 목표를 설정할 수도 있습니다. CSS (또는 모든 기술)를 마스터하는 열쇠는 실제로 지속성과 인내심입니다.

위 내용은 CSSBATTLE.DEV에서 코드 챌린지 #2 : 4 더 높은 점수에 대한 4 가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!