최고의 jQuery를 UI 예 - 정렬 (정렬 가능한) 튜토리얼 2024년, 이 튜토리얼에서는 기본 기능,연결 목록,연결 목록 탭,지연 시작,그것은 격자로 표시됩니다,자리 배치,처리 빈 목록,항목 포함 / 제외,포털 구성 요소 (포틀릿),를 배울 수 있습니다.
정렬 된 목록 또는 그리드 요소를 조정하는 마우스를 사용합니다.
정렬 상호 작용에 대한 자세한 내용은 API 문서를 참조 정렬 위젯 (위젯을 정렬) .
정렬 기능은 모든 DOM 요소에 사용할 수 있습니다. 클릭하고 새로운 위치의 요소 목록에 마우스를 드래그, 기타 항목이 자동으로 조정됩니다. 기본적으로 정렬 각 항목은 공유 draggable
속성을.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 정렬 (정렬 가능한) - 기본 기능 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> #sortable {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 폭 : 60 %;} #sortable 리 {마진 : 0 3px의 3px의 3px의; 패딩 : 0.4em; 패딩 왼쪽 : 1.5em; 글꼴 크기 : 1.4em; 높이 : 18px;} #sortable 리 범위 {위치 : 절대; 마진 왼쪽 : -1.3em;} </ 스타일> <스크립트> $ (함수 () { $ ( "#sortable") .sortable (); $ ( "#sortable") .disableSelection (); }); </ 스크립트> </ 헤드> <바디> <UL 아이디 = "정렬"> <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 상품 1 </ 리> <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 상품 2 </ 리> <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 항목 3 </ 리> <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 항목 4 </ 리> <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 항목 5 </ 리> <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 항목 6 </ 리> <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 상품 7 </ 리> </ UL> </ BODY> </ HTML>
바이 connectWith
반대로 다른 정렬 된리스트 내의 요소를 두는 선택 옵션을 전달하고. 가장 쉬운 방법은 CSS 클래스의 모든 관련 그룹의 목록이며, 다음 정렬 기능 (예를 들어,에 클래스를 전달 connectWith: '.myclass'
).
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 정렬 (정렬 가능한) - 연결 목록 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> # Sortable1, #의 sortable2 {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0 0 2.5em; 플로트 : 왼쪽; 마진 오른쪽 : 10px를;} # Sortable1 리, #의 sortable2 리 {마진 : 0 5px 5px 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 폭 : 120 픽셀;} </ 스타일> <스크립트> $ (함수 () { $ ( "# Sortable1, #의 sortable2") .sortable ({ connectWith ".connectedSortable" .}) DisableSelection (); }); </ 스크립트> </ 헤드> <바디> <UL 아이디 = "sortable1"클래스 = "connectedSortable"> <리 클래스 = "UI 상태 기본"> 항목 1 </ 리> <리 클래스 = "UI 상태 기본"> 항목 2 </ 리> <리 클래스 = "UI 상태 기본"> 항목 3 </ 리> <리 클래스 = "UI 상태 기본"> 항목 4 </ 리> <리 클래스 = "UI 상태 기본"> 항목 5 </ 리> </ UL> <UL 아이디 = "sortable2"클래스 = "connectedSortable"> <리 클래스 = "UI 상태-강조"> 항목 1 </ 리> <리 클래스 = "UI 상태-강조"> 항목 2 </ 리> <리 클래스 = "UI 상태-강조"> 항목 3 </ 리> <리 클래스 = "UI 상태-강조"> 항목 4 </ 리> <리 클래스 = "UI 상태-강조"> 항목 5 </ 리> </ UL> </ BODY> </ HTML>
반대로 또 다른 정렬 된리스트 내의 요소를 넣고, 적절한 탭리스트 아이템의 상단에 배치함으로써.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 정렬 (정렬 가능한) - 탭 연결 목록 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> # Sortable1 리, #의 sortable2 리 {마진 : 0 5px 5px 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 폭 : 120 픽셀;} </ 스타일> <스크립트> $ (함수 () { $ ( "# Sortable1, #의 sortable2") .sortable () disableSelection (); var에 $의 탭 =의 $ ( "#tabs") .tabs (); var에 $ tab_items = $ ( "UL : 첫 번째 리", $ 탭) {(.droppable 동의 : ".connectedSortable 리를" hoverClass "UI 상태-가져가" 드롭 : 함수 (이벤트, UI)를 { var에 $ 항목 = $ (이); var에 $ 목록 = $ ($ item.find ( "A") .attr ( "HREF")) .find ( ".connectedSortable"); ui.draggable.hide은 ({) (함수를 "느린" $ Tabs.tabs ( "옵션", "활성", $의 tab_items.index ($ 항목)); $ (이) .appendTo ($ 목록) .show ( "느린"); }); } }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "탭"> <UL> <리> <a href="#tabs-1"> 눈크 tincidunt </A> </ 리> <리> <a href="#tabs-2"> Proin 슬픔 </A> </ 리> </ UL> <사업부 아이디 = "탭-1"> <UL 아이디 = "sortable1"클래스 = "connectedSortable UI 헬퍼 리셋"> <리 클래스 = "UI 상태 기본"> 항목 1 </ 리> <리 클래스 = "UI 상태 기본"> 항목 2 </ 리> <리 클래스 = "UI 상태 기본"> 항목 3 </ 리> <리 클래스 = "UI 상태 기본"> 항목 4 </ 리> <리 클래스 = "UI 상태 기본"> 항목 5 </ 리> </ UL> </ DIV> <사업부 아이디 = "탭-2"> <UL 아이디 = "sortable2"클래스 = "connectedSortable UI 헬퍼 리셋"> <리 클래스 = "UI 상태-강조"> 항목 1 </ 리> <리 클래스 = "UI 상태-강조"> 항목 2 </ 리> <리 클래스 = "UI 상태-강조"> 항목 3 </ 리> <리 클래스 = "UI 상태-강조"> 항목 4 </ 리> <리 클래스 = "UI 상태-강조"> 항목 5 </ 리> </ UL> </ DIV> </ DIV> </ BODY> </ HTML>
시간 지연 및 정렬 실수를 방지하는 거리만큼 지연된. 에 의해 delay
(밀리 초) 옵션은 일종의 끌기 시작하기 전에 설정해야합니다. 으로 distance
픽셀 옵션은 일종의 끌기 시작하기 전에 설정해야합니다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 정렬 (정렬 가능한) - 지연 시작 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> # Sortable1, #의 sortable2 {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 마진 - 하단 : 15 픽셀; 줌 : 1;} # Sortable1 리, #의 sortable2 리 {마진 : 0 5px 5px 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 폭 : 95 %;} </ 스타일> <스크립트> $ (함수 () { $ ( "# Sortable1") .sortable ({ 지연 : 300 }); $ ( "# Sortable2") .sortable ({ 거리 : 15 }); $ ( "리튬") .disableSelection (); }); </ 스크립트> </ 헤드> <바디> <H3 클래스 = "문서"> 시간 지연이 300ms : </ H3> <UL 아이디 = "sortable1"> <리 클래스 = "UI 상태 기본"> 항목 1 </ 리> <리 클래스 = "UI 상태 기본"> 항목 2 </ 리> <리 클래스 = "UI 상태 기본"> 항목 3 </ 리> <리 클래스 = "UI 상태 기본"> 항목 4 </ 리> </ UL> <H3 클래스 = "문서"> 거리 지연 15 픽셀 : </ H3> <UL 아이디 = "sortable2"> <리 클래스 = "UI 상태 기본"> 항목 1 </ 리> <리 클래스 = "UI 상태 기본"> 항목 2 </ 리> <리 클래스 = "UI 상태 기본"> 항목 3 </ 리> <리 클래스 = "UI 상태 기본"> 항목 4 </ 리> </ UL> </ BODY> </ HTML>
동일한 크기와 부동 디스플레이와 CSS를 사용하도록 정렬 항목, 그리드로 표시됩니다 보자.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI가 (정렬 가능한) 정렬 - 그리드를 표시 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> #sortable {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 폭 : 450 픽셀;} #sortable 리 {:; : 1 픽셀; 플로트 : 마진 패딩에는 3px 3px의 0 3px의 왼쪽, 폭 : 100 픽셀, 높이 90 픽셀, 글꼴 크기 : 4em; 텍스트 정렬 : 센터;} </ 스타일> <스크립트> $ (함수 () { $ ( "#sortable") .sortable (); $ ( "#sortable") .disableSelection (); }); </ 스크립트> </ 헤드> <바디> <UL 아이디 = "정렬"> <리 클래스 = "UI 상태 기본"> 1 </ 리> <리 클래스 = "UI 상태 기본"> 2 </ 리> <리 클래스 = "UI 상태 기본"> 3 </ 리> <리 클래스 = "UI 상태 기본"> 4 </ 리> <리 클래스 = "UI 상태 기본"> 5 </ 리> <리 클래스 = "UI 상태 기본"> 6 </ 리> <리 클래스 = "UI 상태 기본"> 7 </ 리> <리 클래스 = "UI 상태 기본"> 8 </ 리> <리 클래스 = "UI 상태 기본"> 9 </ 리> <리 클래스 = "UI 상태 기본"> 10 </ 리> <리 클래스 = "UI 상태 기본"> 11 </ 리> <리 클래스 = "UI 상태 기본"> 12 </ 리> </ UL> </ BODY> </ HTML>
새 위치에 정렬 항목을 드래그하면 다른 항목은 항목을위한 공간을 만들 것입니다. 질문 placeholder
빈 비주얼 스타일의 클래스를 정의 전송 옵션을 선택합니다. 부울 값은 forcePlaceholderSize
개체 틀의 크기를 설정하는 옵션을 선택합니다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 정렬 (정렬 가능한) - 위치 지정자 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> #sortable {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 폭 : 60 %;} #sortable 리 {마진 : 0 5px 5px 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 높이 : 1.5em;} HTML> 신체 #sortable 리 {높이 : 1.5em; 라인 - 높이 : 1.2em;} .ui-상태 강조 {높이 : 1.5em; 라인 - 높이 : 1.2em;} </ 스타일> <스크립트> $ (함수 () { {(.sortable $ ( "#sortable") 자리 표시 자 : "UI 상태 강조 표시" }); $ ( "#sortable") .disableSelection (); }); </ 스크립트> </ 헤드> <바디> <UL 아이디 = "정렬"> <리 클래스 = "UI 상태 기본"> 항목 1 </ 리> <리 클래스 = "UI 상태 기본"> 항목 2 </ 리> <리 클래스 = "UI 상태 기본"> 항목 3 </ 리> <리 클래스 = "UI 상태 기본"> 항목 4 </ 리> <리 클래스 = "UI 상태 기본"> 항목 5 </ 리> <리 클래스 = "UI 상태 기본"> 항목 6 </ 리> <리 클래스 = "UI 상태 기본"> 항목 7 </ 리> </ UL> </ BODY> </ HTML>
로 옵션 설정
false
별도 빈리스트에 배치 된 모든 항목의 목록을 방지하기. 기본적으로 정렬 항목은 빈 목록에 배치 할 수 있습니다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 정렬 (정렬 가능한) - 빈 목록을 처리 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> # Sortable1, #의 sortable2, #의 sortable3 {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 플로트 : 왼쪽; 마진 오른쪽 : 10px를; 배경 : #eee을; 패딩 : 5px; 폭 : 143px를} # Sortable1 리, #의 sortable2 리, #의 sortable3 리 {여백 : 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 폭 : 120 픽셀;} </ 스타일> <스크립트> $ (함수 () { .sortable $ ( "Ul.droptrue"() { connectWith "UL" }); .sortable $ ( "Ul.dropfalse"() { connectWith "UL" dropOnEmpty : 거짓 }); $ ( "# Sortable1, #의 sortable2, #의 sortable3") .disableSelection (); }); </ 스크립트> </ 헤드> <바디> <UL 아이디 = "sortable1"클래스 = "droptrue"> <리 클래스 = "▽를 국가 기본"> 배치 할 수 있습니다 ko </ 리> <리 클래스 = "UI 상태 기본"> ko 빈 목록 </ 리> <리 클래스 = "UI 상태 기본"> 항목 3 </ 리> <리 클래스 = "UI 상태 기본"> 항목 4 </ 리> <리 클래스 = "UI 상태 기본"> 항목 5 </ 리> </ UL> <UL 아이디 = "sortable2"클래스 = "dropfalse"> <리 클래스 = "UI 상태-하이라이트"> 배치 할 수 없습니다 ko </ 리> <리 클래스 = "UI 상태-강조"> ko 빈 목록 </ 리> <리 클래스 = "UI 상태-강조"> 항목 3 </ 리> <리 클래스 = "UI 상태-강조"> 항목 4 </ 리> <리 클래스 = "UI 상태-강조"> 항목 5 </ 리> </ UL> <UL 아이디 = "sortable3"클래스 = "droptrue"> </ UL> <br style="clear:both"> </ BODY> </ HTML>
에 의해 지정 items
항목을 정렬 할 수있는 jQuery를 선택 옵션을 전달합니다. 이 옵션은 프로젝트를 정렬 할 수없는 외부에 있지만 유효한 대상 정렬 항목이 없습니다.
당신은 정렬 된 특정 항목을 방지하려면 cancel
JQuery와 선택기를 전달하는 옵션을 선택합니다. 취소 된 항목은 여전히 유효 정렬 대상 다른 항목입니다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 정렬 (정렬 가능한이) - 포함 / 항목을 제외 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> # Sortable1, #의 sortable2 {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 줌 : 1;} # Sortable1 리, #의 sortable2 리 {마진 : 0 5px 5px 5px; 패딩 : 3px의; 폭 : 90 %;} </ 스타일> <스크립트> $ (함수 () { $ ( "# Sortable1") .sortable ({ 항목 : "리 :하지 (.ui-상태 사용 안 함)" }); $ ( "# Sortable2") .sortable ({ 취소 ".ui 상태 비활성화" }); $ ( "# Sortable1 리, #의 sortable2 리") .disableSelection (); }); </ 스크립트> </ 헤드> <바디> <H3 클래스 = "문서"> 정렬되는 항목 지정 : </ H3> <UL 아이디 = "sortable1"> <리 클래스 = "UI 상태 기본"> 항목 1 </ 리> <리 클래스 = "UI 상태 기본 UI 상태 비활성화"> (I가 정렬 또는 드롭 대상이 아니에요) </ 리> <리 클래스 = "UI 상태 기본 UI 상태 비활성화"> (I가 정렬 또는 드롭 대상이 아니에요) </ 리> <리 클래스 = "UI 상태 기본"> 항목 4 </ 리> </ UL> <H3 클래스 = "워드 프로세서"> 주문을 취소 (하지만 놓기 대상으로 사용) : </ H3>를 <UL 아이디 = "sortable2"> <리 클래스 = "UI 상태 기본"> 항목 1 </ 리> <리 클래스 = "UI 상태 기본 UI 상태 비활성화"> (I가 정렬 아니에요) </ 리> <리 클래스 = "UI 상태 기본 UI 상태 비활성화"> (I가 정렬 아니에요) </ 리> <리 클래스 = "UI 상태 기본"> 항목 4 </ 리> </ UL> </ BODY> </ HTML>
포털 구성 요소 (스타일 사업부) 정렬로 사용하고, 사용 connectWith
정렬 열 사이의 통신을 허용하는 옵션을 선택합니다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI가 (정렬 가능한) 정렬 - 포털 구성 요소 (포틀릿) </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> 몸 { 최소 폭 : 520px; } .column { 폭 : 170px; 플로트 : 왼쪽; 패딩 바닥 : 100 픽셀; } .portlet { 여백 : 0 1em의 1em 0; 패딩 : 0.3em; } .portlet 헤더를 { 패딩 : 0.2em 0.3em; 마진 - 하단 : 0.5em; 위치 : 상대; } .portlet - 토글 { 위치 : 절대; 최고 : 50 %; 오른쪽 : 0; 여백 - 가기 : -8px; } .portlet 콘텐츠를 { 패딩 : 0.4em; } .portlet-자리 { 국경 : 1 픽셀 점선 블랙; 여백 : 0 1em의 1em 0; 높이 : 50 픽셀; } </ 스타일> <스크립트> $ (함수 () { $ ( ".column") .sortable ({ connectWith ".column" 처리 : ".portlet 헤더를" 취소 ".portlet-전환을" 자리 표시 자 : "포틀릿 자리 UI 코너 - 모든" }); $ ( ".portlet") .addClass ( "UI 위젯 UI 위젯 콘텐츠 UI 헬퍼 - clearfix UI 코너 모두") .find ( ".portlet 헤더") .addClass ( "UI 위젯 헤더 UI 코너 모두") .prepend ( "<스팬 클래스 = '▽를-아이콘 UI를-아이콘 - minusthick 포틀릿-전환'> </ SPAN>"); $ ( ".portlet-전환") .click (함수 () { VAR 아이콘 = $ (이); icon.toggleClass ( "UI-아이콘 - minusthick UI-아이콘 - plusthick"); ( ".portlet 콘텐츠")를 .toggle를 ( ".portlet") .find icon.closest (); }); }); </ 스크립트> </ 헤드> <바디> <사업부 클래스 = "열"> <사업부 클래스 = "포틀릿"> <사업부 클래스 = "포틀릿 헤더"> 구독 </ DIV> <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아 </ DIV> <사업부 클래스 = "포틀릿"> <사업부 클래스 = "포틀릿 헤더"> 뉴스 </ DIV> <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아 </ DIV> </ DIV> <사업부 클래스 = "열"> <사업부 클래스 = "포틀릿"> <사업부 클래스 = "포틀릿 헤더"> 카트 </ DIV> <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아 </ DIV> </ DIV> <사업부 클래스 = "열"> <사업부 클래스 = "포틀릿"> <사업부 클래스 = "포틀릿 헤더"> 링크 </ DIV> <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아 </ DIV> <사업부 클래스 = "포틀릿"> <사업부 클래스 = "포틀릿 헤더"> 이미지 </ DIV> <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아 </ DIV> </ DIV> </ BODY> </ HTML>