CSS 속성 및 더글러스 JavaScript 로봇 - 더미

CSS 속성은 요소의 특성을 변경합니다. JavaScript 로봇의 아름다운 눈 색깔 인 더글러스 (Douglas)와 그의 몸과 팔의 크기, 머리의 둥근 부분 및 다른 부분의 위치는 모두 속성 값에 따라 결정됩니다.

시작하려면 웹 브라우저를 열고 공개 대시 보드에 로그인하십시오. 다음 단계를 따르십시오:

1. 6 장: 로봇 스타일 - 시작하고 제목을 클릭하여 여는 바이올린을 찾으십시오.

   로봇 앱으로 직접 이동할 수도 있습니다.

   HTML 패널에 HTML이있는 화면과 CSS 패널에 일부 CSS가 표시됩니다.

2. 맨 위 메뉴에서 포크를 클릭하여 자신의 JSFiddle 계정에 바이올린의 복사본을 만듭니다.

일부 다른 CSS 속성의 값을 수정하여 더글러스의 모양을 약간 변경합니다.

1. p 요소에 대한 CSS 규칙을 찾습니다.

   현재 CSS 창의 두 번째 규칙입니다.

2. font-size 속성의 값을 2로 변경하십시오. 5em.

   전체 규칙은 다음과 같아야합니다.

   p {font-size: 2. 5em;}
   

   텍스트 크기를 지정하는 방법에는 여러 가지가 있습니다. 가장 일반적으로 사용되는 방법은 픽셀 (픽셀), 퍼센트 (%) 또는 엠 (em)을 사용하는 것입니다. percent 또는 em을 사용하면 선택한 요소의 글꼴 크기가 부모 요소의 글꼴 크기를 기준으로 설정됩니다. 예를 들어 2입니다. 5em은 선택한 요소의 상위 글꼴 크기의 2.5 배입니다.

3. 결과 창에서 변경 사항을 보려면 실행 버튼을 클릭하십시오.

   

   대담한 메시지가있는 더글러스.

4. 본문 요소에 대한 CSS 규칙을 찾습니다.

5. 따옴표 사용에주의하면서 body 요소의 값을 다음과 같이 변경합니다.

   "Comic Sans MS", 필기체, sans-serif
   

   이제 전체 CSS 규칙은 다음과 같이 나타납니다.

   body {font-family: "Comic Sans MS", 필기체, sans-serif;}
   

6. 결과를 ​​보려면 실행 버튼을 클릭하십시오.

   더글라스는 이제 그의 셔츠에 흥미로운 편지를 가지고 있습니다.

   

   더글라스, 이제 재미있는 편지로!

   다음으로 눈 색깔에 맞게 더글러스의 눈 색깔을 변경하십시오!

7. 더글러스의 눈색이 들어있는 CSS 규칙을 찾습니다.

   현재는 다음과 같습니다.

   . 눈 {배경색: 파랑; 너비: 20 %; 높이: 20 %; border-radius: 50 %;}
   

8. 배경색 속성의 값을 눈 색으로 변경합니다.

   예를 들어 눈이 갈색 인 경우 다음과 같이 변경합니다.

   background-color: brown;
   

9. 결과를 ​​보려면 실행 버튼을 클릭하십시오.

더글러스의 눈이 갈색으로 변할 때 눈이 변화하는 색은 갈색이 아니며 더글라스의 눈을 녹색으로 만들 때 사용되는 색도 다른 사람의 눈이 될 가능성이있는 색이 아닙니다..보다 정확한 색상을 얻으려면 CSS 색상 이름 중 다른 하나를 사용하거나 16 진수 표기법을 사용하여 사용자 정의 색상을 만들 수 있습니다.