???
리캡챠 안뜹니다!!!
본블로그
korea012345
총기지식과 html웹코딩을 알려드립니다.
baekhokp.tistory.com
은 검색 통누락+리캡챠인증
나오는데
이 서브블은 저품질문제,리캡챠문제 없습니다.
분류 전체보기
- drmdl_ui: 100% css 간단한 ui 2023.04.16
- 이건 리캡챠 뜨나 봅시다 2023.01.21 2
- xwebml.html수정버전 1.5 2022.12.03
- bootstrap 비슷한,웹개발의 디자인을 편하게 해주는 css및js파일들[자작]xweb.html.css(오픈소스라이센스 없으나 쓸거면 허락 구하세요)버전1.0 2022.12.02
- 웹편집자를 위한 색상모음 2022.11.17
- 메뉴유형2 2022.09.22
- 메뉴유형1번-탭메뉴와클릭식드롭다운을 이용한 종합일반메뉴 2022.09.21
- 신식메뉴 2022.09.21
- 구식메뉴 2022.09.21
drmdl_ui: 100% css 간단한 ui
2023. 4. 16. 09:28
이건 리캡챠 뜨나 봅시다
2023. 1. 21. 12:07
xwebml.html수정버전 1.5
2022. 12. 3. 12:52
bootstrap 비슷한,웹개발의 디자인을 편하게 해주는 css및js파일들[자작]xweb.html.css(오픈소스라이센스 없으나 쓸거면 허락 구하세요)버전1.0
2022. 12. 2. 21:15
제가 만들어 xweb.html라고 이름붙인 웹개발용 도구입니다.
css에서 색깔 맞춤형과 js를 이용한 드롭다운메뉴 이 두가지에 특화되었습니다.
미리보기용으로 index.html파일이 있습니다.
색깔을 넣고싶다?하면 xweb.html.css파일에서 :root로 해서 맞춤형으로 된 지원되는 색상을 표에서 찾아보시고,
주홍색을 예로 들면 class="colourscarlett"
으로 쓰시면 됩니다. 유일하게 앞에 'colour'를 붙이지 않는 색상은 prussianblue인데요,남색은 영어명칭이 상당히 길어 헷갈릴까봐 이렇게 만들었습니다.
gold,silver의 메탈릭광택도 잘 표현되어있으니 잘 사용해주시기 바랍니다.
웹편집자를 위한 색상모음
2022. 11. 17. 09:33
colours
알아두세요:영향력있는 단체의 공식 색상별 헥스코드가 아닌,그저 제가 제 느끼는대로 만든 것일뿐입니다. 그러나,저는 할수있는 최대한 정확히 객관적으로 만들기 위해 노력했습니다.
red
orange
yellow
green
blue green
blue
purple
white
black
mint colour that glows in the dark
red buttn that triggers nuclear bomb
이상입니다
메뉴유형2
2022. 9. 22. 15:57
마우스오버(호버)식이 포함되어 있으므로 모바일환경에서는 작동이 안될수 있다는...!
'홈페이지만들기 > menu' 카테고리의 다른 글
| 메뉴유형1번-탭메뉴와클릭식드롭다운을 이용한 종합일반메뉴 (0) | 2022.09.21 |
|---|---|
| 신식메뉴 (0) | 2022.09.21 |
| 구식메뉴 (0) | 2022.09.21 |
메뉴유형1번-탭메뉴와클릭식드롭다운을 이용한 종합일반메뉴
2022. 9. 21. 19:29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mymenu67 {
display: none;
}
.menushow82 {
display: block;
}
.content__inner {
display: none;
}
#topnav li{
list-style-type: none;
float: left;
border:1px solid lightblue;
background: rgb(198, 255, 241);
}
@keyframes hoveranimation {
from{background-image:linear-gradient(red,orange,yellow,green,lightblue,blue,purple)}
to{background:#8c4ec9}
}
.tab {
position: relative;
margin-left: -5px;
margin-right: -5px;
display: inline-block;
border: 0.4px solid blue;
border-radius: 8px 8px 0 0;
z-index: 0;
background: rgb(198, 77, 220);
}
.tab:hover {
animation: hoveranimation 1s infinite;
}
.tab:focus {
outline: none;
z-index: 5;
}
.tab:focus ~ #tb1 {
z-index: 0;
}
#tb1:after {
z-index: 0;
}
#tb1 {
outline: none;
z-index: 10;
}
</style>
</head>
<body>
<div>
<div>
<div>
<ul class="topnav" id="topnav">
<li>
<div>
<button id="btn67" class="btn67" onclick="menu99()">menu</button>
<div id="mymenu67" class="mymenu67">
<p><a href="#">category</a></p>
<p><a href="#">link1</a></p>
<p><a href="#">link2</a></p>
<p><a href="#">link3</a></p>
<p><a href="#">...</a></p>
</div>
<script>
function menu99() {
document.getElementById("mymenu67").classList.toggle("menushow82");
}
window.onclick = function(event) {
if (!event.target.matches('.btn67')) {
var dropdowns = document.getElementsByClassName("mymenu67");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('menushow82')) {
openDropdown.classList.remove('menushow82');
}
}
}
}
</script>
</div>
</li>
<li>
<div>
<div>
<div class="tabs7">
<button class="tab" onclick="tabmenu9(event, 'tc1')" id="tb1">tab1</button>
<button class="tab" onclick="tabmenu9(event, 'tc2')">tab2</button>
<button class="tab" onclick="tabmenu9(event, 'tc3')">tab3</button>
</div>
<div>
<div class="content__inner" id="tc1"><h4>탭1</h4><iframe src="https://baekhokp.tistory.com/"></iframe></div>
<div class="content__inner" id="tc2"><h4>탭2</h4>만세!</div>
<div class="content__inner" id="tc3"><h4>탭3</h4>치킨</div>
</div>
</div>
</div>
<script>
document.getElementById("tc1").style.display = "block";
function tabmenu9(evt,tab) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("content__inner");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
원하신다면 btn67버튼에서 귀찮은 스크립트를 빼고 그냥 스타일 호버(:hover)로 하셔도 됩니다.
다만 마우스오버이므로,모바일환경에서의 접근성이 제한됩니다.
menu유형1.zip
0.00MB
예제완성파일이 있으니 참고하세요
신식메뉴
2022. 9. 21. 15:23
'홈페이지만들기 > menu' 카테고리의 다른 글
| 메뉴유형2 (0) | 2022.09.22 |
|---|---|
| 메뉴유형1번-탭메뉴와클릭식드롭다운을 이용한 종합일반메뉴 (0) | 2022.09.21 |
| 구식메뉴 (0) | 2022.09.21 |
구식메뉴
2022. 9. 21. 15:03
제가 옛날에 쓰던 메뉴입니다.
input:checkbox를 이용하고
style에서 :checked하고
그랬을경우 평소엔 display를 논으로 했다가 블록으로 해서 메뉴를 펼치는것입니다.
어떤분의 티스토리블에서 보고 지금까지 활용하는 방식입니다.
신식메뉴는 다음에 보겠습니다.
'홈페이지만들기 > menu' 카테고리의 다른 글
| 메뉴유형2 (0) | 2022.09.22 |
|---|---|
| 메뉴유형1번-탭메뉴와클릭식드롭다운을 이용한 종합일반메뉴 (0) | 2022.09.21 |
| 신식메뉴 (0) | 2022.09.21 |