오늘날 반응 형 웹 구성 요소를 사용하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

Christopher Nolan

Feb 22, 2025 am 09:38 AM

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

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

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

키 테이크 아웃

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

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

웹 구성 요소는 무엇입니까? 본질적으로, 그들은 자신의 HTML 요소를 구축 할 수있는 W3 사양입니다. 문자 그대로 그들에 대해 아무것도 모른다면 기사에서 사용하는 일부 용어에는 기본적인 이해가 필요하기 때문에 그들에 대해 빨리 읽을 가치가있을 것입니다.

왜 내가 그것들을 사용하고 싶습니까?

웹 구성 요소를 사용하고 싶을 때의 좋은 예는 브라우저에 기본적으로 존재하지 않는 UI (컬러 피커, 회전 목마, 아코디언 또는 유형)와 같은 요소를 구축 할 때입니다. 또는 매번 재건축이 아프게하는 다양한 사이트에서 항상 사용하는 구성 요소가있을 수 있습니다. 소셜 버튼, 구독 양식 또는 알림과 같은 것들입니다. 웹 구성 요소를 사용하면 와 같은 HTML 태그를 사용하여 마크 업, 스타일 및 스크립트를 캡슐화 된 모듈에 묶을 수 있습니다. Angular Directives 또는 React 구성 요소를 사용한 경우 익숙해 보이지만 여기서는 이점은 브라우저 및 프레임 워크에 고유하다는 것입니다.

. 웹 구성 요소를 사용하면 UI 조각을 한 번 구축하여 어디서나 사용할 수 있습니다. 이는 각 구성 요소에 대해 단일 진실의 소스가있는 도서관을 구축하려는 Living StyleGuide와 같은 프로젝트에 이상적입니다. 이 접근법은 코드를 적게 반복하고 귀하 또는 귀하의 팀이 단순히 참조를 인터페이스에 삭제할 수있는 휴대용 구성 요소가 있음을 의미합니다. 웹 구성 요소를 사용하는 또 다른 큰 장점은 이러한 구성 요소를 포장하여 다른 개발자 또는 웹 사이트 소유자와 공유하는 기능입니다. 기본적으로 소비자는 다음과 같은 웹 페이지에 가져 오기 명령문을 넣을 수 있습니다.

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

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

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

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

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

나는 HTML 가져 오기를 사용하여 시연으로 itepoint 사이트로 끌어 올릴 것입니다 :

이제 우리는 모두 설정되어 있습니다. 반응 형 기술을 살펴 보겠습니다.

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

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

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

이것은 구성 요소가 경계를 인식하지 못하기 때문입니다. 컨텍스트가 없습니다.

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

. flexbox trickery 웹 구성 요소를 사용하려는 경우 최신 브라우저 만 지원하고 IE9에 대해 걱정하지 않아도되며,이 경우 약간의 Flexbox Magic이이를 반응 형 웹 구성 요소로 전환하는 데 완벽 할 수 있습니다. 추가 JavaScript가 필요하지 않으므로 선호하는 접근법입니다. 다시 한 번, 여기의 코드 샘플은 내가 사용한 레이아웃 스타일을 순전히 보여줍니다. 오늘날 반응 형 웹 구성 요소를 사용하는 방법

컨테이너를 표시하도록 설정하여 : flex; Flex-Wrap : 랩, .form__item 요소가 나란히 나타나지 만 컨테이너가 너무 작아지면 컨테이너가 너무 쌓일 수 있도록 약간의 조정을해야합니다.

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

요소 쿼리 요소 쿼리의 아이디어는 미디어 쿼리 유형 기능을 모방 할 수 있지만 구성 요소 수준에서 반응 형 웹 구성 요소에 매우 편리하다는 것입니다. 본질적으로 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> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span></span>

결론

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