728x90 반응형 전체 글128 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. 19.12.07 개발기록 -[Javascript] Prototype를 이용한 객체 만들기 나같은 초보 개발자(개발자라고 하기에도 민망한..)에게 정말 신과 같은 존재인 무료 인터넷 강의 사이트가 있다. 바로 생활코딩이라는 사이트인데, 닉네임 egoing(이고잉)을 사용하시는 선생님께서 재능기부로 프로그래밍에 대한 기초적인 강의를 완전 무료로 접할 수 있는 곳이다. https://opentutorials.org/course/1 생활코딩 hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'.. 2019. 12. 7. 19.12.06 개발 기록 - [Javascript] 뉴스피드의 몇 년 전, 몇 개월, 몇 일 전, 전 몇 시간 전, 몇 분 전, 몇 초 전 만들기 오늘의 포스팅 내용은 페이스북 뉴스피드나 인스타그램 포스팅 등에서 볼 수 있는 ~~시간 전을 계산 하여 Javascript로 구현하는 Syntax이다. 뉴스피드 기능에 있어서 굉장히 중요하고 필요한 기능이라고 생각되어 완벽하게 구현하고자 하는 욕심이 있었다! 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 var crrtDay = new Date(); var crrtYear = crrtDay.getFullYear(), crrtMonth = crrtDay.getMonth(), crrtDate =.. 2019. 12. 7. 이전 1 ··· 18 19 20 21 22 다음 728x90 반응형
