이것저것 메모하고 백업
필요한게 있으시면 긁어가셔도 좋아요
-
접기
-
<span class="텍스트 이펙트명">텍스트</span> 을 HTML에서 수정
각 폰트의 크기 및 색상은 그냥 작성하면서 유동적으로 바꾸면 됨
텍스트
.HL {
font-family: 'Chosunilbo_myungjo';
background: linear-gradient(to top, #960707 50%, transparent 50%);
}
참고 : https://lifenourish.tistory.com/843
텍스트
.texteffect {
text-align: center;
padding: 5px 3px 5px 3px;
font-family: 'Chosunilbo_myungjo';
text-shadow: 0 0 2px #bc2424;
border: 6px solid #a50000;
border-style: hidden hidden hidden solid
}
텍스트
*수성돋움체를 쓰고싶으면 texteffect1 을 쓰기.
텍스트.
.texteffect2 {
text-align: center;
padding: 10px 7px 10px 7px;
font-family: 'Chosunilbo_myungjo';
font-style: italic;
border: 1px solid #eaeaea;
}
*위아래가 깨져 보이는데 4방향 다 닫힌 박스임.
텍스트
(단순 밑줄만 넣어줌. 폰트는 자유)
.HL2 {
background: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%, transparent 50%);
background-size:100% 50%;
background-position: center 100%;
background-repeat:no-repeat;
}
참조 : https://developer.mozilla.org/ko/docs/Web/CSS/border-style
https://developer.mozilla.org/ko/docs/Web/CSS/background-size
-
아래는 그냥 제목으로 쓰기 좋은 텍스트들
제목
.texteffect3 {
font-family: 'Cafe24Ssurround';
font-weight: bold;
text-shadow: 4px 4px 0px #BC2424;
}
text제목
.texteffect4 {
font-family: 'DOSMyungjo';
}
text제목
.texteffect5 {
font-family: 'dalmoori';
}
text제목
.texteffect6 {
font-family: 'LeeSeoyun';
text-shadow: 0 0 3px #EAEAEA;
}
text제목.texteffect7 {
font-family: 'InkLipquid';
}
Text제목 (영어전용으로 가져옴)
.texteffect8 {
font-family: 'yleeMortalHeartImmortalMemory';
font-style: italic;
}
Text제목
.texteffect9 {
font-family: 'MapoDacapo';
}
Text제목
.texteffect10 {
font-family: 'ghanachoco';
}
Text제목.texteffect11 {
font-family: 'KCC-eunyoung';
}
text텍스트
.txt13-1 {
font-family: 'HeirofLightRegular';
background: #000000;
background: -webkit-linear-gradient(bottom, #000000, #d0021b);
background: -moz-linear-gradient(top, #000000, #d0021b);
background: -o-linear-gradient(top, #000000, #d0021b);
background: linear-gradient(to top, #000000, #d0021b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
*텍스트 그림자효과 참조 : https://comizle.tistory.com/42
-
말풍선 (위아래 30px 여백, 가운데 정렬이 안돼서 스페이스바로 정렬시켜야함 ㅎ)
<div class="task-tooltip">할말</div> 로 HTML에서 수정하면 됨
.task-tooltip {
background-color: #191919;
border: #960707 solid 1px;
display: inline-block;
text-align: center;
border-radius: 5px;
color: #ffffff;
font-size: 12px;
font-weight: 500;
height: auto;
letter-spacing: -0.25px;
margin-top: 6.8px;
padding: 5px 11px;
position: absolute;
width: fit-content;
z-index: 100;
padding-top: 30px;
padding-bottom: 30px;
}
.task-tooltip::after {
border-color: #191919 transparent;
border-style: solid;
border-width: 12px 0 0 15px;
content: '';
display: block;
left: -12px;
position: absolute;
top: 11.4px;
width: 0;
z-index: 1;
}
.task-tooltip::before {
border-color: #960707 transparent;
border-style: solid;
border-width: 12px 0 0 15px;
content: '';
display: block;
left: -15px;
position: absolute;
top: 10px;
width: 0;
z-index: 0;
}
한마디용으로 만들었고 내가 쓰는 게시판에만 맞게 설정해놔서 다른 사이트에서 쓰면 모양이 이상할 수 있음
참고 : https://devbirdfeet.tistory.com/152 이분의 말풍선을 사용했고
http://happycgi.com/16725 이분의 3번째 말풍선 꼬리를 가져옴 (위치랑 크기를 조금씩 변경함)
+ https://www.ilikepixels.co.uk/bubbler/ 여기서 말풍선 css를 쉽게 받을 수 있다!
-
마우스를 올리면 색이 바뀐다
.bot {
font-family: 'DOSGothic';
font-weight: bold;
font-size: 10pt;
display:inline-block;
padding:2px 9px;
margin-bottom: 5px;
line-height:18px;
border-radius:7px;
background:#eeeeee;
color:#bc2424;
border: 1px solid #bc2424;
transition-duration: 0.3s;
box-shadow:1px 1px 1px #000000;
}
.bot:hover {
background:#bc2424;
color:#eeeeee;
border: 1px solid var #eeeeee;
box-shadow:1px 1px 0px transparent;
transform: translateX(1px)
translateY(1px);
}
https://kimmychuchu.tistory.com/78
여기에 있는 것들도 적용시키고 싶음
-
marquee 태그
<marquee bgcolor="black" (배경색)
width="30%" height="20" (크기/생략된 단위는 픽셀)
style="border-radius:8px; 테두리 둥글게
font-family:'PFStardust'; 폰트
border-style:solid; border-width:1px; border-color:white">외곽선
<font color="white">폰트색
어쩌구 저쩌구 적을말~ </font></marquee>
+ scrollamount=숫자를 적으면 속도 조절 가능 (1초에 몇픽셀씩 가게 할지)
marqee태그 예시들 참고 https://itfix.tistory.com/27
-
-
접기
-
✦ 제 홈에 맞게 수정한거라 다른 분들 홈엔 맞지 않을 수 있어요
✦ 원본 배포 링크 : https://terophy.postype.com/post/11144231
css 폴더 내의 _manager.css.php를 수정
.link_hash_tag {
font-family: 'Vitro_pride';
position: relative;
font-weight:bold;
margin-left: 7px;
padding: 0px 5px;
color: black;
background-color: white;
border-radius: 0px 3px 3px 0px;
filter:drop-shadow(0px 0px 1px rgba(0,0,0,0.3));
transition-duration: 0.2s;
background-color: #bc2424
}
.link_hash_tag:after {
content: "";
position: absolute;
left: -5px;
top: 0;
width: 0;
height: 3px;
border-right: 5px solid #bc2424;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
transition-duration: 0.2s;
}
.link_hash_tag:hover:after {
border-right-color: black;
}
.link_hash_tag:before {
content: "";
width: 4px;
position: absolute;
height: 4px;
left: -2px;
top: 5.5px;
background: black;
border-radius: 50%;
z-index: 2;
}
.link_hash_tag:hover {
color: white;
background-color: black;
} -
✦ 폰트 바꾸기 : font-family 부분 원하는 폰트로 변경
✦ 처음 적용했을 경우 기본 배경색이 하얀색인데 .link_hash_tag 안에 background-color: (원하는 색상코드) 추가
✦ .link_hash_tag:after 에 solid 뒤의 색상코드를 바꾸면 왼쪽 세모 모양의 색상이 바뀜
✦ .link_hash_tag:after 에서 height를 변경하면 왼쪽의 세모 꼭지 위치가 바뀜 저는 적당히 타협했네요... 2~3px이 제홈엔 맞았어요 완전히 뾰족하게 안되는건 좀 슬펐지만 + 근데 이거 다시 이상해져서 다른걸 건드려봤어요 같은 항목에 border-top과 border-bottom을 각각 8px로 수정했습니다
✦ .link_hash_tag:before 의 top을 건들면 왼쪽 검은 점의 위치가 바뀜
-
-
접기
-
✦ 링크 : https://codepen.io/alphardex/pen/dyPorwJ
✦ 도움 받은 곳 : http://mozirobi.com/home/bbs/board.php?bo_table=memo2
✦ 첫번째 링크에 들어가 HTML에 적힌걸 head.php의 <!-- 헤더 영역 --> 위에다 붙여줍니다
참고로 그냥 넣으면 적용이 안되니 복붙한거 위아래에 <div class="snow_board"> (복붙한거) </div> 이렇게 넣어줬어요
✦ 그 다음 CSS에 적힌거! 이건 그냥 CSS가 아니라 SCSS라서 CSS로 변환시켜줘야 한다네요
일단 이걸 복사한 뒤에 https://www.sassmeister.com/ 여기 들어가서 왼쪽에 붙여넣기 해줍니다
이때 맨 위에 있는 body 부분은 빼줍니다
body {
height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
이걸 빼고 복붙해주세요. 그럼 오른쪽에 CSS로 변환된게 뜹니다
✦ 변환된걸 복사해서 메모장이나... 노트패드나... 암튼 코드 수정하는 프로그램 열어서 붙여 넣어준 뒤에 맨 위에
.snow_board {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
filter: drop-shadow(0 0 10px white);
}
를 붙여넣고 아무 이름.css로 저장합니다. (안 붙여넣으면 스크롤이 긴 페이지에서 아래에는 눈이 안 내리고 끊겨 보입니다)
저장한걸 갠홈의 css 폴더에 넣어주세요. (저는 snow.css로 저장했음)
✦ head.sub.php를 열어서
<script src="<?php echo G5_JS_URL ?>/jquery.cookie.js"></script> 어쩌고~ 하는거 위에
<link rel="stylesheet" href="홈페이지 주소/css/아까 저장한 이름.css"> 를 붙여줍니다
예를 들어 제 홈에 적용시킨다 치면
<link rel="stylesheet" href="http://glitch.ivyro.net/css/snow.css"> 입니다. 참고로 /css/snow.css는 경로이므로 css파일을 다른 폴더에 저장했다면 그 경로로 수정해줘야 합니다.
끝~
html과 css는 같이 적용시키는 방법을 알겠는데 js는 여전히 어디다 붙여넣어야 할지를 모르겠습니다...
아는분은 제보해주세요...ㅠㅠ
-
-
접기
-
✦ 링크 : https://codepen.io/jh3y/pen/WyNdMG
✦ 위에 다른 메모인 눈오는 효과와 적용방법은 거의 같습니다~! 그래도 최대한 세세하게 적어봄!
✦ 우선 맨 왼쪽 pug 스크립트를 html로 변환시켜야 합니다.
변환 사이트 https://pughtml.com/ 에 들어가서 왼쪽에 pug를 입력하면 오른쪽에 html이 뜹니다 이걸 복붙!
엄청 길게 떠도 당황하지 않아도 됩니다 저게 맞아요.
✦ 복사한걸 head.php의 <!-- 헤더 영역 --> 윗부분에 붙여넣기 해줍니다
그리고 복붙한 거 맨 윗줄 첫부분에 있는 <div class="rain"> 의 rain을 rain_board로 바꿔줬습니다
css에 추가할게 있어서 바꿔줬는데 사실 안바꿔도 괜찮을 수 있음...
전 눈오는 효과의 스크립트에서 살짝만 수정하려 했던거기 때문에 바꿔준거예요. (눈오는 스크립트도 맨위에 snow_board가 있었음)
✦ 그다음 중간 칸에 있는 stylus도 css로 바꿔줘야 합니다.
https://codebeautify.org/stylus-to-css-converter 변환 사이트에 가셔서 왼쪽에 stylus를 붙여넣기!
주의할점 : body 항목을 빼야합니다... 그러니까
body
background-color #6c78a9
display flex
align-items center <- 이걸 빼고 변환시켜줍니다.
✦ 변환시킨걸 복사해서 새로운 css파일을 만들어 줍니다. (걍 평소 쓰는 문서편집기에 새파일 만들어서 붙여넣고 .css로 저장하면 됩니다)
그리고 .rain__drop 위에 엔터져서 칸을 만들어 준 뒤
.rain_board {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
를 붙여넣어 줍니다. (아까 html 붙여넣을때 맨 앞에 적었던 <div class="rain_board"> 의 "" 부분과 똑같이... 적어야 할걸요? 아마도)
이걸 안해주면 스크롤이 긴 페이지에서 비가 중간에 끊깁니다. 이제 이걸 css폴더에 저장!
이때 이 css파일의 제목을 꼭 기억해주세요. 저는 rain2.css로 저장했습니다 (전에 다른걸로 실험할때 rain.css를 이미 만들어서 뒤에 2를 붙여줬다는 TMI)
✦ head_sub.php를 열어서 쭉 내려가면 <script src="<?php echo G5_JS_URL ?> 어쩌고 하는게 4줄 있을겁니다.
그 위에다가 <link rel=" stylesheet"="" href="갠홈주소/css(css파일 저장한 위치)/(파일제목).css"> 를 붙여넣어 줍니다.
예시▶ <link rel="stylesheet" href="http://glitch.ivyro.net/css/rain2.css"> 저는 이렇게 저장했습니다.
✦ 그러면 끝~!
여전히 js를 어디에 붙여넣기 해야 하는지 제보 받습니다
html과 css는 적용방법을 알겠는데 js는 모르겠네요... -
✦ 빗줄기 수정은 복붙했던 css파일을 건드려주면 됩니다.
animation-duration: calc(var(--a) * 1s); <- 여기 1s를 건들면 비가 떨어지는 속도가 달라집니다.
숫자가 늘어날수록 느리게 떨어집니다. 저는 적당히 1.2s 정도로 했습니다. 너무 느리면 비가 짧게 보이더라구요.
height를 건들면 빗줄기의 굵기? 가 바뀝니다.
처음에 10px일텐데 사실 10px이 가장 보기 좋은거 같아요. 길이도 적당해 보이고...
10~20 사이가 제일 적당한듯? 저는 18px했습니다.
빗줄기를 세로로 길게 늘여보고 싶었는데 이건 어딜 건드려야 할지 모르겠어요...
그리고 위에 눈오는 효과 메모에서 썼던 filter: drop-shadow(0 0 10px white); 를 rain_board의 overflow: hidden; 밑에다 붙여넣으면 발광효과(?)가 더해집니다
전 별로라서 걍 안함...
-
-
접기
-
✦ SCSS > CSS https://www.sassmeister.com/
✦ HAML > HTML https://www.haml-converter.com/
✦ PUG > HTML https://pughtml.com/
-
-
접기
-
1. ♡♢♤✆✇✎✐✑✓✕✗✘✙✚✛✜✝✞✟✠✡✢✣✤✥✦✧✩✪✫✬✭✮✯✰✱✲✵✶✷✸✹✺✻✼✽✾✿❀❁❂❃❅❆❈❉❊❋❍❏❐➳➴➵➶➷➸➹➺➻
2. ⋆⁺₊⋆ ♡̷̷̷
3. ̵ ̀ ̗♡ ̖ ́ ̵
4. —̳͟͞͞♡
5. ̵ ̀ ̗♡̷̷̷ ̖ ́ ̵
6. ఇ ఇ
7. ♡̆̈
8. ʚ♡⃛ɞ
9. ♥ 。⋆ ゜♡
10. ･͛♡̷̷̷･͛
11. ❤︎
12. ◡̈⃝ ❤︎
13. \(◡̈)/♥
14. ʕ”̮ॽु ♡̷̷̷
15. ◞ ‸ ◟ ♡̵
16. .•♥ -
✦ 꾸밈줄 https://twitter.com/mayo_room/status/1281118903440044037 ✦
╰ 위 트윗에서 그대로 가져왔어요 폰트가 달라서 깨져보일 수 있음
✧･ﾟ: *✧･ﾟ:* *:･ﾟ✧*:･ﾟ✧
.・゜゜・ ・゜゜・．
*＊✿❀ ❀✿＊*
*:..｡o○ ○o｡..:*
ﾟ+*:;;:* *:;;:*+ﾟ
☆○o。 。o○☆
*+:｡.｡ ｡.｡:+*
☆.｡.:* .｡.:*☆
｡･:*:･ﾟ★,｡･:*:･ﾟ☆ ｡･:*:･ﾟ★,｡･:*:･ﾟ☆
.❀。• *₊°。 ❀°。
.•° ✿ °•.
°•. ✿ .•°
╭─────────╮
╰─────────╯
╔⊶⊶⊶⊶⊶✞⊷⊷⊷⊷⊷╗
╚⊶⊶⊶⊶⊶✞⊷⊷⊷⊷⊷╝
╔═════ °• ♔ •° ═════╗
╚═════ °• ♔ •° ═════╝
╭─✿✧───┈✦✦✦┈────╮
╰────┈✦✦✦┈───✧✿─╯
❉ ╤╤╤╤ ✿ ╤╤╤╤ ❉
❉ ╧╧╧╧ ✿ ╧╧╧╧ ❉
┏━━━✦❘༻༺❘✦━━━┓
┌┄◦◡◦┄◦◡◦┄┐
┖┄◦◠◦┄◦◠◦┄┚
╭╼|══════════|╾╮
╰╼|══════════|╾╯
╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
╳°»｡ ∾･⁙･ ღ ➵ ⁘ ➵ ღ ･⁙･∾ ｡«°╳
◦◦,`°.✽✦✽.◦.✽✦✽.°`,◦◦
➴➵➶➴➵➶➴➵➶➴➵➶➴➵➶
─── ･ ｡ﾟ☆: *.☽ .* :☆ﾟ. ───
- - ┈┈∘┈˃̶༒˂̶┈∘┈┈ - -
¸¸♬·¯·♩¸¸♪·¯·♫¸¸¸♬·¯·♩¸¸♪·¯·♫¸¸
˚˙༓࿇༓˙˚˙༓࿇༓˙˚˙༓࿇༓˙˚
⊶⊷⊶⊷⊶⊷⋆⊶⊷⊶⊷⊶
‧̍̊·̊‧̥°̩̥˚̩̩̥͙°̩̥‧̥·̊‧̍̊ ♡ °̩̥˚̩̩̥͙°̩̥ ·͙*̩̩͙˚̩̥̩̥*̩̩̥͙·̩̩̥͙*̩̩̥͙˚̩̥̩̥*̩̩͙‧͙ °̩̥˚̩̩̥͙°̩̥ ♡ ‧̍̊·̊‧̥°̩̥˚̩̩̥͙°̩̥‧̥·̊‧̍̊
₊̣̇.ෆ˟̑*̑˚̑*̑˟̑ෆ.₊̣̇.ෆ˟̑*̑˚̑*̑˟̑ෆ.₊̣̇.ෆ˟̑*̑˚̑*̑˟̑ෆ.₊̣̇.ෆ˟̑*̑˚̑*̑˟̑ෆ.₊̣̇.
❀⊱┄┄┄┄┄┄┄┄┄┄┄⊰❀
༛༛ ༛ ༛༺༻༛ ༛ ༛༛
•─────⋅☾ ☽⋅─────•
▐░░░░░░░░░░░░░░░░▌
࿇ ══━━━━✥◈✥━━━━══ ࿇
◢◤◢◤◢◤◢◤◢◤◢◤◢◤
◤◢◣◥◤◢◣◥◤◢◣◥◤◢◣◥
❛ ━━━━━━･❪ ❁ ❫ ･━━━━━━ ❜
∘◦ ✂ ————–✂ ◦∘
｡o♡o｡+｡o♡o｡+｡o♡o｡+｡o♡o｡+｡
❅*⋆⍋*⋆*❅*⋆*⍋⋆*❅
‿︵‿︵ʚ˚̣̣̣͙ɞ・❉・ ʚ˚̣̣̣͙ɞ‿︵‿︵
▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀
✦͙͙͙*͙*❥⃝∗⁎.ʚɞ.⁎∗❥⃝**͙✦͙͙͙
•͙✧⃝•͙┄✩ͯ•͙͙✧⃝•͙͙✩ͯ┄•͙✧⃝•͙
·´″`°³о☆♡☆о³°`″´·
┝≪♀♡♀≫┥
─‥♡‥─
━─⊆♡⊇─━
∞‥‥∞‥‥
┼━─*♥*─━┼
★∴∽♡∽∴☆
+─-::☆::-─+
┌─·…‥ㆍ‥…·─┐
└─·…‥ㆍ‥…·─┘
*…┼〃♥〃┼…*
〃…♥♥…〃
♡⑅*ॱ˖•. ·͙*̩̩͙˚̩̥̩̥*̩̩̥͙·̩̩̥͙*̩̩̥͙˚̩̥̩̥*̩̩͙‧͙ .•˖ॱ*⑅♡
샹들리에
*.:｡✿*ﾟ¨ﾟ✎･✿.｡.:*
꽃
༺ৡۣ͜͡ৡ༒ৡۣ͜͡ৡ༻
문양
*꧁༺༻꧂*
문양2
༄༅༄༅༄༅
바람
-
-
접기
-
✦ 도움 받은 곳 https://basilicom.postype.com/post/10758807
말풍선이 안뜨는 말 <span class="hint--bottom" aria-label="말풍선 안에 뜰 말">마우스 올리면 말풍선 뜨는 글</span>
요걸 html에 붙여넣기~
모든 속성(클래스)은 hint-- 로 시작하며, 적용시키고 싶어도 예시만으론 모르겠을 때에는 hint.css파일을 열어서 Ctrl+f로 Classes를 검색하시면 무슨 종류가 있는지 확인하실 수 있습니다.
예시 <span class="hint--bottom hint--warning hint--bounce hint--rounded"
순서대로 말풍선 위치 - 색상 - 애니메이션 - 둥글게
배너에 마우스오버 했을 때 지인 닉네임을 뜨게 하고 싶다면 앞으로는
<span class="속성(클래스명)" aria-label="트친 닉네임"><a href="트친 홈 주소" target="_blank"><img src="트친 배너 이미지 주소"></a></span>
로 태그를 작성하시면 되겠습니다. (target="_blank"는 새 창으로 열기)
-
-
접기
-
① css-style.css 에 아래 추가
/**************************************************************
기타 버튼 추가
***************************************************************/
.hylim-btn {
display: inline-block;
position: relative;
text-align: center;
/*order-width: 1px;
border-style: solid; 외곽선이에요 저는 그림자 넣어서 주석 처리했어요*/
vertical-align: middle;
height: 28px; /*둘이 크기*/
line-height : 28px; /*동일하게*/
padding: 0 25px;
box-sizing: border-box;
cursor: pointer;
background: rgb(255, 255, 255, 0.7);/*배경색 (RGB불투명도)*/
color: #FF5D87; /*글자색*/
border-color: #FF5D87; /*선 색(선 사용할 경우)*/
border-radius: 15px; /*테두리 둥글게*/
font-family: ' '; /*웹폰트!! 사용하실 거 넣어주세용*/
font-size: 14px; /*폰트사이즈*/
font-weight: bold; /*폰트효과(굵게)*/
box-shadow: 0 0 4px rgb(0, 0, 0, 0.3); /*그림자*/
}
② skin-board-넣을 게시판-list.skin.php
<?php echo $category_option ?>검색하신 다음에
<div class="hylim-btn"><?php echo $category_option ?></div>
일케 감싸주면 끝
-
-
접기
-
여기 들어가서 Install 밑에 download.zip 을 받기
② 갠홈 폴더중 js 폴더에 clipboard.min.js 를 넣기
③ head.php를 열어서
<script src="<?php echo G5_JS_URL ?>/clipboard.min.js"></script>
이코드를 <!-- 헤더 영역 --> 위에 넣기
④ 게시글 html 최하단에 아래를 붙여넣기
<script>
var clipboard = new ClipboardJS( '.btn' );
clipboard.on( 'success', function() {
alert( '복사 완료 메세지' );
} );
clipboard.on( 'error', function() {
alert( '복사 실패 메세지' );
} );
</script>
⑤ 원하는 이미지에
<p class="btn" data-clipboard-text="복사될 내용" style="text-align: center;"><원하는 이미지 주소></p>
이렇게 감싸기
참고로 style="text-align: center;"는 중앙정렬이라 빼도 됨
-
-
접기
-
✦ 참조 https://terophy.postype.com/post/12091912
매번 메뉴 추가할때마다 가서 봐야하는게 번거로워서...
● 메뉴 링크, 항목 추가
!! 업로드하고 난 후에 위 아이콘 두 개는 작동하지 않는 것이 정상입니다.
a href="" 안의 주소를 수정해주세요.
항목을 추가하고 싶은 경우에는
<a href="이동하고 싶은 페이지 주소"><li class="mini-item"><i class="material-icons mini-icon">구글 아이콘명</i><div class="menu-txt">메뉴 설명 텍스트</div></li></a>
▲위를 복사 후 수정하여 원하는만큼 등록해줍니다.
● 아이콘
https://fonts.google.com/icons
원하는 아이콘을 위 링크를 참조하여 가져와 넣습니다
ex) Home 아이콘:
<i class="material-icons">home</i>
↑이렇게 <i class="material-icons"> 와 </i> 사이에 아이콘 이름만 넣어주시면 OK
대문자는 소문자로, 띄어쓰기는 _로 대체해서 넣어주시면 잘 나와요
Help Outline→ help_outline 이렇게
● 메뉴 사이로 줄 넣기
원하는 위치에 <div class=menu-line></div>를 추가합니다.
● 메뉴 색상
menu.php에서 root를 검색한 뒤 변경해주세요. 혹은 root 아래의 요소들에서 var(~~)를 지운 뒤 원하는 색상을 직접 입력합니다.
-
코멘트
✦ 아보카도 에디션 퍼스널 설치 https://extrashot.tistory.com/25
✦ 갠홈 꾸미기 튜토리얼 https://nyasznya.postype.com/post/8446463
✦ 아보카도 퍼스널 설치부터 스킨 적용까지 https://rabbitorage.postype.com/post/12096420
✦ 노트 패드 https://extrashot.tistory.com/44?category=951314
코멘트
✦ 마우스 커서 https://www.cursors-4u.com/
✦ 커서 이펙트 & 홈페이지 배경 효과 http://www.mf2fm.com/rv/ ▶ 커서 이펙트와 배경 효과가 동시에 적용은 안되는것 같은데 혹시 둘 다 하는법 아시는 분?
✦ 저작권 프리 이미지 사이트 (약 인스타 풍) https://unsplash.com/
✦ 픽셀 이미지 사이트 https://itch.io/game-assets/free/tag-icon/tag-pixel-art
✦ 이미지 크기 안줄이고 용량 줄이는 사이트 https://tinypng.com/
✦ 웹 그라디언트 https://webgradients.com/
코멘트
✦ 구글 아이콘 https://fonts.google.com/icons
✦ 색상 코드 (네이버) https://url.kr/omtugj
✦ 폰트 https://noonnu.cc/ ▶ 제가 쓰고 있는 폰트는 비트로 프라이드체(Vitro_Pride) 예요
✦ 이미지 픽셀풍으로 바꾸기 https://app.monopro.org/pixel/
✦ 말풍선 툴팁 달기 https://basilicom.postype.com/post/10758807
✦ 스포일러 방지 기능(블러) 넣기 https://basilicom.postype.com/post/10754178
✦ 모서리 둥글게 하기 & 폰트 바꾸기 http://mihyni.kr/bbs/board.php?bo_table=board
✦ 최신 갱신글 불러오기 https://terophy.postype.com/post/12085492
✦ 해시태그 네임택 모양으로 바꾸기 https://terophy.postype.com/post/11144231
✦ 멤버 닉네임 앞에 아이콘 달기 https://basilicom.postype.com/post/10760381
✦ 기타 팁 (묘연님 블로그) https://sweet-myo.tistory.com/category/Tip/Web
코멘트
✦ 링크 게시판 (메인 페이지, 배너 달기) https://extrashot.tistory.com/59?category=787550
✦ 인스타형 로드비 게시판 https://terophy.postype.com/post/12091912
✦ 메모 게시판 (여기) https://extrashot.tistory.com/60?category=787550
✦ 미니멀 메뉴 (좌측 메뉴) https://terophy.postype.com/post/11257604
✦ 캐릭터 정리 게시판 https://extrashot.tistory.com/38?category=787550
✦ 카드형 로그 게시판 https://extrashot.tistory.com/61?category=787550
✦ 갤러리 게시판 https://extrashot.tistory.com/29?category=787550
✦ 우측 아래 미니 메뉴 달기 https://basilicom.postype.com/post/8809732
✦ 스탬프 (달성표) 스킨 https://fu-rai.postype.com/post/12409184
✦ 짧은 글용 스킨 https://fu-rai.postype.com/post/12318191
✦ BGM 플레이어 (우측) https://terophy.postype.com/post/12480136
✦ 메인 페이지 이미지에 마우스 올렸을때 글자 뜨게 하기 (참고한 곳) https://wsss.tistory.com/670