JavaScript 로봇 - 더미 - 소셜 미디어 2024

HTML 문서의 모든 요소는 사각형입니다. 요소가 원 (예: 더글러스의 눈)처럼 보이더라도 실제로는 원을 둘러싼 직사각형처럼 취급됩니다. 모든 것이 사각형이기 때문에 너비와 높이를 조정하여 CSS를 사용하여 요소의 크기를 변경할 수 있습니다.

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

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

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

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

실제 세계에서 사물의 너비와 높이를 측정 할 때는 인치, 센티미터 또는 미터와 같은 측정 단위를 사용합니다. CSS 세계에서 물건을 측정 할 때 몇 가지 측정 단위가 있습니다. 여기에는 px (픽셀) 및 % (퍼센트)가 포함됩니다.

픽셀: 픽셀은 웹 브라우저에 표시 할 수있는 가장 작은 점입니다. 픽셀을 사용하여 너비와 높이를 지정하면 브라우저에 요소의 너비와 높이를 정확히 알려줍니다. 픽셀을 측정에 사용하는 문제는 사용자의 브라우저 창이 매우 크거나 매우 작은 경우에도 항상 동일한 크기를 표시한다는 것입니다.
퍼센트: 너비와 높이를 백분율로 지정하면 브라우저에 요소의 부모 크기의 일정 비율을 지정하게됩니다.

모든 더글러스 측정 값을 %로 지정했습니다. 이것은 휴대 전화 나 더 타임즈 스퀘어 (Times Square)의 더글러스 (Jumbotron)를보고 있는지 여부에 상관없이 그의 크기가 화면에 맞게 조정된다는 의미이기 때문에 유용합니다. 실제로 상대 크기 조정의 마술을 보려면 JSFiddle에서 창 테두리를 드래그하여 결과 창을 더 크게 또는 작게 만드십시오. Douglas가 창의 크기와 함께 크기를 변경하는 방법에 유의하십시오.

당신은 responsive design 이라는 용어를 들었을 것입니다. 반응 형 디자인은 유연하고 사용자 화면의 크기에 반응하는 웹 콘텐츠를 만드는 것을 목표로합니다. 더글러스의 크기를 지정한 방식은 반응 형 디자인의 한 예입니다.

더글라스의 일부를 몇 가지 변경합니다.

아이 클래스의 CSS 규칙을 찾습니다.
너비를 30 %로, 높이를 30 %로 변경하십시오.

더글러스의 눈이 커짐을 알 수 있습니다. 그러나 그들은 또한 여기에 표시된 것처럼 더 이상 얼굴에 집중하지 않습니다!

더글라스의 커다란 눈동자가 중심을 벗어납니다.
팔 클래스에 대한 CSS 규칙을 찾습니다.
```
. 팔 {배경색: #cacaca; 위치: 절대; 상단: 35 %; 너비: 5 %; 높이: 40 %;}
```
. arm CSS 규칙은 두 팔의 색상과 크기를 제어합니다.

. arm 규칙은 또한 창의 맨 위에서 암까지의 거리를 제어합니다.
팔의 폭을 3 %로 변경 한 다음 실행을 클릭하여 더글러스 스키니를 팔로 만듭니다.
더글러스의 왼쪽 팔에 대한 CSS 규칙을 찾으십시오.
너비를 높이보다 크게 변경하는 속성을 추가합니다.

예:
```
#leftarm {position: absolute; 왼쪽: 70 %; 너비: 27 %; 높이: 5 %;}
```
변경 사항을 보려면 실행을 클릭하십시오. Douglas는 여기에서 볼 수 있듯이 이제 화면을 가리키고 있습니다.

더글라스가 가리키고 있습니다!

마지막 단계에서는 선택한 요소가 이미 클래스 선택기를 사용하여 적용된 너비와 높이를 갖더라도 ID 선택기가있는 규칙에 폭과 높이를 추가했습니다.

왼쪽 팔의 너비와 높이가 이미 있었지만 팔은 ID 선택기를 사용하여 규칙에서 새로운 너비와 높이를 사용했습니다.

계단식 이해

로봇의 왼쪽 팔은 한 개의 너비와 높이 일 수 있습니다. 두 개의 서로 다른 CSS 규칙이 팔의 너비와 높이를 따로 설정하려고하면 어떻게됩니까? 브라우저가 두 CSS 규칙 사이의 경쟁을 유지한다는 것은 발생합니다.

브라우저는 어떤 CSS 규칙이 마지막으로 설정되었고 어느 것이 더 너비와 높이가 실제로 사용될지를 결정하는 것과 같은 요인을 조사합니다. 이 계단식 경쟁에서 ID 속성은 단일 요소에 고유하므로 클래스 속성보다 더 구체적이기 때문에 클래스 속성보다 우선합니다.

CSS로 위치 지정 요소

CSS는 색상을 변경하는 기능과 브라우저에서 요소를 표시하는 방법을 제공 할뿐만 아니라 요소가 화면에 표시되는 위치를 변경할 수도 있습니다. 요소가 나타날 곳을 변경하는 것은

요소를 배치하는 것입니다. 더글러스의 일부 위치 변경: 더글러스의 오른쪽 눈을 제어하는 CSS 규칙을 찾습니다.

#righteye {위치: 절대; 왼쪽: 20 %; top: 20 %;}

첫 번째 속성 인 position은 브라우저에 특정 위치 속성 (예: 상단 및 왼쪽)을 해석하는 방법을 알려줍니다. 절대 위치 지정을 사용하면 선택한 요소 (이 경우 눈)를 머리의 다른 요소가 방해가 될지 걱정하지 않아도됩니다. 두 개의 절대적으로 배치 된 요소가 같은 위치에 있으면 단순히 겹칩니다.
```
우안은 머리 요소의 상단 모서리에서 20 % 아래 (머리 높이의 20 %)와 머리 요소의 왼쪽 가장자리에서 20 % (머리 폭의 20 %)를 차지하도록 설정됩니다. 머리.
```
왼쪽 및 위쪽의 값을 작은 비율로 변경하여 오른쪽 눈을 왼쪽 및 위로 움직입니다.

예:
#righteye {position: absolute; 왼쪽: 10 %; 상위: 10 %;}

여기를 클릭하면 실행 결과를 볼 수 있습니다.
```
더글러스가 오른쪽 눈을 높이고 있습니다.
```