'Front-End' 카테고리의 글 목록 (3 Page)

메뉴바에 Bootstrap 적용

Front-End/Bootstrap 2019. 10. 2. 15:44

메뉴바에 마우스를 올리면 해당 메뉴의 색깔이 변하면서 하위 메뉴를 출력하도록 설정함

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- views/include/menu.jsp -->
<%@ include file="header.jsp"%>
<head>

//디자인을 사용하기위해 bootstrap를 stylesheet로 링크를 건다
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js%22"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel = "stylesheet" href = "/css/bootstrap.css">
 
 
</head>
 
<style>
.menubar li ul {
background: rgb(109,109,109);
display:none;  /* 평상시에는 서브메뉴가 안보이게 하기 */
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
}
.dropbtn{
  background-color: black;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropbtn b{
  background-color: red;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content b {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 800px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
 
 
</style>
 
 
<center>
    <body>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Hs-Project</a>
                </div>
 
                <div>
                    <!-- 다른 기능들 링크가 걸려있는 메뉴 페이지 -->
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="${path}/home">Home</a></li>
                    
 
 
                <div class="dropdown">
                <button class="dropbtn">게시판</button>
                    <div class="dropdown-content">
                        <a href="${path}/board/list.do">회원 게시물</a>
                        <a href="${path}/board/best_list.do">베스트 게시물</a>
                    </div>
                </div>
    
                    <!-- 어떠한 아이디로든 로그인되지 않았을 경우에만 회원가입 링크를 출력시킨다. -->
                    <c:if
                        test="${sessionScope.user_id == null and sessionScope.navername == null and sessionScope.kakaonickname == null and sessionScope.facebookname == null and sessionScope.admin_id == null}">
                        <div class="dropdown">
                        <button class="dropbtn">회원</button>
                        <div class="dropdown-content">
                        <a href="${path}/member/email.do">회원가입</a>
                    </div>
                </div>
                    </c:if>
 
 
 
                    <!-- 관리자가 로그인 하지 않았을 경우에만 로그인 링크를 출력시킴 -->
                    <c:if
                        test="${sessionScope.user_id == null and sessionScope.navername == null and sessionScope.kakaonickname == null and sessionScope.facebookname == null and sessionScope.admin_id == null}">
                        
                        <div class="dropdown">
                        <button class="dropbtn">로그인</button>
                        <div class="dropdown-content">
                        <a href="${path}/admin/admin_login_view.do">관리자 로그인</a>
                        </div>
                        </div>
                    </c:if>
                    
                    
                        <div class="dropdown">
                        <button class="dropbtn">기타 기능</button>
                        <div class="dropdown-content">
                        <a href="${path}/member/smsform.do">문자 보내기</a>
                        <a href="${path}/member/e_mailform.do">이메일 보내기</a>
                        </div>
                        </div>
 
 
                        <div class="dropdown">
                        <button class="dropbtn">필독!!</button>
                        <div class="dropdown-content">
                    <a href="${path}/board/admin_board_list.do">회원 공지사항</a>
                        </div>
                        </div>
 
 
                    <c:if test="${sessionScope.admin_id != null}">
 
                        <div class="dropdown">
                        <button class="dropbtn">관리자 메뉴</button>
                            <div class="dropdown-content">
                                <a href="${path}/admin/admin_member_forced_eviction_view.do">회원강제 탈퇴</a>
                                <a href="${path}/admin/admin_member_info.do">회원 정보</a>
                        </div>
                    </div>
                    
                        
                    
                    
                        
                    
                    
                    </c:if>
                    
                    </ul>
                    
                    <div class="dropdown">
                        <button class="dropbtn b">만든이</button>
                            <div class="dropdown-content b">
                            <br><br>
                            <span style="color: green; font-weight: bold;">- 홈페이지 작성자 -</span>    <br><br>
                            이한섭 <br><br>
                            
                            <span style="color: green; font-weight: bold;">- 이메일 주소 -</span><br><br>
                            dlgkstjq623@naver.com <br><br>
                            
                            <span style="color: green; font-weight: bold;">- 휴대폰 번호 -</span><br><br>
                            010-7285-1455 <br><br>
                            
                        </div>
                    </div>
                    
                    
                </div>
            </div>
            
            
        </nav>
 
    </body>
    
</center>
 
</html>
Colored by Color Scripter
cs

저작자표시

'Front-End > Bootstrap' 카테고리의 다른 글

메인페이지 꾸며보기 (내 프로젝트에 적용) (0)	2019.10.04
전체적으로 bootstrap 적용 (일부) (0)	2019.10.02
로그인 폼에 bootstrap 적용 (0)	2019.10.02
Bootstrap 다운 및 스프링 프로젝트에 적용 (0)	2019.09.27
Bootstrap (부트스트랩) 이란?? (0)	2019.09.27

:

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right

Front-End/HTML 2019. 10. 1. 17:50

1. 영역 2개 만들기

[태그 모양]

[적용후 모습]

첫번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 여기에 그림이나 글자 또는 광고 등을 넣음

2. 두번째 영역을 첫번째 영역 옆에 올려 나란히 붙이기

위의 태그에 "float:left 또는 right;"를 추가한다.

[태그 모양]

<div style="width:200px; height:150px; border:1px solid red; float:left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float:left;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두 영역사이를 띄우려면, margin(바깥 여백)을 준다.
첫번째 영역의 오른쪽에 여백을 주어도 되고, 두번째 영역의 왼쪽에 여백을 주어도 된다. 여기서는 첫번째 영역의 오른쪽에 여백을 준다.

[태그 모양]

<div style="width:200px; height:150px; border:1px solid red; float:left; margin-right:10px;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
오른쪽에 바깥여백을 줌 => margin-right:10px;
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float:left;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 오른쪽에 바깥여백을 줌 => margin-right:10px; 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

3.두 영역을 나란히 놓되, 첫번째 영역은 왼쪽에 붙이고, 두번째 영역은 오른쪽으로 붙이기

[태그 모양]

<div style="width:200px; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:right 여기에 그림이나 글자 또는 광고 등을 넣음

※ 영역 아래의 글이 따라 올라가는 것 막기
위와 같이 영역을 설정하고 나면, 그 아래에 있는 글이나 그림이 영역 옆으로 딸려 올라가게 된다. 이것을 막는 방법은 몇 가지가 있는데, 그 가운데 가장 편한 방법은 두번째 영역을 지정한 </div>에 바로 붙여서 <div style="clear:both:"></div>를 추가하는 것이다.

[태그 모양]

<div style="width:200px; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width:200px; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div><div style="clear:both:"></div>

※ 너비주기
실제로는 영역의 높이(height) 그리고 테두리(border:~)를 설정할 필요가 없는 경우가 많다. 그림이나 글씨 등을 넣게 되면, 높이는 그에 따라 자동으로 맞추어 지기 때문이다.

너비(width)는 두개의 영역이 나란히 놓여야 하므로 지정을 해주어야 한다.
전체 너비는 100%이므로, 왼쪽 오른쪽의 너비를 알맞은 비율(%)로 주어도 되고
예) width: 30%

비율이 아닌 고정너비(px)단위로 지정을 해주어도 된다.
예) 250px

[태그 모양: 왼쪽 영역의 너비는 30%를 주고, 오른쪽 영역의 너비는 65%를 줌, 두 영역 사이는 자동으로 5%(=100% - 30% - 65%)가 됨 ]

<div style="width: 30%; height:150px; border:1px solid red; float: left;">
첫번째 영역:
왼쪽에 위치시킴 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>
<div style="width: 65%; height:150px; border:1px solid green; float: right;">
두번째 영역:
첫번째 영역 옆에 나란히 붙임 => float:left
여기에 그림이나 글자 또는 광고 등을 넣음
</div>

[적용후의 모습]

첫번째 영역: 왼쪽에 위치시킴 => float:left 여기에 그림이나 글자 또는 광고 등을 넣음

두번째 영역: 첫번째 영역 옆에 나란히 붙임 => float:right 여기에 그림이나 글자 또는 광고 등을 넣음

출처

https://ojji.wayful.com/2013/12/HTML-set-Two-Parallel-DIVs-columns.html

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > HTML' 카테고리의 다른 글

HTML5 버전 이상 가운데 정렬 사용하기 (0)	2019.04.29
HTML 문법정리 (0)	2019.04.28
HTML 테이블 짜보기 (0)	2019.04.22
HTML 실습 주소 (0)	2019.04.22

:

Bootstrap 다운 및 스프링 프로젝트에 적용

Front-End/Bootstrap 2019. 9. 27. 15:05

1. http://bootstrapk.com/getting-started/#download 에 접속후 사진과 같이 부트스트랩 다운로드

2. 압축을 풀고, 아래 사진과 같이 resources 폴더 하위에 css폴더와, fonts폴더, js폴더를 저장한다.

3. servlet-context.xml 중 일부, resourcess가 맵핑될 수 있도록 맵핑 코드 추가

1
2
3
4
<resources mapping="/css/**" location="/resources/css/" /> 
<resources mapping="/images/**" location="/resources/images/" /> 
<resources mapping="/js/**" location="/resources/js/" /> 
<resources mapping="/resources/**" location="/resources/" /> 
cs

4. 마지막으로 사용할 때는 jsp 파일에 css파일의 링크를 걸고 사용할 디자인들을 <style> 태그 안에 넣어서 사용하면 된다.

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
<link rel = "stylesheet" href = "/css/bootstrap.css">
 
  <style>
    #container {
      width: 70%;
      margin: 0 auto;     /* 가로로 중앙에 배치 */
      padding-top: 10%;   /* 테두리와 내용 사이의 패딩 여백 */
    }
     
    #list {
      text-align: center;
    }
   
    #write {
      text-align: right;
    }
     
    /* Bootstrap 수정 */
    .table > thead {
      background-color: #b3c6ff;
    }
    .table > thead > tr > th {
      text-align: center;
    }
    .table-hover > tbody > tr:hover {
      background-color: #e6ecff;
    }
    .table > tbody > tr > td {
      text-align: center;
    }
    .table > tbody > tr > #title {
      text-align: left;
    }
     
    div > #paging {
      text-align: center;
    }
     
    .hit {
      animation-name: blink;
      animation-duration: 1.5s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      /* 위 속성들을 한 줄로 표기하기 */
      /* -webkit-animation: blink 1.5s ease infinite; */
    }
     
    /* 애니메이션 지점 설정하기 */
    /* 익스플로러 10 이상, 최신 모던 브라우저에서 지원 */
    @keyframes blink {
      from {color: white;}
      30% {color: yellow;}
      to {color: red; font-weight: bold;}
      /* 0% {color:white;}
      30% {color: yellow;}
      100% {color:red; font-weight: bold;} */
    }
  </style>
