집 >웹 프론트엔드 >JS 튜토리얼 >소개 : 시맨틱 UI 구성 요소 라이브러리

소개 : 시맨틱 UI 구성 요소 라이브러리

Christopher Nolan원래의: 2025-02-22 08:47:09142검색

소개 : 시맨틱 UI 구성 요소 라이브러리 대부분의 사람들이 알고 있듯이 부트 스트랩과 기초는 프론트 엔드 개발 프레임 워크 중 현재 리더입니다. 그러나 역사는 우리에게 결국 더 나은 것이 나올 것이며이 경우에는 멀지 않을 수 있음을 보여주었습니다.

. 이 기사는 Semantic UI라는 프레임 워크 환경에 대한 새로운 후보를 소개합니다. Semantic UI는 최신 프론트 엔드 개발 프레임 워크로서 덜 jQuery로 구동됩니다. 그것은 가벼운 사용자 경험을 제공하는 매끄럽고 미묘하며 평평한 디자인 모양을 가지고 있습니다.

시맨틱 UI 웹 사이트에 따르면, 프레임 워크의 목표는“UI를 공유하는 언어를 만들어 설계자와 개발자에게 힘을 실어주는 것입니다. 그들은 수업과 이름 지정 규칙에 대한 의미 론적 설명 언어를 활용하여이를 수행합니다. 다른 프레임 워크와 마찬가지로 약어를 사용하는 대신 평범한 영어에 가까운 방식으로 실제 단어를 사용합니다. 키 테이크 아웃

Semantic UI는 Bootstrap 및 Foundation과 같은 다른 프레임 워크에 비해 가독성과 사용 편의성을 향상시키는 클래스 이름에 자연 언어를 사용하여 인간 친화적 인 HTML을 강조하는 현대적인 프론트 엔드 개발 프레임 워크입니다. 프레임 워크는 UI 요소, UI 컬렉션, UI 뷰, UI 모듈 및 UI 동작의 5 가지 설명 범주를 중심으로 구성되어 다양하고 대화식 웹 인터페이스를 구축하는 데 도움이됩니다. Semantic UI는 실시간 디버그 출력 및 피드 및 댓글과 같은 독점적 인 UI 구성 요소와 같은 다른 프레임 워크에서 사용할 수없는 고유 한 기능과 구성 요소를 제공합니다. 개발 진단 및 사용자 인터페이스 옵션 향상.

최소화 및 중립 기본 스타일로 광범위한 사용자 정의를 지원하므로 다양한 설계 환경 설정에 적응할 수 있으며 구성 요소가 휴대 가능하고 프로젝트 전체에서 유연하게 사용하도록 자체적으로 포함됩니다. Semantic UI는 잘 문서화되어 있으며 스타일 가이드가 포함되어있어 초보자가 액세스 할 수 있고 숙련 된 개발자가 효과적으로 배우고 구현할 수 있도록 효율적으로 액세스 할 수 있습니다.

특징 Semantic UI는 두 가지 방식으로 독특합니다. 첫 번째는 프레임 워크가 구성되는 방식입니다. 재사용 가능한 UI 구성 요소를 정의하기 위해 5 가지 설명 카테고리를 사용합니다.

UI 요소는 기본 빌딩 블록입니다. 혼자 또는 균일 한 그룹으로 나타날 수 있습니다. 예를 들어, 버튼은 독립적이거나 버튼 그룹에 넣을 수 있습니다.

UI 컬렉션은 상호 의존적 인 다른 종류의 요소 그룹입니다. 예를 들어, 웹 양식에는 버튼, 입력, 확인란, 아이콘 등이있을 수 있습니다. UI보기는 일반적인 웹 사이트 콘텐츠를 나타냅니다. 예를 들어, 피드 또는 댓글 섹션 UI 모듈은 대화식 JavaScript 기반 기능을 갖춘 구성 요소입니다. 예로는 아코디언, 디머, 모달 등이 있습니다 UI 동작은 독립적으로 존재할 수없는 구성 요소이지만 다른 구성 요소에 기능을 주입하는 데 사용됩니다. 예를 들어, 양식 검증 동작은 양식 구성 요소에 대한 유효성 검사 기능을 제공합니다.

