- 탭 메뉴 스타일(jquery) #1-1 완성
lorem 더미 텍스트 사용
.btn li의 data-alt="tab1" (첫번째 버튼)을 클리기하면 .tabs #tab1이 나온다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<section>
<div class="heading">
<h1><span>코딩웍스</span>, 프론트엔드 강좌</h1>
<input type="text" placeholder="What are you looking for?">
</div>
<div class="tab-inner">
<ul class="btn">
<li data-alt="tab1" class="active">HTML5</li>
<li data-alt="tab2">CSS3</li>
<li data-alt="tab3">JQUERY</li>
<li data-alt="tab4">JAVASCRIPT</li>
<li data-alt="tab5">CSS FRAMEWORKS</li>
</ul>
<div class="tabs">
<div id="tab1" class="active">
<h2>HTML5</h2>
<img src="img/icon/platform-logo-01.png" alt="">
<p>lorem100</p>
</div>
<!-- tab1이랑 구조 똑같음 -->
<div id="tab2" class="active">tab2</div>
<div id="tab3" class="active">tab3</div>
<div id="tab4" class="active">tab4</div>
<div id="tab5" class="active">tab5</div>
</div>
</div>
</section>
|
cs |
/* notosans normal이 세미볼드여서 폰트웨이트300 주기
placeholder : input의 value가 입력되는 순간에 사라진다.
opacity:0 - 투명도 0, 사라지지않고 눈에만 안보이는 것
display:none - 존재자체가 사라지는것, 크기값도 없어짐
visibility:hidden - 요소는 사라지고 원래 가지고있던 크기값은 가진다. */
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
/* 구글폰트 */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;500&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap'); /* 폰트어썸 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {
margin: 0;
line-height: 1.5em;
background-color: #f4f4f4;
color: #222;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Noto Sans KR', 'sans-serif';
}
section {
width: 800px;
border: 1px solid #000;
}
/* heading */
.heading {}
.heading h1 {
font-size: 30px;
text-align: center;
}
.heading h1 span {
color: crimson;
}
.heading input[type=text] {
width: 100%;
padding: 10px;
padding-left: 35px;
box-sizing: border-box;
outline: none;
border: none;
border-bottom: 2px solid #ddd;
/* center left 수직 수평, 5px 왼쪽으로 떨어짐 */
background: #fff url(../img/icon/search-icon.png) no-repeat center left 5px;
background-size: 23px;
}
.heading input[type=text]::placeholder {
font-style: italic;
transition: 0.3s;
}
.heading input[type=text]:focus::placeholder {
/* focus(클릭 시) placeholder 변경하기 */
opacity: 0;
/*
placeholder는 display:none으로 없앨 수 없다.
opacity:0;(트랜지션도 가능) visibility: hidden; 가능
display: none x
*/
}
.tab-inner {
margin-top: 50px;
}
.btn {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
margin-left: 10px;
}
.btn li {
float: left;
width: 120px;
padding: 5px;
text-align: center;
cursor: pointer;
background-color: #eee;
/* hover시 li의 크기값이 달라져서 덜컹거림 */
border-top: 2px solid transparent;
border-right: 1px solid #ddd;
/* border: 1px solid #000; */
}
.btn li:last-child {
width: 170px;
border-right: none;
}
.btn li:hover,
.btn li.active {
background-color: #fff;
border-top: 2px solid crimson;
}
.tabs div {
padding: 20px;
box-sizing: border-box;
background-color: #fff;
display: none;
}
.tabs div.active {
display: block;
}
/* Tab content */
.tabs div h2 {
text-align: center;
}
.tabs div img {
/* 이미지를 기준으로 다음에 오는 text요소가 가로로 붙음 */
float: left;
margin-right: 10px;
}
.tabs div p {
/* 텍스트가 이미지 밑으로 넘치는것 방지 */
overflow: hidden;
}
|
cs |
|
1
2
3
4
5
6
7
8
|
ja$('.btn li').click(function() {
$(this).addClass('active');
$(this).siblings().removeClass('active');
var result = $(this).attr('data-alt');
$('.tabs div').removeClass('active');
$('#' + result).addClass('active');
});
|
cs |
'Web > Java Script' 카테고리의 다른 글
| jquery - 폰트어썸으로 찜(like button) 만들기 (0) | 2021.07.17 |
|---|---|
| jquery - 마우스 올릴 때 div의 배경 이미지 변경 (0) | 2021.07.15 |
| tab menu (with jquery) #1 프로토타입 (0) | 2021.07.15 |
| js 변수와 조건문 - 20세 체크, 별점 주기(with jquery) (0) | 2021.07.14 |
| 제이쿼리(jQuery) 시작하기 #4 addClass(), children() (0) | 2021.07.10 |