Colored by Color Scripter
cs

저작자표시

'Front-End > Bootstrap' 카테고리의 다른 글

메인페이지 꾸며보기 (내 프로젝트에 적용) (0)	2019.10.04
전체적으로 bootstrap 적용 (일부) (0)	2019.10.02
로그인 폼에 bootstrap 적용 (0)	2019.10.02
메뉴바에 Bootstrap 적용 (0)	2019.10.02
Bootstrap (부트스트랩) 이란?? (0)	2019.09.27

:

Bootstrap (부트스트랩) 이란??

Front-End/Bootstrap 2019. 9. 27. 14:53

부트스트랩 (Bootstrap) 은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임 워크이다.

하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하고,

다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.

반응형 웹에서 많이 사용하고, Spring이 백엔드 프레임워크인것처럼 부트스트랩은 프론트엔드를 쉽게 사용하기 위한 프레임워크 이다.

출처

https://ko.wikipedia.org/wiki/부트스트랩_(프론트엔드_프레임워크)

저작자표시

'Front-End > Bootstrap' 카테고리의 다른 글

메인페이지 꾸며보기 (내 프로젝트에 적용) (0)	2019.10.04
전체적으로 bootstrap 적용 (일부) (0)	2019.10.02
로그인 폼에 bootstrap 적용 (0)	2019.10.02
메뉴바에 Bootstrap 적용 (0)	2019.10.02
Bootstrap 다운 및 스프링 프로젝트에 적용 (0)	2019.09.27

