본문 바로가기
728x90
반응형

생활코딩11

19.12.13 개발기록 -[Javascript] 반복문을 이용하여 버튼 3개에 각각의 id 부여, onclick 이벤트 발생 시 어떤 버튼을 클릭했는 지 구분 가능하게 하기. 오늘은 반복문을 이용하여 버튼 3개를 만들고, 각 버튼에 id를 부여하여 3개중 어느 하나를 클릭 했을 때 자신에게 맞는 이벤트가 발생하게 하는 프로그래밍을 해보자. 말로 설명하기 디게 어려우니, 사진으로 하나씩 차근차근 설명해보자. 위 사진에서, 아래의 사진과 같이 구현하고 싶다는 뜻이다. 1. 첫 번째 버튼을 클릭했을 때, 2. 두 번째 버튼 클릭 시, 3. 세 번째 버튼 클릭 시, 요렇게 말이다. 우선 첫 번째로 할 일은, 각 버튼을 for 반목문을 이용하여 만들면서, 각각에 id를 줄 수 있어야 한다. 나 같은 경우는, for 문을 돌면서 버튼을 생성하면서, 'btn' + i 라는 id를 부여했다. 1 2 3 4 5 6 7 8 9 for (var i in prediction) { var predi.. 2019. 12. 14.
19.12.12 개발기록 -[Javascript] 게시물 상황에 맞는 class 부여하기. 게시물이나 다른 업로드 된 컨텐츠 등이 D-Day가 정해져 있다던지, 내가 이미 확인한 게시물이라던지, 어떤 상황에 따라 색상을 바꾸어 주는 등의 변화를 줘야할 때가 있다. 그럴 때, 함수로 각 상황에 맞는 status를 지정하여 반환하여 주고, 게시물을 그려낼 때 switch 조건문을 이용하여 각 class를 부여하면 된다. 우선, 나 같은 경우 var status = active 로 기본 status를 선언해주고, 아래 사진과 같이 각 상황에 따라 status의 값을 변경해주었다. 그리고, return 값으로 status 값을 내보내주어, switch 문을 이용하여 각 status에 따라 class를 다르게 맥였다 !! 이렇게 코드를 구현하니 되게 코드가 깔끔하고 이쁘고, 사랑스럽고 막 그렇게 구현할.. 2019. 12. 13.
19.12.11 개발기록 -[Javascript] 화면 전환 버튼 구현하기 오늘은 저번에 포스팅했던 화면전환에서, 버튼을 클릭하면 다음페이지 및 이전 페이지로 넘어가도록 구현해보도록 하겠다. 전체 화면을 보면 디-게 간지지만, 혹여나 문제가 될까 버튼부분만 캡쳐하여 올리도록 한다. 위 사진 오른쪽 하단의 왼쪽, 오른쪽 버튼을 누르면 해당 페이지로 넘어가도록 구현해본다. 이렇게 말이다. 위와 같이 구현하기 위해서는 아주아주 간단한 알고리즘을 생각해내면 된다. 1. 각 페이지 마다 index를 부여한다. -> 첫 번째 페이지의 index = 0, 두 번째 페이지 index = 1, 세 번째 페이지는 index = 2, 이런식으로 말이다. 1 2 3 4 03/ 03 2. 그리고 우선 html 파일에 있는 각 오른쪽 왼쪽의 버튼 이미지에 onclick 이벤트를 부여한다. 저기 보이는 .. 2019. 12. 11.
19.12.09 개발기록 -[CSS] text가 width를 넘어가면 말 줄임표(...) 으로 표현되게 하기 오늘은 CSS를 이용하여 원하는 text가 할당된 div 나 span 태그의 width를 넘어서 길어지게 되면 말줄임표(...) 으로 표현되게 하는 CSS 문법을 포스팅하도록 한다. 두 번째 사진과 같은 경우에 자동으로 말 줄임표(...) 으로 표현되도록하는 CSS 문법을 소개한다. 바로, 1 2 3 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 요 삼형제이다. 1. overflow: hidden 에서 overflow는 요소의 박스에 내용이 더 길 때 어떻게 보이게 할 지 선택하는 속성이다. 여기서 사용한 hidden은 내용이 길면 자른다. 이 외에도, visible : 기본 값이며, 내용이 더 길어도 그대로 보이게 하는 속성, scro.. 2019. 12. 9.
19.12.08 개발기록 -[Javascript] class를 이용한 객체 만들기 오늘은 생활코딩의 egoing님께 배운 class에 대해 포스팅 해보려고 한다. 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 class Person2 { constructor(name, first, second, third) { this.name = name; this.first = first; this.second = second; this.third = third; } sum() { return 'classes : ' + (this.first + this.second + this.third); } } class Person2Plus extends Person2 { avg() { return 'average : ' + (th.. 2019. 12. 8.
728x90
반응형

티스토리툴바