스크립트 & 소스코드 공유

//链接数据库

[root@q352-1371 ~]# mysql -u root -p

//复制表格

mysql > create table dateBasesName.tableName_copy like dateBasesName.tableName;

//复制表格并且复制内容

mysql > create table dateBasesName.tableName_copy select * from dateBasesName.tableName;

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tsparticles.min.js"></script>
<div id="tsparticles"></div>

/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- tsparticles container ---- */
#tsparticles {
position: absolute;
width: 100%;
height: 100%;
background-color: #0d47a1;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}

tsParticles.load("tsparticles", {
fpsLimit: 60,
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ff0000",
animation: {
enable: true,
speed: 20,
sync: true
}
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 3,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 20,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: "random",
opacity: 0.4,
width: 1,
triangles: {
enable: true,
color: "#ffffff",
opacity: 0.1
}
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 0.8,
speed: 3
},
repulse: {
distance: 200
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true,
background: {
color: "#000000",
image: "",
position: "50% 50%",
repeat: "no-repeat",
size: "cover"
}
});

不常用但偶尔必要的选项

roundLengths

如果设置为true，则将slide的宽和高取整(四舍五入)，以防止某些分辨率的屏幕上文字或边界(border)模糊。

例如当你设定slidesPerView : 3时，则可能出现slide的宽度为341.33px，开启roundLengths后宽度取整数341px。

var mySwiper = new Swiper('.swiper-container',{
roundLengths : true,
})

grabCursor

该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）

var mySwiper = new Swiper('.swiper-container',{
grabCursor : true,
})

parallax

设置为true开启Swiper的视差效果，内容在切换时更有层次感。

效果可以应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值的slide个数-1分之1

<div class="swiper-container">
<div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
<div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div>
<div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
<p>从右边300px开始进入，时间600ms</p>
</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
<div data-swiper-parallax-scale="0.15" >缩放变化</div>
</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
parallax : true,
})
</script>

autoHeight

自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。

var swiper = new Swiper('.swiper-container', {
autoHeight: true, //高度随内容变化
});

nested

用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。

请将子swiper的nested设置为true。

由于需要在slideChangeEnd时判断作用块，因此快速滑动时这个选项无效。

var mySwiper = new Swiper('#swiper-container1')//父swiper
var mySwiper2 = new Swiper('#swiper-container2',{//子swiper
nested:true,
resistanceRatio: 0,
})

watchOverflow

当没有足够的slide切换时，例如只有1个slide，swiper会失效且隐藏导航等。默认不开启这个功能。

loop模式无效，因为会复制slide。

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
slider1</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',{
watchOverflow: true,//因为仅有1个slide，swiper无效
navigation: {
nextEl: '.swiper-button-next',//自动隐藏
prevEl: '.swiper-button-prev',//自动隐藏
},
pagination: {
el: '.swiper-pagination',//自动隐藏
},
scrollbar: {
el: '.swiper-scrollbar',//自动隐藏
},
})
</scrip>

preloadImages

默认为true，Swiper会强制加载所有图片后才初始化。

var mySwiper = new Swiper('.swiper-container',{
preloadImages:false,
})

updateOnImagesReady

当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true

var mySwiper = new Swiper('.swiper-container',{
updateOnImagesReady : true,
})

centeredSlides

设定为true时，active slide会居中，而不是默认状态下的居左。

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
centeredSlides : true,
})
</script>
<style type="text/css">
.swiper-slide-active{
background:#ff6600;
color:#fff;
}
</style>

centeredSlidesBounds

当设置了Active Slide居中后，还可以配合设置此参数，使得第一个和最后一个Slide 始终贴合边缘。

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
centeredSlides : true,
centeredSlidesBounds: true,
})
</script>
<style type="text/css">
.swiper-slide-active{
background:#ff6600;
color:#fff;
}
</style>

slidesPerGroup

在carousel mode下定义slides的数量多少为一组。

var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
slidesPerGroup : 3,
})

slidesPerColumn

设置多行布局里面每列的slide数量。

当slidesPerColumnFill:column，需要同时设定swiper-container的高度。

slidesPerColumn目前还不兼容loop模式（loop: true）。

在slide数量不足以填满的情况下可能会出现布局不理想（例如4行3列，但是只有10个slide），建议使用空的slide将数量补足。