:

포토샵 강의

Front-End/포토샵 2019. 9. 5. 10:32

출처

https://www.youtube.com/watch?v=4z376h77cK4&list=PLSRqixdIPzHyLVoSqWbl7rfpvHxHiw3j8&index=27

저작자표시

:

HTML 문서에 CSS를 사용하는 방법들

Front-End/CSS 2019. 8. 26. 14:08

HTML문서에 CSS를 적용하는 3가지 방법

1. 외부 스타일 시트

2. 내부 스타일 시트

3. HTML 태그내에 스타일 지정

-외부 스타일 시트-

css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.

장점 : 홈페이지 전체의 스타일을 일관성있게 유지할 수 있고, 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.

단점 : 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다.

그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.

-내부 스타일 시트-

HTML 문서내에서 <head> 와 </head> 사이에 스타일을 정의하는 방법입니다.

HTML문서마다 스타일을 매번 지정해주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.

-HTML태그내에 스타일 지정-

위의 방법들에 비해서 적용범위가 더욱 좁하진 형태입니다.

스타일을 적용하고 싶은 HTML 태그안에서 정의하는 방법입니다.

<p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p>

직관적으로 사용이 가능하다는 장점이 있다.

출처

http://www.homejjang.com/07/how_to.php

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > CSS' 카테고리의 다른 글

