오늘날 반응 형 웹 구성 요소를 사용하는 방법

몇 년 전에 저는 웹 구성 요소에 대해 많은 것을 듣기 시작했습니다. 나는 소음이 정착되면서 꽤 흥분하고 그들에 대해 완전히 잊어 버렸습니다. 좋은 움직임이 있었고 지원이 증가하기 시작한 것으로 나타났습니다. 특히 반응 형 웹 구성 요소는 반응 형 디자인에 접근하는 방법을 실제로 단순화하도록 설정되어 있습니다. 이 소리가 들리는 것처럼, 많은 개발자들이 오늘날 사용하기 전에 알고 싶어 할 4 가지 질문이 있습니다. 그들은…

웹의 현재 상태에 맞는가? 작업 크로스 브라우저? 공간에 맞게 적응하십시오 모듈 식 코드를 홍보합니까?

이 기사에서는 각 질문에 대한 답변을 탐구 할 것입니다!

키 테이크 아웃

웹 구성 요소는 개발자가 자체 HTML 요소를 구축 할 수있는 W3 사양으로 브라우저에 기본적으로 존재하지 않는 UI 요소를 만들 수 있거나 소셜 버튼이나 가입 양식과 같은 일반적으로 사용되는 구성 요소를 캡슐화 된 모듈로 만들 수 있습니다. . 미디어 쿼리, Flexbox, 요소 쿼리 및 속성과 같은 기술을 사용하여 반응 형 웹 구성 요소를보다 유연하고 적응할 수 있습니다. 이러한 기술은 구성 요소가 다른 화면 크기와 컨텍스트에 적응할 수 있도록하여 진정으로 반응이 가능합니다.

웹 구성 요소를 사용하면 각 구성 요소에 대해 단일 진실 소스가있는 라이브러리를 생성하여 코드 반복을 줄이고 다른 개발자 또는 웹 사이트 소유자와 구성 요소를 공유 할 수 있습니다. 이 접근법은 모듈 식 코드를 촉진하고 반응 형 디자인에 대한 접근 방식을 단순화합니다.

• 웹 구성 요소는 무엇입니까? 본질적으로, 그들은 자신의 HTML 요소를 구축 할 수있는 W3 사양입니다. 문자 그대로 그들에 대해 아무것도 모른다면 기사에서 사용하는 일부 용어에는 기본적인 이해가 필요하기 때문에 그들에 대해 빨리 읽을 가치가있을 것입니다.
. 왜 내가 그것들을 사용하고 싶습니까?
• 웹 구성 요소를 사용하고 싶을 때의 좋은 예는 브라우저에 기본적으로 존재하지 않는 UI (컬러 피커, 회전 목마, 아코디언 또는 유형)와 같은 요소를 구축 할 때입니다. 또는 매번 재건축이 아프게하는 다양한 사이트에서 항상 사용하는 구성 요소가있을 수 있습니다. 소셜 버튼, 구독 양식 또는 알림과 같은 것들입니다. 웹 구성 요소를 사용하면 와 같은 HTML 태그를 사용하여 마크 업, 스타일 및 스크립트를 캡슐화 된 모듈에 묶을 수 있습니다. Angular Directives 또는 React 구성 요소를 사용한 경우 익숙해 보이지만 여기서는 이점은 브라우저 및 프레임 워크에 고유하다는 것입니다.
. 웹 구성 요소를 사용하면 UI 조각을 한 번 구축하여 어디서나 사용할 수 있습니다. 이는 각 구성 요소에 대해 단일 진실의 소스가있는 도서관을 구축하려는 Living StyleGuide와 같은 프로젝트에 이상적입니다. 이 접근법은 코드를 적게 반복하고 귀하 또는 귀하의 팀이 단순히 참조를 인터페이스에 삭제할 수있는 휴대용 구성 요소가 있음을 의미합니다. 웹 구성 요소를 사용하는 또 다른 큰 장점은 이러한 구성 요소를 포장하여 다른 개발자 또는 웹 사이트 소유자와 공유하는 기능입니다. 기본적으로 소비자는 다음과 같은 웹 페이지에 가져 오기 명령문을 넣을 수 있습니다.

그런 다음 해당 구성 요소에서 정의한 사용자 정의 요소 태그를 사용하십시오. 이것을 웹 페이지로 가져 오면 원하는만큼 사용자 정의 구성 요소 인스턴스를 가질 수 있습니다. 구독 양식 예제에서는 페이지의 여러 위치에서 을 사용할 수 있습니다. 물론이 작업을 수행하는 경우 제작 한 아름다운 구성 요소가 매우 유연하고 다양한 장치와 화면 크기에 걸쳐 작동하는지 확인해야합니다.