var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 3,//一行显示3个
slidesPerColumn: 2,//显示2行
})

slidesPerColumnFill

多行布局中以什么形式填充

var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 3,
slidesPerColumn : 2,
slidesPerColumnFill : 'row',
})

slidesOffsetBefore

设定slide与左边框的预设偏移量（单位px）。

var mySwiper = new Swiper('.swiper-container',{
slidesOffsetBefore : 100,
})

slidesOffsetAfter

设定slide与右边框的预设偏移量（单位px）。

var mySwiper = new Swiper('.swiper-container',{
slidesOffsetAfter : 100,
})

simulateTouch

鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。

var mySwiper = new Swiper('.swiper-container',{
simulateTouch : false,//禁止鼠标模拟
})

제공해주신 디자인 기초 이론 및 실무 지식에 관한 내용을 한국어로 번역하여 마크다운 형식으로 정리해 드립니다.

디자이너가 반드시 갖춰야 할 기초 지식 가이드

사람의 에너지는 한정되어 있어 모든 분야에 정통할 수는 없으며, 디자이너 역시 모든 방면에서 완벽할 필요는 없습니다. 자신의 산업군과 전공에 맞춰 필요한 기술과 지식을 학습하는 것이 중요합니다. 아래에서 디자인을 하기 위해 반드시 숙지해야 할 기초 지식들을 살펴보겠습니다.

1. 이론적 기초 지식

이론적 기초는 미술 회화의 기초 지식과 디자인의 3대 구성을 의미합니다. 이는 디자이너의 뿌리이며, 어떤 디자인 분야에 종사하든 결코 빠질 수 없는 핵심 지식입니다.

미술 기초 지식 (구조, 소묘, 색채 관계)

• 구조 관계: 물체의 투시, 비율, 구조를 연구하는 것입니다.
  • 투시: 물체가 가까이 있으면 크고 멀리 있으면 작게 보이는 공간 관계입니다.
  • 비율: 물체가 차지하는 3차원 공간의 크기(부피)를 의미합니다.
  • 구조: 복잡한 물체를 원형, 삼각형, 사각형 등 그리기 쉬운 기본 도형으로 해체하여 파악하는 것입니다.
• 소묘 관계 (명암): 광원이 물체에 비칠 때 발생하는 관계를 연구합니다.
  • 3대면: 빛을 받는 방향에 따라 밝은 면(명면), 중간 면(회색면), 어두운 면(암면)으로 나뉩니다.
  • 5대조: 물체의 입체감과 공간감을 표현하는 5가지 단계입니다. 밝은 부분, 중간 부분, 명암 경계선, 그림자 속의 반사광, 그리고 그림자를 포함합니다. 특히 '명암 경계선'을 잘 파악해야 물체의 부피감을 효과적으로 살릴 수 있습니다.
• 색채 관계: 색상이 서로 융합될 때 발생하는 영향을 연구합니다. 대비색, 보색, 인접색 등의 관계와 환경색, 고유색 등을 포함합니다.

디자인의 3대 구성

현대 예술 디자인의 가장 중요한 기초로 평면 구성, 색채 구성, 입체 구성을 말합니다.

• 평면 구성: 2차원 공간 안에서 형태의 변화를 연구하는 학문입니다. 점, 선, 면을 일정한 규칙에 따라 결합하여 시각 언어를 형성하며, 추상성과 형식미가 강합니다. 이성과 논리를 바탕으로 형상 간의 배열 방법을 연구하는 감성과 이성의 결합체입니다.
• 색채 구성: 사람들이 오랜 시간 동안 색상에 대해 느껴온 심리적 반응과 고정 관념을 정리한 것입니다. 색상(Hue), 순도(Chroma/Saturation), 명도(Value)의 관계를 연구하여 목적에 맞는 심리적 효과를 창출합니다.
• 입체 구성 (공간 구성): 시각과 역학을 기초로 재료를 사용하여 아름다운 형체를 만드는 방법입니다. 2차원 평면에서 3차원 입체 공간으로 확장되는 표현 방식으로, 평면 구성과 밀접한 연관이 있으면서도 차별화된 특징을 가집니다.

2. 실무 및 그래픽 디자인 지식

