보안 전공생의 공부

[[앞 게시물 이어서 materialize의 기능들에 대해 설명하는 글 ! ]] ● Navbar 앞에서 navbar 컴포넌트(웹사이트 탐색에 이용) 보여준 기본 구조이다. "hide-on-med-and-down"이라는 클래스의 속성 -> 태블릿 이하의 화면 크기에서는 보이지 않도록 하라 스마트폰에서 navbar을 이용하려면 >> a 태그의 data-target 속성 이용해 id 속성값을 설정하고, class 속성에 "sidenav-trigger" 설정 [index.html] 수이니의 여행 menu {{link.text}} {{link.text}} 1) index.html파일 - head 태그 : Google Icon Font, materialize.css, fontawesome.com 링크 추가 2) i..

●Button 1) Raised Button - 기본 버튼 - 클릭했을 때 물결 효과 - 버튼색 -> waves-color 형태로 정의해서 사용 button 2) Floating Button - 원형 모양 버튼 add 3) Flat Button - card, modal 내에서 사용하는 버튼 button index.html wireless cloudcloud wifiwifi app.js new Vue({ el:'#app', methods:{ showMessage($event){ ($event.target.children.length == 2) ? alert($event.target.children[0].innerText) : alert($event.target.innerText); } } }) 조건부 3항..

스마트폰, 태블릿, PC 등 다양한 장치의 각각의 화면 크기에 맞춰 적절한 페이지를 보여주기 위해 반응형(responsive)을 구현해야 한다. Materialize는 CSS, 자바스크립트, HTML로 작성된 UI라이브러리다. 이를 이용하면 장치에 따라 특정 콘텐츠는 감추고, 다른 콘텐츠는 보이도록 할 수 있으며 짧은 시간 내 반응형 애플리케이션을 만들 수 있다. ▶Materialize 설치 materializecss.com/getting-started.html Getting Started - Materialize Materialize comes in two different forms. You can select which version you want depending on your preferenc..

페이지 소스코드를 확인해보았다 처음 문제화면에 주어져 있는 md5('value', true)가 눈에 띈다 ! value가 입력받는 변수 ps로 되어있다. md5 함수는 string md5 ( string $str , [bool $raw_output] ) 구조를 갖는다. 첫번째 인자는 문자열, 두번째 인자는 해싱 결과를 바이너리 형식의 문자열이다. 이 값이 true 일 경우 해시의 길이 16바이너리 형식으로 반환, 이값을 생략하면 기본값은 false 를 갖는다. 16진수 32글자로된 md5 해시값의 문자열을 반환한다.(출처: http://b.redinfo.co.kr/62 ) md5('admin') -> 21232f297a57a5a743894a0e4a801fc3 해쉬값 반환(32자리의 16진수 값 반환) m..

◆ 슬롯 : 부모 컴포넌트에서 자녀 컴포넌트에 나타나야 할 콘텐츠 제공 가능 부모 컴포넌트가 자녀 컴포넌트로부터 데이터 전달 받기 가능 (컴포넌트 재사용 ↑) 1) unnamed slot (default slot) - 가장 기본적인 슬롯 - 부모 컴포넌트의 일부 -> 자녀 컴포넌트 inject 가능 부모 컴포넌트의 DOM(Document Object Model) 엘리먼트들 ( e.g. p, div, img ) -> 자녀 컴포넌트에 정의된 태그 위치에 대체 가능함 태그 無 -> 부모 컴포넌트에서 html 엘리먼트를 전달해도 자녀 컴포넌트에 표시 X cmd 창에 vue create unnameslotwithcli --default 입력 -> 프로젝트 생성 해당 폴더 vscode로 실행 App.vue를 위처럼..

(출처 : wiki.plateer.com/pages/viewpage.action?pageId=8553499) 하위 컴포넌트 D에서 상위 컴포넌트 A로 통신을 위해 상위 컴포넌트 B -> 최상위 컴포넌트 -> 상위 컴포넌트 A>경로를 이용할 수 있지만, 이는 필요없는 상위 컴포넌트를 필요로 한다. 이러한 점을 보완하기 위한 방법으로 이벤트 버스를 이용한다. var eventBus = new Vue(); Vue 인스턴스를 생성하고, 이를 이용해 컴포넌트 간 통신 매개체로 쓴다. - 데이터를 전달하는 컴포넌트에서 eventBus.$emit 사용 method: { 메소드명: function(){ eventBus.$emit('이벤트명',데이터,...); } } - 데이터를 전달받는 컴포넌트에서 eventBus.$..

(참조 : allhpy35.tistory.com/34 m.blog.naver.com/seban21/70103183454 gmlwjd9405.github.io/2018/09/14/process-vs-thread.html ) □ 프로그램(program) : 어떤 작업을 위해 실행시키는 파일 ◆ 프로세스(process) : 프로그램을 실행하고 있는 상태 - 구성 : 프로그램 수행에 필요한 데이터, 메모리 등의 자원 + 스레드 - 프로세스는 각각 독립된 메모리 영역(code, data, stack, heap 구조)을 할당받음 - 자바의 runtime 환경과 밀접한 관계를 지님 ∵ 자바의 runtime 환경은 프로세스가 실행될 수 있는 기반 환경을 제공해 줌 - 다른 프로세스 생성 가능 -> 부모 프로세스 - 자..

문제에 들어가보니 NOTICE 게시판에 글을 쓰라구 한다. 소스코드를 확인해보았는데 정말 특별할 게 없어서 Main버튼으로 홈페이지의 메인으로 들어가 Notice 탭을 눌렀다. 그런데 글을 쓸 수 있는 버튼을 찾아볼 수 없었다. 아마 알아서 글을 쓰는 페이지로 들어가야 되는 것 같다. 다시 원래 메인으로 들어가서 여기저기 뒤적거리고, 위에 Notice 외의 다른 탭들도 뒤적거리다가 Free탭에 들어가게 되었다. 이 곳에는 누구나 자유롭게 글을 게시할 수 있고, 저 write버튼을 누르면 쓸 수 있는 듯 했다. 위의 주소를 보니 suninatas.com/board/free/write 이와 같았다. 저 가운데 free를 board로 바꾸면 board에서 글쓰기 페이지로 바뀔까 ?라는 생각이 들었다. 그러면 ..