거의 모든 구성 요소에는 유형, 상태 및 변형이 있습니다. 예를 들어, 일부 버튼 구성 요소 유형에는 표준 버튼, 아이콘이있는 버튼, 애니메이션 버튼 및 버튼은 활성, 비활성화 또는로드 상태에있을 수 있습니다. 마지막으로 버튼은 크기와 색상이 다를 수 있으며 기본, 소셜, 유동성, 토글 등으로 형식화 될 수 있습니다. 이 체계는 구성 요소의 외관에 많은 양의 유연성을 제공합니다.

보시다시피, 시맨틱 UI는 수업의 이름 지정뿐만 아니라 구성 요소의 이름 지정, 정의 및 설명에서도 의미 있고 잘 구성됩니다. 이 구조는 Bootstrap 또는 Foundation에서 발견되는 것과 비교하여 훨씬 더 의미 적입니다.

시맨틱 UI의 두 번째 독특한 점은 다른 프레임 워크에 존재하지 않는 일부 독점적 인 기능과 구성 요소를 제공한다는 것입니다. 예를 들어, UI의 피드 및 댓글은 구성 요소 또는 사이드 바 및 UI 모듈의 모양을 봅니다. 또한 시맨틱 UI 구성 요소와 상호 작용할 때 실시간 디버그 출력이 나타납니다. 웹 콘솔을 열면 구성 요소가 수행하는 작업을 정확히 전달하는 것을 볼 수 있습니다. 시맨틱 UI의 또 다른 강점은 최소 및 중립 스타일을 사용하여 사용자 정의를 열어 두는 것입니다. 여기에는 중요하고 유용한 것들이 포함되어 있지만 사용할 수없는 추가 기능을 제외하고는 포함됩니다. 또한 프레임 워크의 구성 요소는 휴대 가능하고 자체 포함되므로 필요한 것만 잡아서 사용할 수 있습니다.

프레임 워크는 요소에 EM 및 Rem Units를 사용하여 모든 크기에 완전히 반응하고 적응력이 있습니다. 기본 글꼴 만 변경하면 다른 모든 요소가 그에 따라 조정됩니다.

마지막으로, Semantic UI는 매우 잘 문서화되어 있으며 웹 사이트는 다른 구성 요소에 대한 많은 예를 제공합니다. 또한 코드 작성 방법에 대한 기술과 지시 사항이있는 스타일 가이드가 있습니다. 이 모든 것이 프레임 워크를 통증없는 경험으로 만듭니다.

Semantic UI가 다른 프로젝트 및 도구와 통합하는 방법을 찾으려면 통합 페이지를 확인하십시오. Semantic UI로 구축 된 웹 사이트가 어떻게 기발한 방문을 방문 할 수 있는지 알아 보려면

OK. 지금까지 너무 좋아. 그러나 Semantic UI에 대한이 개요는 손을 조금 더러워지지 않으면 완전히 완전하지 않을 것이라고 생각합니다. 이제 Semantic UI의 단맛을 맛 보겠습니다. 다양한 시맨틱 UI 구성 요소를 사용하여 멋진 로그인/가입 양식을 만드는 방법을 보여 드리겠습니다. Semantic ui 로 로그인/가입 양식을 작성하는 방법 사용자가 "로그인"또는 "가입"할지 여부에 따라 뷰를 전환하는 양식을 만들 것입니다. 다음은보기가 어떻게 보이는가입니다 :