로고, 포스터, 브로슈어, 리플릿 등을 디자인하기 위해 필요한 구체적인 실무 지식입니다.

소프트웨어 지식 (도구 활용)

도구는 가장 기본적인 기초입니다. 디자인 분야에 따라 다음 소프트웨어를 반드시 마스터해야 합니다.

• Adobe Photoshop (PS)
• Adobe Illustrator (AI)
• CorelDRAW (CDR)

인쇄 공정 및 제작

명함, 카드, 전단지(DM), 포스터, POP 등을 디자인한다면 인쇄 공정에 대한 이해가 필수적입니다.

• 종이의 종류, 판형(레이아웃) 공정
• 인쇄 표면 후가공(코팅, 박 등), 제본 공정
• 패키지 디자인의 경우 도면(칼선/Die-cut) 지식 필수

레이아웃 및 편집 지식

책자, 광고, 웹 디자인에서 주로 사용되는 원리입니다.

• 레이아웃 배치 원리 및 그리드 시스템(Grid System) 이론
• 페이지 구성의 기본 요소 유형 파악

브랜딩 및 웹 디자인

• 브랜드 지식: 기업 VIS(Visual Identity System), 로고 디자인, 타이포그래피(서체 디자인) 및 그래픽 크리에이티브
• WEB 디자인 지식: 디자인 가이드라인 및 규격 준수

latest.lib.php 하단에 아래 함수를 추가하시면됩니다.

// $bo_tables 테이블들 사이 콤마(,) 단위로 구분해서 넣을 것, 콤마 사이에 공백 없이 (ex aaa,bbb,)
function latest_all($skin_dir='', $bo_tables, $rows=10, $subject_len=40, $cache_time=1, $options=''){
global $g5;

if (!$skin_dir) $skin_dir = 'basic';

if(preg_match('#^theme/(.+)$#', $skin_dir, $match)) {
if (G5_IS_MOBILE) {
$latest_skin_path = G5_THEME_MOBILE_PATH.'/'.G5_SKIN_DIR.'/latest/'.$match[1];
if(!is_dir($latest_skin_path))
$latest_skin_path = G5_THEME_PATH.'/'.G5_SKIN_DIR.'/latest/'.$match[1];
$latest_skin_url = str_replace(G5_PATH, G5_URL, $latest_skin_path);
} else {
$latest_skin_path = G5_THEME_PATH.'/'.G5_SKIN_DIR.'/latest/'.$match[1];
$latest_skin_url = str_replace(G5_PATH, G5_URL, $latest_skin_path);
}
$skin_dir = $match[1];
} else {
if(G5_IS_MOBILE) {
$latest_skin_path = G5_MOBILE_PATH.'/'.G5_SKIN_DIR.'/latest/'.$skin_dir;
$latest_skin_url  = G5_MOBILE_URL.'/'.G5_SKIN_DIR.'/latest/'.$skin_dir;
} else {
$latest_skin_path = G5_SKIN_PATH.'/latest/'.$skin_dir;
$latest_skin_url  = G5_SKIN_URL.'/latest/'.$skin_dir;
}
}
$list = array();
$sql_common = " from {$g5['board_new_table']} a  where find_in_set(a.bo_table, '{$bo_tables}')";
$sql_common .= " and a.wr_id = a.wr_parent ";
$sql_order = " order by a.bn_id desc ";
$sql = " select a.* {$sql_common} {$sql_order} limit 0, {$rows}";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
$sql = " select * from {$g5['board_table']} where bo_table = '{$row['bo_table']}' ";
$board = sql_fetch($sql);
$tmp_write_table = $g5['write_prefix'] . $row['bo_table'];
$row2 = sql_fetch(" select * from {$tmp_write_table} where wr_id = '{$row['wr_id']}' ");
$list[$i] = $row2;
$list[$i] = get_list($row2, $board, $latest_skin_url, $subject_len);
$list[$i]['bo_subject'] = $row['bo_subject'];
$list[$i]['bo_table'] = $row['bo_table'];
}

ob_start();
include $latest_skin_path.'/latest.skin.php';
$content = ob_get_contents();
ob_end_clean();

return $content;
}
echo latest_all("스킨명", "게시판명1,게시판명2,게시판명3,게시판명4", 출력갯수, 글자수);