. 이 나쁜 소년들을 반응 형 웹 구성 요소로 전환합니다 나는 가장 좋은 방법은 예를 들어, 다른 사이트와 구현 사이에서 크게 변하지 않는 일반적인 UI의 구독 양식을 계속할 것입니다. 여기에 내가 이전에 만든 것이 있습니다 :

내 웹 구성 요소 템플릿 내부에는 양식에 대한 기본 마크 업이 있습니다.

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

내 마크 업과 CSS는 사양의 그림자 dom 부분을 사용하여 내 구성 요소 안에 갇혀 있습니다. 이것은 나에게 캡슐화를 제공하여 다른 스타일의 출혈에 대한 걱정없이 내 코드에서 레이블과 입력 선택기를 자유롭게 사용할 수있게되며, 부모 사이트에 출혈이 나옵니다. 명확성과 간결성을 위해, 나는 레이아웃에 사용되는 스타일 이외의 스타일을 쓰지 않을 것입니다. Float : Left and Display : 테이블의 조합을 사용 하여이 레이아웃을 달성하여 폭이 끊어지는 것을 방지했습니다.
나는 HTML 가져 오기를 사용하여 시연으로 itepoint 사이트로 끌어 올릴 것입니다 :
이제 우리는 모두 설정되어 있습니다. 반응 형 기술을 살펴 보겠습니다.

미디어 쿼리 우리가 알고 사랑하는 고전적인 접근 방식은 여전히 ​​살아 있고 반응 형 웹 구성 요소 내부입니다. 일부 중단 점으로 굽려면 구성 요소를 코딩 할 때 템플릿 내부에 적용될 수 있습니다. 또는 해당 결정을 소비자에게 맡기려면 컨테이너에 후크 (예 : 클래스 사용)를 적용 할 수 있습니다. 이 경우, 우리가해야 할 일은 플로트를 벗기고 전체 너비로 조정하는 것입니다.

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

그러나 미디어 쿼리는 이번에 우리를 구하기에 충분하지 않을 것입니다. 나는 가입 양식 스타일에 만족하고 신체에서 잘 작동하지만 웹 사이트 저자가 사이드 바에 휘젓고 싶어하면 어떻게됩니까? 갑자기 내 형태가 찌그러져 보이고 실제로 사용할 수 없다.
이것은 구성 요소가 경계를 인식하지 못하기 때문입니다. 컨텍스트가 없습니다.

웹 구성 요소의 요점은 어디서나 떨어 뜨릴 수 있고 제대로 작동 할 것입니까? 분명히 이것은 그렇지 않지만 구성 요소가 반응이 좋고 상황에 맞는 것을 보장하기 위해 사용할 수있는 몇 가지 기술이 있습니다.

. flexbox trickery 웹 구성 요소를 사용하려는 경우 최신 브라우저 만 지원하고 IE9에 대해 걱정하지 않아도되며,이 경우 약간의 Flexbox Magic이이를 반응 형 웹 구성 요소로 전환하는 데 완벽 할 수 있습니다. 추가 JavaScript가 필요하지 않으므로 선호하는 접근법입니다. 다시 한 번, 여기의 코드 샘플은 내가 사용한 레이아웃 스타일을 순전히 보여줍니다. 컨테이너를 표시하도록 설정하여 : flex; Flex-Wrap : 랩, .form__item 요소가 나란히 나타나지 만 컨테이너가 너무 작아지면 컨테이너가 너무 쌓일 수 있도록 약간의 조정을해야합니다.

.

.form__item 내부에서 Flex의 속도를 사용했습니다 : 1 0 320px; 플렉스 용어로 번역됩니다. Flex-Wrap을 랩으로 설정하면 설정 기준 (320px)보다 작지 않지만 Flex로 설정하면 사용 가능한 공간의 나머지 부분을 차지할 수 있습니다. 나는 레이블 및 입력 요소와 비슷한 처리를했다. 그들의 결합 된 플렉스 값은 총 320입니다. 즉, 더 작은 컨테이너 크기에서 원하는대로 작동합니다. 이러한 조정이 제자리에 있으면 SitePoint의 사이드 바에서 동일한 형태를 살펴 보겠습니다.

훨씬 나아졌습니다! 그러나 고양이를 피부하는 방법에는 여러 가지가 있습니다.

요소 쿼리 요소 쿼리의 아이디어는 미디어 쿼리 유형 기능을 모방 할 수 있지만 구성 요소 수준에서 반응 형 웹 구성 요소에 매우 편리하다는 것입니다. 본질적으로 CSS에서 이와 같은 글을 쓸 수 있다고 상상해보십시오.