CSS 기초 문법 (0)	2019.06.05

:

JSON 문법 정리

Front-End/json 2019. 6. 21. 19:44

[JSON]

JSON : JavaScript Object Notation의 약자이다.

JSON은 텍스트 정보를 저장하고 바꾸는데 사용되는 문법입니다.

XML과 매우 유사하죠.

JSON은 XML보다 작고, 더 빠르고 더 쉽게 파싱합니다.

[JSON의 예]

{

"employees" : [

{ "firstName" : "지은" , "lastName" : "이" },

{ "firstName" : "윤아" , "lastName" : "임" },

{ "firstName" : "수연" , "lastName" : "정" }

]

}

'employees' 오브젝트는 3명의 employee 레코드로 이루어진 배열입니다.

[JSON이란?]

- JSON은 JavaScript Object Notation의 약자입니다.

- JSON은 간단한 텍스트 데이터를 바꾸는 역할을 합니다.

- JSON은 다른 프로그래밍 언어에 독립적입니다.

JSON은 데이터 오브젝트를 기술하기 위해 Javascript 문법을 사용합니다.

하지만 JSON은 다른 언어나 플랫폼에 독립적입니다.

다양한 프로그래밍 언어를 위한 JSON 라이브러리가 존재합니다.

- JSON은 (XML처럼) 오브젝트 이름 등을 프로그래머가 마음대로 지어낼 수 있어서 이해하기 쉽습니다.

[JSON 문법의 규칙]

JSON 문법은 javascript 오브젝트 표기법의 부분집합입니다.

데이터는 name/value 쌍으로 되어 있습니다.

데이터는 ‘,’로 분리합니다.

중괄호로 오브젝트를 묶습니다.

대괄호로 배열을 묶습니다.

[JSON Name/Value Pairs]

JSON 데이터는 name/value 쌍으로 적습니다.

Name/Value 쌍은 필드명으로 이루어집니다.(큰따옴표 사용)

“firstName" : "태연"

이해하기 쉽게 javascript 문장으로 바꾸면 다음과 같습니다.

firstName = "김"

[JSON Values]

JSON 값은 다음이 될 수 있습니다.

숫자

문자열

Boolean

배열

오브젝트

null

[JSON Objects]

JSON 오브젝트는 중괄호로 둘러싸여집니다.

오브젝트는 여러 개의 name/value 쌍을 포함시킬 수 있습니다.

{ “firstName" : "태연" , "lastName" : "김" }

이해하기 쉽게 javascript 문장으로 바꾸면 다음과 같습니다.

firstName = "태연"

lastName = "김"

[JSON Arrays]

JSON 배열은 대괄호로 둘러싸여집니다.

배열은 다음의 예처럼 여러 개의 오브젝트를 포함할 수 있습니다.

{

“employees" : [

{ "firstName" : "지은" , "lastname" : "이" },

{ "firstName" : "윤아" , "lastname" : "임" },

{ "firstName" : "수연" , "lastname" : "정" }

]

}

위의 예처럼, 오브젝트 “employees"는 3개의 오브젝트를 포함하고 있는 배열입니다. 각 오브젝트는 성과 이름으로 이뤄진 사람의 기록입니다.

[JSON은 Javascript 문법을 사용합니다]

JSON은 Javascript 문법을 사용하기 때문에, JSON으로 작업할 때 별도의 소프트웨어가 필요없습니다.

Javascript를 사용해서 다음과 같이 오브젝트 배열을 생성하고 데이터를 할당할 수 있습니다.

var employees = [

{ "firstName" : "지은" , "lastName" : "이" },

{ "firstName" : "윤아" , "lastName" : "임" },

{ "firstName" : "수연" , "lastName" : "정" }

];

Javascript 오브젝트 배열에서 첫 번째 엔트리에 다음과 같이 접근할 수 있습니다.

employees[0].lastName;

반환된 내용은 다음과 같을 것입니다.

이

또한 데이터는 다음과 같이 수정할 수 있습니다.

employees[0].lastName = "수영";

[JSON Files]

JSON 파일의 형식는 “.json"입니다.

JSON 텍스트의 MIME 타입은 “application/json"입니다.

출처

