728x90 반응형 비개발자, CPO가 되기까지26 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. 19.12.05 개발 기록 - CSS transition 어제 얘기했던 CSS의 transition에 대해서 포스팅한다. transition을 사용해본 결과, 개인적으로 transition은 화면의 전환이나, 어떤 div등이 움직이거나 변형이 일어날 때 부드러운 효과를 주기 위한 것으로 이해가 되었다 ! 1 2 3 4 5 6 7 $("#one").css({ "-moz-transition": "all 0.75s ease-in-out", "-o-transition": "all 0.75s ease-in-out", "-webkit-transition": "all 0.75s ease-in-out", "-ms-transition": "all 0.75s ease-in-out", "transition": "all 0.75s ease-in-out", }); 위 코드를 보면, .. 2019. 12. 5. 이전 1 2 3 4 5 6 다음 728x90 반응형
