기본 및 더글러스 JavaScript 로봇 - 더미

비디오: JavaScript Basics: The Origins 2024

이 프로젝트에서는 Douglas라는 HTML 로봇에 스타일을 수정하고 추가합니다. 더글러스는 오늘 아침 로봇 공장에서 배달되었습니다. 그의 자바 스크립트 기술은 뛰어납니다. 그는 많은 유지 보수가 필요하지 않습니다. 그는 좋은 농담을한다!

유일한 문제는 그의 외모가 조금 지루하다는 것입니다! 물론, 그는 멋진 파란 눈을 가지고 있고, 그의 "I <3>

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

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

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

HTML 패널에 HTML이있는 화면과 CSS 패널에 일부 CSS가 표시됩니다.
맨 위 메뉴에서 포크를 클릭하여 자신의 JSFiddle 계정에 바이올린의 복사본을 만듭니다.

이제 더글러스 스타일을 시작할 준비가되었습니다!

JavaScript Robot CSS 창에서 처음 세 줄을 살펴보십시오.

body {font-family: Arial;}

이 세 줄은 CSS 규칙 을 형성합니다. CSS 규칙은 두 가지 주요 구성 요소로 구성됩니다.

선택기: 선택기는 CSS 규칙이 적용되는 요소를 나타냅니다. 이 예에서 선택자는 본문입니다.
선언 블록은 하나 이상의 CSS 선언을 포함하며, 선택된 요소의 스타일을 지정하는 방법을 나타냅니다. 이 예에서는 font-family: Arial;이라는 하나의 선언 만 있습니다.. CSS 선택자

선택자는 CSS 규칙의 {앞에옵니다. CSS 선택자는 스타일을 적용해야하는 HTML 요소를 웹 브라우저에 알려줍니다.

스타일을 적용 할 요소를 선택하면 선택한 요소 내부의 모든 요소에 동일한 스타일이 적용됩니다.

CSS 선택자는 요소를 선택하는 여러 가지 다른 방법을 가지고 있습니다. JavaScript 로봇 더글라스를 사용하여 다음 세 가지를 살펴보십시오.

요소 선택기:

JavaScript 로봇 CSS 패널의 첫 번째 두 규칙을 살펴보십시오. body {font-family: Arial;} p {font-size: 1em;}

이들은 모두 요소 선택자의 예입니다. 요소 선택기는 요소의 이름을 사용하여 HTML 요소를 선택합니다. 요소 선택기를 사용하려면 선택할 요소의 이름을 입력하기 만하면됩니다. 이 경우 body 요소 (using 태그)와 p 요소 (

및

태그 사용)를 선택합니다.

클래스 선택자:

JavaScript 로봇 CSS 창에서 세 번째 CSS 규칙을 살펴보십시오. 눈 {배경색: 파랑; 너비: 20 %; 높이: 20 %; border-radius: 50 %;}
```
클래스 선택자는 마침표 (.)로 시작합니다.), class라는 HTML 속성의 값이옵니다. 이 경우 class = "eye"인 모든 요소를 선택합니다. HTML 창을 보면 class = "eye"라는 두 요소가 있음을 알 수 있습니다. 이것들은 더글러스의 두 눈을 만드는데 사용됩니다.
```
클래스 선택기는 여러 스타일에 동일한 스타일을 적용해야하는 경우에 이상적입니다. 이 경우 로봇에는 두 개의 눈이 있으며 두 눈에는 여러 가지 공통점이 있습니다 (예: 파란색과 같은 크기).

ID 선택자:
ID 선택자는 해시 기호 (#)로 시작하고 요소의 ID 속성 값을 기반으로 요소를 선택합니다. 예를 들어, Douglas의 왼쪽 눈과 오른쪽 눈에는 별도의 ID 속성이 있습니다. #righteye {position: absolute; 왼쪽: 20 %; 상단: 20 %;} #lefteye {위치: 절대; 왼쪽: 60 %; 상단: 20 %;}
```
ID 선택기는 HTML 문서에서 단일 요소를 선택해야하는 경우에 유용합니다.
```
모든 ID 속성은 문서 내에서 고유해야합니다.

HTML 창을 보면 클래스 속성을 갖는 것 외에 Douglas의 왼쪽 눈과 오른쪽 눈에도 고유 한 ID 속성이 있음을 알 수 있습니다. 이러한 속성은 더글러스의 얼굴에 눈을 개별적으로 배치 할 수 있도록 추가되었습니다.

CSS 선언

CSS 선언은 CSS 선택자 다음의 선언 블록 안에 있습니다. 선언은 두 부분으로 구성됩니다.

Property:

선언의 속성 부분은 무엇을 수정해야하는지 알려줍니다. 예를 들어, 요소의 색상, 너비 또는 위치를 변경할 수 있습니다. 속성 뒤에는 콜론 (:)이 와야합니다. 값:
이 값은 속성을 변경하는 방법을 알려줍니다. 각 선언은 세미콜론 (;)으로 끝나야합니다. 작업을 완료해야하는 것처럼 선언 블록 내에 선언을 많이 가질 수 있습니다. 예를 들어, eye 클래스가있는 요소의 선언 블록에는

의 네 가지 선언이 포함됩니다. 눈 {배경색: 파랑; 너비: 20 %; 높이: 20 %; 경계 반경: 50 %;}