먼저 Semantic UI를 다운로드하고 ZIPPER 파일을 열고 "PACKADED"라는 폴더를 추출하십시오. Semantic UI 양식 예제 (또는 쉽게 식별하는 데 사용할 수있는 것)의 이름을 바꿉니다. 양식 예제의 작동하는 데모를 보려면 전체 form.html 파일을 다운로드하여 시맨틱 UI 양식 예제 폴더에 넣으십시오. 브라우저에서 form.html 파일을 열고 양식을 사용하여 감각을 얻으십시오. 이제 관련된 코드를 표시하고 설명하여 양식을 재현하는 방법을 보여 드리겠습니다. 시작하려면 파일의 이름을 wally_form.html로 바꾸고 form.html이라는 빈 파일을 만듭니다. 그것을 열고 다음 html을 추가하십시오 : 이것은 우리의 시작 템플릿입니다. Semantic.css 및 Semantic.js 파일에 연결되며 jQuery 라이브러리에 대한 참조를 추가합니다. 또한 JavaScript 및 CSS에 대한 스크립트 및 스타일 태그도 추가됩니다. 나는 더 쉽고 여러 파일 사이를 뛰어 넘을 필요가 없기 때문에 학습 목적으로 만 내부적으로 만 내부적으로 JavaScript와 CSS를 포함하고 있습니다. 그러나 실제 프로젝트에서는 항상 외부 파일을 사용하는 것이 좋습니다.

우리가 시작하기 전에 시맨틱 UI의 작동 방식을 고려해 봅시다. 모든 구성 요소 정의는 UI 클래스로 시작한 다음 구성 요소의 이름으로 시작합니다. 예를 들어 버튼 요소를 추가하려면 UI 클래스 버튼 만 제공합니다. 상태 및/또는 변형을 추가하려면 필요한 클래스를 삽입하십시오. 예를 들어, 호버에서 색상을 파란색으로 변경하는 버튼을 만들려면 호버 스테이트 클래스 및 파란색 변형 클래스를 추가하십시오 : UI 호버 파란색 버튼. 우리 양식으로 돌아가 봅시다. 수업은 다소 자기 설명이 많고 문서에서 그 의미에 대해 더 많이 볼 수 있기 때문에 각 수업이하는 일을 설명하지는 않을 것입니다.

. 우리가해야 할 첫 번째 일은 우리의 양식을 포함하는 세그먼트 요소를 추가하는 것입니다. 우리는 UI 클래스로 올린 세그먼트 서명으로 div 태그를 추가하여이를 수행합니다. 양식 제목의 경우 UI 반전 블루 블록 헤더 클래스와 함께 H3 태그를 사용합니다. 다음으로 열 사이에 수직 분배기가있는 2 열 그리드를 만듭니다. 첫 번째 열에서 우리는 UI 블루 스택 세그먼트 클래스가있는 div를 추가하여 양식 요소를 보유합니다. 맨 아래에 우리는 또 다른 분배기 요소와 바닥 글 클래스가있는 div를 넣습니다. 소개 : 시맨틱 UI 구성 요소 라이브러리

<span><span><!DOCTYPE HTML></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span> /></span>
</span>  <span><span><span><title</span>></span>Semantic UI Sign In/Sign Up Form<span><span></title</span>></span>
</span>
  <span><span><span><link</span> href<span>="css/semantic.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
  <span><span><span><style</span> type<span>="text/css"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></style</span>></span>
</span>
<span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>

  <span><!-- content will go here -->
</span>

  <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-1.10.2.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="javascript/semantic.js"</span> type<span>="text/javascript"</span>></span><span><span></script</span>></span>
</span>
  <span><span><span><script</span> type<span>="text/javascript"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></script</span>></span>      
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

이제 스타일을 추가해야합니다. 현재 빈 스타일의 태그 안에 아래 코드를 넣으십시오.

다음, 첫 번째 열에서 (HTML 주석에“여기에 양식”이라고 말하면) 양식의 코드를 추가합니다. 양식을 만들려면 UI 형식 클래스로 div 태그를 추가합니다. 그런 다음 필드 클래스가있는 두 개의 div 태그, 인라인 필드 클래스가 있고, 마지막으로 UI Red 제출 버튼이있는 두 개의 div 태그를 더 넣었습니다. 처음 두 필드는 class="ui raised segment signin"> class="ui inverted blue block header"> SIGN IN > class="ui two column grid basic segment"> class="column"> class="ui blue stacked segment"> > > class="ui vertical divider"> OR > class="center aligned column"> > > class="ui divider">> class="footer"> > > 및