http://blog.naver.com/PostView.nhn?blogId=topsaga&logNo=140161357115&parentCategoryNo=&categoryNo=19&viewDate=&isShowPopularPosts=true&from=search

저작자표시

:

javascript - 함수와 콜백

Front-End/javascript 2019. 6. 12. 22:34

javascript에서는 함수도 객체이다.

다시 말해서 일종의 값이고, javascript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

-예시-

var a = function( ){ } // a라는 변수안에 함수function( )을 넣을 수 있다.

또한 함수는 객체의 값으로 포함될 수 있다.

이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method) 라고 부른다.

-예시-

a = { // a라는 변수 안에 객체를 생성
b : function( ) { // 객체 안에 b라는 키(key)값에 function( ) 함수를 생성한다. 이러한 함수를 메소드라고 부른다.
}
};

참고 : key는 속성이나 property 라고 부르기도 한다.

함수는 값이기 때문에 다른 함수의 인자(매개값) 으로 전달 될수도 있다.

-예시-

1
2
3
4
5
6
7
8
9
10

function a (cal, num){
return cal(num) //a라는 함수는 cal과 num을 매개값으로 받고 cal이라는 함수에 num을 매개값으로 준 값을 리턴
}
 
function increase (num){
return num*2 //increase이라는 함수는 num을 매개값으로 받고 num*2를 리턴한다.
}
 
console.log(a(increase,5)); //함수 a의 매개값으로 increase함수와 5를 매개값으로 주고, increase함수가 실행되서 num*2의 값인 10이 리턴된다.
10

cs

변수, 매개변수, 리턴값과 같이 다양한 용도로 사용될 수 있는 데이터를 first-class citizen (object)라고 한다.

javascript에서 function(함수)는 first-class에 해당이 된다.

함수는 함수의 리턴 값으로도 사용할 수 있다.

-예제-

1
2
3
4
5
6
7
8
9

function cal (mode) {
    var funcs = {
        'plus' : function(left,right){return left + right},
        'minus' : function(left,right){return left - right}
    }
    return funcs[mode];    
}
alert(cal('plus')(2,1)); //cal함수에 'plus'값을 메소드로 주면 funcs의 객체중 'plus'와 맞는 키가 실행되고 그 안에 있는 함수가 실행되서 3이 리턴된다.
alert(cal('minus')(2,1)); //cal함수에 'minus'값을 메소드로 주면 funcs의 객체중 'minus'와 맞는 키가 실행되고 그 안에 있는 함수가 실행되서 1이 리턴된다.
Colored by Color Scripter

cs

또한 함수는 배열의 값으로도 사용할 수 있다.

-예제-

1
2
3
4
5
6
7
8
9
10
11
12

var process = [
    function(input) {return input + 10;} //input가 1이므로 11이 리턴
    function(input) {return input * input;}, //input가 11이므로 121이 리턴
    function(input) {return input / 2;} //input가 121이므로 60.5가 리턴
];
 
var input = 1;
for (var i = 0; i < process.length; i++){ 배열의 길이는 0~2까지 이므로 length=0,1,2까지
    input = process[i](input); //함수가 한번 호출될때마다 input값이 변화됨
}
 
alert(input);

cs

콜백

처리의 위임

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수를 전달할 수 있다.

값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다.

인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.

아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

저작자표시

'Front-End > javascript' 카테고리의 다른 글

null 체크 함수 (공통함수) (8)	2020.11.11
javascript - 유효범위 (전역변수, 지역변수) (0)	2019.06.11
javascript - 정규표현식 (0)	2019.06.11
javascript - UI와 API (0)	2019.06.10
javascript - 라이브러리 (jQuery) (0)	2019.06.09

:

초보 개발자의 프로그래밍 공부방

'Front-End'에 해당되는 글 53건

메뉴바에 Bootstrap 적용

'Front-End > Bootstrap' 카테고리의 다른 글

두개의 영역(그림, 글자, 광고 등)을 나란히 놓기 - float:left/right

'Front-End > HTML' 카테고리의 다른 글

Bootstrap 다운 및 스프링 프로젝트에 적용

'Front-End > Bootstrap' 카테고리의 다른 글

Bootstrap (부트스트랩) 이란??

'Front-End > Bootstrap' 카테고리의 다른 글

포토샵 강의

HTML 문서에 CSS를 사용하는 방법들

'Front-End > CSS' 카테고리의 다른 글

JSON 문법 정리

javascript - 함수와 콜백

'Front-End > javascript' 카테고리의 다른 글

티스토리툴바