요소 쿼리가있는 것은 바로 우리가 할 수있는 일입니다. 꽤 강력한 권리? 불행히도,이 기술은 브라우저 공급 업체가 무한 루프를 유발할 가능성에 관심이 있기 때문에 기본적으로 사용할 수 없습니다. 그러나 일부 똑똑한 사람들은이 기능을 가능하게하기 위해 플러그인을 작성했습니다.

내 예에서는 정말 좋은 구현 인 Marc J Schmidt의 CSS 요소 쿼리를 사용했습니다. 다음과 같은 프로젝트도 있습니다 :
초등학교
• 요소 쿼리 eq.js
기본적으로 그들이하는 일은 JavaScript를 사용하여 구성 요소의 너비를 감지하고 속성을 수정하여 CSS로 스타일을 지정할 수 있도록 속성을 수정하는 것입니다. 일부는 이벤트 중심이며 일부는 Resize를 기반으로합니다
• 이 플러그인 중 하나와 소형 코드 스 니펫의 조합을 사용하여 위와 유사한 소형 코드 스 니펫을 사용하여 사이드 바에서 Flexbox 구현과 동일한 결과를 얻을 수 있습니다. 속성 반응 형 웹 구성 요소의 소비자에게 제공 할 수있는 멋진 것 중 하나는 속성을 통한 API입니다. 예를 들어, 레이아웃이라는 속성을 설정할 수 있으며 크기가 "작은"및 "큰"크기를 가질 수 있습니다. 구성 요소의 소비자는 다음과 같이 사용할 수 있습니다.
이것은 작은 구현의 스타일을 트리거합니다 그림자 dom에서, 함유 요소는 : 호스트로 알려져있다. 예는 그렇게 보일 수 있습니다 :
그런 다음 구성 요소 소비자가 제공 한 다양한 크기를 뒤집기 위해 간단한 자바 스크립트를 작성할 수 있습니다. 즉, 모듈 내부에 추가 JavaScript를로드하는 대신 소비자에게 맡겨서 어떻게 연결하는지 결정할 수 있습니다. 이를 통해 구성 요소가 더 미래의 증거가 될 수 있습니다 직접 시도해보십시오! 자신의 컴퓨터 에서이 데모에서 참조하는 Flexbox 버전을보고 싶다면 Chrome에서 다음을 수행 할 수 있습니다.
Cors Chrome 확장을 설치하고 켜십시오. 이것은 HTML 가져 오기가 외부 사이트에서 작동하도록하기위한 것입니다.

이 페이지를 새로 고치거나 새 탭이나 창에서 웹 사이트를 열면 확장자가 시작됩니다. Chrome Developer 도구에서 태그 내부에 추가하십시오.

<:> 마지막으로 추가 : 내부의 어딘가에 내 구독 양식이 자동으로 당겨지는 것을 볼 수 있습니다. 즐기세요! <.>

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

결론

위의 접근 방식은 실제로 UI 개발에 사용될 수 있지만 재사용 가능하고 공유 가능한 특성으로 인해 반응 형 웹 구성 요소에 특히 적합합니다. 웹 구성 요소를 확인하지 않았지만 그렇게하도록 격려 할 것입니다. 전체 사양은 현재 Chrome과 Opera에서 기본적으로 만 사용할 수 있지만 다른 브라우저 공급 업체는 그리 멀지 않습니다.

Responsive Web Design에 대해 더 많이 배우는 것이 흥미롭면 Chris Ward가 작성한 새로운 책인 Jump Start Responsive Web Design을 확인하십시오. 반응 형 웹 구성 요소에서 자주 묻는 질문 (FAQ) 잘 설계된 반응 형 웹 구성 요소의 핵심 요소는 무엇입니까? 잘 설계된 반응 형 웹 구성 요소는 유연하고 적응력이 뛰어나며 효율적이어야합니다. 화면 크기에 따라 레이아웃을 조정할 수있는 유체 그리드 시스템이 있어야합니다. 또한 화면에 맞게 크기를 조정할 수있는 유연한 이미지와 미디어가 있어야합니다. 또한 웹 사이트가 화면 크기, 해상도 및 방향과 같은 특성을 기반으로 다른 장치에 대해 다른 CSS 스타일 규칙을 사용할 수있는 미디어 쿼리가 있어야합니다. 마지막으로, 로딩 시간과 성능 측면에서 효율적이어야합니다.

CSS 컨테이너 쿼리는 반응 형 구성 요소에 어떻게 기여합니까?

CSS 컨테이너 쿼리 (요소 쿼리)는 스타일을 허용합니다. 뷰포트 대신 부모 컨테이너의 크기를 기준으로 적용됩니다. 이는 구성 요소가 자체 크기에 따라 레이아웃을 적응시켜 진정으로 반응이 가능하다는 것을 의미합니다. 이것은 다른 상황에서 재사용하고 주변 환경에 적응 해야하는 구성 요소에 특히 유용합니다.