비밀번호 입니다. 인라인으로 형식으로 형식화 된 세 번째 Div에서는 확인란을 넣습니다. 클래스 센터가 정렬 된 두 번째 열에서 열 (HTML 주석에“Facebook 버튼”이라고 표시된 경우) H4 제목을 사용하고 Semantic UI의 Facebook 소셜 버튼을 추가합니다 : . 우리는 텍스트와 애니메이션 버튼을 추가하여 포맷을 가입하여 가입하기 위해 바닥 글을 완성합니다. HTML 댓글에 "Text Plus 버튼"이라는 다음 HTML이 추가됩니다.

바닥 글을 올바르게 렌더링하기 위해 스타일을 추가해야합니다. 스타일 태그 안에있는 기존 CSS 아래에 다음 CSS를 추가하십시오.

<span>body<span>, .ui.vertical.divider</span> {
</span>  <span>color: #696969;
</span><span>}
</span>
<span><span>.ui.vertical.divider</span> {
</span>  <span>margin: 0 4px;
</span><span>}
</span>
<span><span>.ui.raised.segment</span> {
</span>  <span>background-color: #fffacd;
</span>  <span>width: 600px;
</span>  <span>margin-top: 0;
</span>  <span>position: fixed;
</span>  <span>left: 10px;
</span>  <span>top: 10px;
</span><span>}</span>

이제 첫 번째 측면 ( "가입")이 준비되었습니다. 두 번째를 만들어 봅시다. 우리는 이미 다루었던 것과 유사한 다음 코드로 시작합니다. 이 html은 기존의 모든 html 아래에 추가됩니다 :

다음으로 우리는 세그먼트 요소 내부의 양식에 대한 코드를 추가합니다. HTML에서 방금 추가했습니다 (HTML 주석에 "여기서"표시됨). 클래스 UI 오류 메시지가 포함 된 div는 나중에 추가 할 양식 검증 동작이 사용자에게 오류를 표시해야하기 때문에 양식의 끝에 표시됩니다.

위의 HTML의 각 필드 요소에 각각의 필드 요소에 각각의 양식에 어떤 부분을 추가 할 것인지를 나타내는 주석이 있습니다. 지금 해보자.

<span><span><span><div</span> class<span>="ui form"</span>></span>
</span>  <span><span><span><div</span> class<span>="field"</span>></span>
</span>    <span><span><span><label</span>></span> Username <span><span></label</span>></span>
</span>    <span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>      <span><span><span><input</span> type<span>="text"</span>></span>
</span>      <span><span><span><i</span> class<span>="user icon"</span>></span><span><span></i</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="field"</span>></span>
</span>    <span><span><span><label</span>></span> Password <span><span></label</span>></span>
</span>    <span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>      <span><span><span><input</span> type<span>="password"</span>></span>
</span>      <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="inline field"</span>></span>
</span>    <span><span><span><div</span> class<span>="ui checkbox"</span>></span>
</span>      <span><span><span><input</span> id<span>="remember"</span> type<span>="checkbox"</span>></span>
</span>      <span><span><span><label</span> for<span>="remember"</span>></span> Remember me <span><span></label</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui red submit button"</span>></span> Sign In <span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

 여기  필드에 대한 코드는 다음과 같습니다

 여기 <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;h4&lt;/span&gt; class&lt;span&gt;=&quot;ui header&quot;&lt;/span&gt;&gt;&lt;/span&gt; Sign in with: &lt;span&gt;&lt;span&gt;&lt;/h4&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;ui facebook button&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;i&lt;/span&gt; class&lt;span&gt;=&quot;facebook icon&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/i&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  Facebook
&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre> 이메일 <p> 필드 : 에 대한 코드는 다음과 같습니다

</p>

