funfunweb

코틀린(영어: Kotlin, IPA: /ˈkɒtlɪn/)은 젯브레인즈사에서 개발하는 크로스 플랫폼 범용 프로그래밍 언어로, 자바와 완벽하게 호환되게 설계되었으며 일반적으로 JVM에서 사용되나 자바스크립트, LLVM 그리고 데이터 사이언스 영역에서도 사용 가능하다 대표적으로 카카오톡 채팅서비스가 코틀린으로 migration 하였다. *migration : 한 종류의 데이터베이스에서 다른 종류의 데이터베이스로 데이터를 옮기는 것을 의미 개발환경 1.JDK설치 코틀린 언어는 JVM에서 실행하기 때문에 자바 JDK를 설치해야 합니다. 그로인해 기존 자바와 상호작용할 수 있으며 자바에서 제공하는 라이브러리를 그대로 사용할 수 있습니다. JDK는 대표적으로 Oracle JDK와 OpenJDK가 있습니다. Oracl..

클래스 이름을 변수에 담아서 사용할 수 있다. #{이름} 이럴 경우 에러가 생길수 있는데 이 경우 이 경우 아래처럼 적으면 잘 작동하지만 width:$n10 + $n20 + px; width:#{$n10+$n20} + px; 아래처럼 적으면 숫자를 문자로 인식하여 작동하지 않는다. width:100200px 로 나옴. width:#{$n10} + #{$n20} + px;

1. vscode 확장프로그램에서 sass 검색하여 complier 설치하기 2. 문서 작성 css 파일의 확장자는 .scss 연결은 css 3. 컴파일 시키는 방법 ctrl + shift + p

scss를 사용해야 하는 이유 CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다. 예를들어 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 ..등 프로젝트가 커지면 코드 중복이 많아지고 복잡해지어 유지보수가 어려워지게 된다. 프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사 & 붙여넣기' 만 반복 해야한다. •선택자(Selector)을 만들때 매번 불필요한 부모 요소 선택자를 적어야 한다. •function 같은게 없으니, 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다. •결국 중복되는 코드가 많아 코드 줄 수가 길어져 유지보수에 마이너스적인 요소가 된다. scss 를 사..

head안에 script 를 넣으면 사용자가 html 다운받았을때 브라우저가 분석해서 css와 병합하여 dom 요소로 변환하는데 스크립트 태그가 보이면 html parsing 하는것을 멈추고 main.js 다운받아서 실행하고 다시 parsing한다. 단점은 js 사이즈가 크고 내용이 많으면 느리게 뜬다. (스크립트 다운받고 실행할때까지 스크립트 아래쪽 페이지를 볼수 없음) 스크립트에서는 스크립트 아래에 있는 dom요소에 접근할 수 없다. 스크립트를 head에 포함하는것은 좋지 않다. 그래서 많이 사용하는게 body 맨 끝에 넣는데 console 출력 html 모두 퍼싱후 모든 준비후 스크립트 다운 fetching하고 실행(executing) 단점 사용자가 기본적인 html 빨리 볼수있지만 javascri..

줄바꿈 관련 속성 flex-wrap flex-wrap:[nowrap],[wrap],[nowrap] flex-direction:row 일 경우 기본값 nowrap 줄바꿈하지 않음. 자식요소에 width 를 넣었지만 부모요소에 넓이가 500px 이라서 100px 적용 안되어 있는 상태이다. (shrink) 자식요소가 너무 많고 더이상 수축하지 못할 경우엔 부모요소 밖으로 나가게 된다. flex-wrap:wrap(줄바꿈) 부모컨테이너 크기 300px, 자식요소의 크기(height 100px) 자식요소가 많아서 부모 요소 밖으로 넘치게 됨 wrap-reverse(줄바꿈-거꾸로) flex-direction:column; 일 경우

flex된 요소들의 방향 설정- 부모요소(container )에 주는 속성 flex-direction:[row],[row-reverse],[column],[column-reverse] flex-direction은 자식요소는 그대로 있고 부모의 주축 방향이 바뀐다고 생각하면 된다(화살표- 주축) 부모요소인 div 에 display:flex 설정. 자식요소의 길이가 부모요소의 길이만큼 늘어난다.(stretch)

display:flex Flexible Box, Flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계됨. flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻 이전에는 레이아웃을 가로배치하기 위해 float, inline-block 을 사용하였는데 이들과 다른 점은 부모요소(container )에 주는 속성이라는 것이다. ex) float은 원래 이미지 옆쪽에 글자를 흐르게(?)하는 목적으로 생겼지만 layout을 만들기 위해서 사용해왔다. 하지만 flex 속성은 자식요소를 가로배치하기 위하여 부모요소에 설정한다. container{display:flex} flex 속성에는 displ..

1. 구글에 xeicon 검색 또는 xeicon XEIcon, 문자를 그리다 XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다. xpressengine.github.io 2. get started 클릭 3. 블록표시된 부분 드래그하여 copy 4. 문서에 붙여넣기 5. 필요한 아이콘 가져오기 - LIBRARY 에서 버전 선택 6. 필요한 아이콘 이름 복사하기(이름선택후 CTRL+C) 7. 문서로 돌아와서 태그 작성 후 CLASS 에 복사한 이름 붙여넣기(CTRL + V) 8. 완성화면

input 의 type 이 search 일 경우 x 모양 없애기 x모양 나오는게 싫다면? 1. input type 을 text 로 넣는다. 2. 꼭 search 로 하고 x 모양을 없애려면? 원래 나오는 x모양 대신 내가 디자인한 x모양을 넣고 싶다면? 버튼을 따로 만들고 이미지를 넣는다. 여기선 xeicon 활용함. xeicon 활용법 공부하러가기 input field 에 내용을 입력하면 x모양 나오게 하기