반응 형 웹 구성 요소를 만드는 데 JavaScript의 역할은 무엇입니까?

JavaScript는 중요한 역할을합니다. 반응 형 웹 구성 요소 생성. DOM을 조작하고 이벤트를 처리하며 동적 컨텐츠를 생성하는 데 사용될 수 있습니다. 또한 CSS 미디어 쿼리와 함께 사용하여보다 복잡한 반응 형 동작을 생성 할 수 있습니다. 예를 들어, JavaScript를 사용하여 화면 크기 또는 장치 기능을 기반으로 다른 스크립트 나 컨텐츠를로드하는 데 사용될 수 있습니다.

내 반응 형 웹 구성 요소에 액세스 할 수있는 방법을 어떻게 보장 할 수 있습니까?

접근성은 반응 형 웹 구성 요소를 설계 할 때 주요 고려 사항. 여기에는 텍스트가 모든 화면 크기에서 텍스트를 읽을 수 있고 대화식 요소가 터치 스크린에 쉽게 탭할 수있을 정도로 크며 마우스를 사용할 수없는 사람들을 위해 키보드로 사이트를 탐색 할 수 있도록하는 것이 포함됩니다. 또한 Semantic HTML을 사용하여 독자들에게 컨텍스트와 의미를 제공하고 시각 장애가있는 사람들에게는 색상 대비가 충분하도록해야합니다.

반응 형 웹 구성 요소를 만드는 데있어 일반적인 과제는 무엇이며 어떻게 될 수 있는지 극복?

몇 가지 일반적인 과제는 다양한 화면 크기 및 해상도를 다루고, 다른 브라우저 및 장치와의 호환성을 보장하고, 성능을 최적화하는 것입니다. 모바일 우선 접근 방식을 사용하고, 다양한 장치에서 테스트하고, 기능 감지를 사용하여 호환성을 보장하고, 성능을위한 이미지 및 스크립트를 최적화함으로써이를 극복 할 수 있습니다. 반응 형 웹 구성 요소가 SEO에 어떤 영향을 미칩니 까? Google의 알고리즘은 모바일 친화적 인 웹 사이트를 선호하며 반응 형 디자인이 주요 측면입니다. 또한 별도의 데스크탑 및 모바일 버전이 아닌 단일 반응 형 사이트를 갖는 것은 중복 컨텐츠의 문제를 피하며, 이는 SEO에 부정적인 영향을 줄 수 있습니다.

웹 구성 요소의 응답 성을 어떻게 테스트 할 수 있습니까? 웹 구성 요소의 응답 성을 테스트하기위한 몇 가지 도구와 기술입니다. 여기에는 브라우저 창 크기 조정을 위해 레이아웃이 어떻게 적응하는지, 브라우저 개발자 도구의 장치 에뮬레이션 기능을 사용하고 Google의 모바일 친화적 인 테스트와 같은 온라인 도구를 사용하는 방법이 포함됩니다. 반응 형 웹 구성 요소의 미래에는보다 진보 된 기술과 기술이 포함될 것입니다. 여기에는 현재 개발중인 컨테이너 쿼리와 같은 것이 포함될 수 있으며, 사용자 동작 및 선호도를 기반으로 레이아웃을 조정하기 위해 AI 및 머신 러닝을 더 많이 사용하는 것이 포함될 수 있습니다.

반응 형 웹 구성 요소 작성에 대해 더 많이 배울 수 있습니까? ?

반응 형 웹 구성 요소에 대해 배울 수있는 많은 리소스가 있습니다. 여기에는 온라인 자습서 및 코스, 서적 및 커뮤니티 포럼이 포함됩니다. 또한, 자신의 반응 형 구성 요소를 만들고 다른 사람의 코드를 연구하는 것을 실험하는 것은 배울 수있는 좋은 방법이 될 수 있습니다.

프레임 워크 나 라이브러리를 사용하여 반응 형 웹 구성 요소를 만들 수 있습니까?

예, 거기, 거기 반응 형 웹 구성 요소를 만드는 데 도움이되는 많은 프레임 워크 및 라이브러리가 사용 가능합니다. 여기에는 부트 스트랩, 기초 및 반응이 포함됩니다. 이 도구는 이미 반응이 좋은 사전 디자인 된 구성 요소 및 레이아웃을 제공하여 시간과 노력을 절약 할 수 있습니다. 그러나 이러한 도구를 효과적으로 사용하기 위해 반응 형 디자인의 기본 원리를 이해하는 것이 여전히 중요합니다.

위 내용은 오늘날 반응 형 웹 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!