<code> 여기 <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;text&quot;&lt;/span&gt;&gt;&lt;/span&gt; Not a member? &lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;ui vertical animated blue mini button signup&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;visible content&quot;&lt;/span&gt;&gt;&lt;/span&gt; Join Us &lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;hidden content&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;i&lt;/span&gt; class&lt;span&gt;=&quot;users icon&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/i&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre> 암호 <p> 필드에 대한 코드는 다음과 같습니다

</p>

<code> 여기  암호 확인 <pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;.footer&lt;/span&gt; {
&lt;/span&gt;  &lt;span&gt;text-align: right;
&lt;/span&gt;&lt;span&gt;}
&lt;/span&gt;
&lt;span&gt;&lt;span&gt;.text&lt;/span&gt; {
&lt;/span&gt;  &lt;span&gt;display: inline;
&lt;/span&gt;&lt;span&gt;}&lt;/span&gt;</pre> 필드 : 에 대한 코드는 다음과 같습니다

<p>

<for for> 및 확인란의 코드 : 

</for></p>

<st> 우리는 또한 링크에 대한 스타일을 추가합니다 : 

<pre class="brush:php;toolbar:false">&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;ui raised segment signup inactive&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;h3&lt;/span&gt; class&lt;span&gt;=&quot;ui inverted blue block header&quot;&lt;/span&gt;&gt;&lt;/span&gt; SIGN UP &lt;span&gt;&lt;span&gt;&lt;/h3&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;ui blue stacked segment&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;       &lt;span&gt;&lt;!-- form here --&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;ui divider&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;footer&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;text&quot;&lt;/span&gt;&gt;&lt;/span&gt; Already a member? &lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;ui vertical animated blue mini button signin&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;      &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;visible content&quot;&lt;/span&gt;&gt;&lt;/span&gt; Log In &lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;      &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;div&lt;/span&gt; class&lt;span&gt;=&quot;hidden content&quot;&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;        &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;i&lt;/span&gt; class&lt;span&gt;=&quot;sign in icon&quot;&lt;/span&gt;&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;/i&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;      &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;    &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;  &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;
&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/div&lt;/span&gt;&gt;&lt;/span&gt;&lt;/span&gt;</pre>

<two> 이제 양식의 두 부분이 준비되었으므로 양식의 한쪽에서 다른 쪽에서 전환 할 코드를 추가해야합니다. 다음 코드를 빈 스크립트 태그에 넣습니다

<p>

<nice nice> 우리의 양식은 멋져 보이지만 사용자가 잘못된 값을 입력하면 어떻게됩니까? 검증을 추가해야합니다. 스크립트 태그 내부에 다음 코드를 추가하여 위에 추가 한 코드 후에 다음을 수행합니다.

</nice></p>

<more> 문서에서 위의 코드가 어떻게 작동하는지에 대한 자세한 내용을 읽을 수 있습니다. <p>
<em> 잘 했어! 이것은 상당히 간단한 예이며 Semantic UI의 기능 표면 만 긁 혔습니다.<h2> 결론 </h2>
<see> 보시다시피, Semantic UI는 새롭고 신선하며 일부 측면에서 프론트 엔드 개발 프레임 워크의 풍경에 독특한 추가 기능입니다. 우리가 여기서 고려한 것에서,이 글을 쓰는 시점에서 불과 몇 달 밖에되지 않았지만 올해 많은 개발자의 시계 목록에있어서 매우 유망하고 많은 개발자의 시계 목록에있을 자격이 있음을 알 수 있습니다. <p>.
<you> 다시 한 번, 전체 시맨틱 UI 라이브러리를 압축 할 때 전체 튜토리얼 파일을 여기에서 다운로드하고 "패키지"폴더 내부에 추가해야합니다.



<questions> 시맨틱 UI 구성 요소 라이브러리에 대한 자주 묻는 질문 (FAQ)



