썸머타임 + 드룹다운 버튼 B
A: 드롭다운 메뉴[ https://cafe.daum.net/fnpqzheldrhdqn/bS0p/2 ]
<!DOCTYPE html>
<html lang="KO_YOON">
<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>SummernoteTest</title>
</head>
<body>
<style>
body{
margin: 0;
padding: 0;
font-family:poppins;
background: url("https://i.postimg.cc/zfn5wLYT/2.jpg");
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
}
a{
font-size: 12px;
text-transform: uppercase;
}
.nav-area{
background: #262626;
}
.nav-area:after{
content: '';
clear: both;
display: block;
}
.nav-area ul{
list-style: none;
margin: 0;
}
.nav-area > ul > li{
float: left;
position: relative;
}
.nav-area ul li a{
text-decoration: none;
color: #fff;
padding: 15px 20px;
display: block;
}
.nav-area ul li:hover a{
background: #34495e;
}
.nav-area ul ul{
position: absolute;
padding: 0;
min-width: 160px;
display: none;
top: 100%;
left: 0;
}
.nav-area ul li:hover > ul{
display: block;
}
.nav-area ul ul li:hover a{
background: #262626;
}
.nav-area ul ul li{
position: relative;
}
.nav-area ul ul ul{
top: 0;
left: 100%;
}
.nav-area ul ul ul li:hover a{
background: #34495e;
}
</style>
</head>
<body>
<nav class="nav-area">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Email Marketing</a></li>
<li><a href="#">Graphics Design</a>
<ul>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Card Design</a></li>
<li><a href="#">Poster Design</a></li>
<li><a href="#">Template Design</a>
<ul>
<li><a href="#">Web Template</a></li>
<li><a href="#">Email Template</a></li>
<li><a href="#">News Template</a></li>
<li><a href="#">Bio Template</a></li>
<li><a href="#">Wedding Template</a></li>
</ul>
</li>
<li><a href="#">Brochure Design</a></li>
</ul>
</li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
https://www.pinterest.co.kr/pin/948852215218582937/
https://pin.it/4dLorAi
B: 써머타임 tag
<!DOCTYPE html>
<html lang="KO_YOON">
<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>SummernoteTest</title>
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-ko-KR.js"></script>
<style>
@font-face {
font-family: 'NotoSansKR';
src: url('font/NotoSansKR-Black.otf') format('opentype')
}
</style>
<script>
$(document).ready(function() {
var fontList = ['맑은 고딕','NotoSansKR'];
$('#summernote').summernote({
lang: 'ko-KR',
fontNames: fontList,
fontNamesIgnoreCheck: fontList,
});
});
</script>
<script>
$(document).ready(function() {
$('#summernote').summernote({
placeholder: '내용을 입력해주세요!',
tabsize: 2,
height: 500
});
});
</script>
</head>
<body>
<form method="post" action="editorproc.php">
<tabel border=1 width=100%>
<tr>
<td>summernote 웹사이트에 제목 및 글을 남겨주세요!</td>
<td><input type="text" name="subject" style="width:100%;"></td>
</tr>
<tr>
<td colspan="2">
<textarea id="summernote" name="memo"></textarea>
</td>
</td>
</table>
<input type="Submit" value="전송하기">
</form>
</body>
</html>
HTML
HTML