<antic> Semantic UI가 다른 UI 라이브러리와 다른 점은 무엇입니까? </antic></questions></you></p> <p> Semantic UI는 인간 친화적 인 HTML로 인해 다른 UI 라이브러리에서 두드러집니다. 더 빠르고 직관적 인 발전을 허용합니다. Semantic UI의 클래스는 명사/수정 자 관계, 단어 순서 및 복수와 같은 자연 언어에서 구문을 사용하여 개념을 직관적으로 연결합니다. 이로 인해 초보자에게도 코드를 더 읽기 쉽고 이해하기 쉽게 이해할 수 있습니다.  </p> Semantic UI로 시작하려면 어떻게해야합니까? <h2> </h2> Semantic UI를 시작하려면 먼저 설치해야합니다. NPM 명령 : NPM Semantic-UI 설치를 사용하여이를 수행 할 수 있습니다. 설치 후 시맨틱 UI CSS 및 JavaScript를 프로젝트로 가져올 수 있습니다. 그런 다음 HTML에서 시맨틱 UI 구성 요소를 사용할 수 있습니다.  <h3> 반응과 함께 시맨틱 UI를 사용할 수 있습니까? Semantic UI의 공식 반응 통합 인 Semantic UI React라는 특정 라이브러리가 있습니다. Semantic UI 구성 요소와 테마를 React 응용 프로그램에서 직접 사용할 수 있습니다.  </h3> Semantic UI에서 테마를 사용자 정의하는 방법? <p> </p> Semantic UI는 테마를 수정하여 테마를 사용자 정의 할 수 있습니다. 파일. 이 파일은 모든 테마 변수에 대한 중심 설정 역할을합니다. 테마의 모양을 사용자 정의하기 위해 변수 값을 변경할 수 있습니다.  <h3> Semantic UI의 일반적인 구성 요소는 무엇입니까? </h3> <p> Semantic UI는 광범위한 구성 요소를 제공합니다. 일반적인 것 중 일부에는 버튼, 아이콘, 헤더, 디바이더, 레이블, 목록 및 카드가 포함됩니다. 각 구성 요소는 고유 한 변형 및 사용자 정의 옵션 세트와 함께 제공됩니다. </p> <h3> 반응 형 디자인에 Semantic UI를 사용하는 방법은 무엇입니까? 그리드 시스템을 사용하면 다양한 화면 크기에 대해 다른 열 너비를 지정할 수 있으므로 모든 장치에서 디자인이 좋아 보일 수 있습니다. Semantic UI에 어떻게 기여할 수 있습니까? </h3> <p> Semantic UI에 기여할 수 있습니다. Github 저장소에 풀 요청을 제출함으로써. 풀 요청을 제출하기 전에 Semantic UI 팀이 제공 한 기여 지침을 읽으십시오.<use> Semantic UI를 사용하여 시맨틱 UI를 어떻게 사용할 수 있습니까? <h3> </h3> 시맨틱 UI에 대한 공식 각도 통합은 없지만 프로젝트의 시맨틱 UI CSS 및 JavaScript 파일을 포함하여 수동으로 각도와 함께 사용할 수 있습니다. Semantic UI를 업데이트 할 수있는 방법 <p>  NPM 업데이트 Semantic-UI 명령을 실행하여 Semantic UI를 업데이트 할 수 있습니다. 이것은 시맨틱 UI를 최신 버전으로 업데이트 할 것입니다. </p> <h3> 시맨틱 UI에 대한 몇 가지 대안은 무엇입니까? </h3> <p> 시맨틱 UI의 일부 대안에는 부트 스트랩, 기초, 재료 -UI 및 Bulma가 포함됩니다. 각 라이브러리에는 고유 한 강점과 약점이 있으므로 최선의 선택은 특정 요구와 선호도에 따라 다릅니다.</p></use></p></see></em></p></more></two></st>

위 내용은 소개 : 시맨틱 UI 구성 요소 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：앱 프레임 워크를 사용하여 모바일 HTML5 응용 프로그램 작성다음 기사：앱 프레임 워크를 사용하여 모바일 HTML5 응용 프로그램 작성