You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🧩 웹 개발에 도움되는 크롬 확장 프로그램 모음
웹 개발에 도움되는 크롬 확장 프로그램 웹 개발을 하는데 있어서, 쉽게 엘리먼트 정보를 취들할 수 있는 몇몇 크롬 확장 프로그램을 소개해 본다. 설치도 간단하고 사용도 간단하다. 이를 이용하면 개발자 도구를 들락날락 거릴 필요없이 고퀄리티의 다양한 정보들을 얻을 수 있을 것이다. ColorZila ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies chrome.google.com 확장프로그램에서 ColorZilla를 선택하고 Page Color Picker Active를 선택합니다. Page Color Picker Active 를 선택하면, 스포이드 모양이 나오고, 스포이드 모양을 추출하고자 ..
![[SCSS] 💎 조건문 / 반복문 (@if / @for / @each / @while)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdNcizH%2FbtrhdWoznEy%2Fg4PzaMpY0BKLK81eERsBO0%2Fimg.png)
[SCSS] 💎 조건문 / 반복문 (@if / @for / @each / @while)
SCSS 조건문 인라인 if Sass $width: 555px; div { width: if($width > 300px, $width, null); } CSS div { width: 555px; } @if Sass @function limitSize($size) { @if $size >= 0 and $size 0 { .item-#{$i} { width: 2px * $i; } $i: $i - 2; } CSS .item-6 { width: 12px; } .item-4 { width: 8px; } .item-2 { width: 4px; } Reference https://heropy.blog/2018/01/31/sass/
![[SCSS] 💎 내장함수 모음 (Built-in Functoins)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqCUqZ%2Fbtrher2Si9h%2FV3iTVqqH8how59BFoNV2G1%2Fimg.png)
[SCSS] 💎 내장함수 모음 (Built-in Functoins)
Built-in Functoins (내장함수) 색상(RGB / HSL / Opacity) 함수 mix($color1, $color2) : 두 개의 색을 섞습니다. lighten($color, $amount) : 더 밝은색을 만듭니다. darken($color, $amount) : 더 어두운색을 만듭니다. saturate($color, $amount) : 색상의 채도를 올립니다. desaturate($color, $amount) : 색상의 채도를 낮춥니다. grayscale($color) : 색상을 회색으로 변환합니다. invert($color) : 색상을 반전시킵니다. rgba($color, $alpha) : 색상의 투명도를 변경합니다. opacify($color, $amount) / fade-in($c..
![[SCSS] 💎 함수형 프로그래밍 (mixin / functions)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb6OMyx%2FbtrhdVXuYvL%2Fm3PdUmxkJtTOtGP9nH9fX0%2Fimg.png)
[SCSS] 💎 함수형 프로그래밍 (mixin / functions)
Mixin (믹스인) Sass Mixins는 스타일 시트 전체에서 재사용 할 css 선언 그룹 을 정의하는 아주 훌륭한 기능입니다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다. mixin 을 선언 할 떄는@mixin 를 사용하며, 이를 사용 할 때는 @include 를 사용합니다. Sass @mixin large-text { /* 선언 */ font: { size: 22px; weight: bold; family: sans-serif; } color: orange; &::after { content: "!!"; } span.icon { background: url("/images/icon.png"); } } h1 { @include large-text; /* 사용 */ } d..
![[SCSS] 💎 불러오기 (Import) 기능](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlUoxu%2FbtrheAyeAlv%2FnqMYdY0KM1wShj5GCMOZr1%2Fimg.png)
[SCSS] 💎 불러오기 (Import) 기능
Import (불러오기) import 기능은 스타일들을 여러 파일들로 나누고, 다른 파일에서 불러와서 사용하는 기능입니다. 다음과 같이 @import directive 를 사용하여 특정.scss 파일을 불러 올 수 있습니다: @import "layout.scss"; 참고로, 확장자를 붙이지 않아도 됩니다. @import "layout"; @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다. 또한, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다. Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있습니다. 파일 확장자가 .css일 때 파일 이름이 http:/..
![[SCSS] 💎 연산자 (Operations) 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7s160%2Fbtrhh73nC4E%2Fb3B9BDQaAHjJ7W9KiOq4V1%2Fimg.png)
[SCSS] 💎 연산자 (Operations) 정리
Operators (연산자) Sass 에서는 수학 연산자들을 사용 할 수 있습니다. 산술 연산자 + 더하기 - 빼기 * 곱하기 하나 이상의 값이 반드시 숫자(Number) / 나누기 오른쪽 값이 반드시 숫자(Number) % 나머지 비교 연산자 == 동등 != 부등 대소 / 보다 큰 = 대소 및 동등 / 보다 크거나 같은 논리(불린, Boolean) 연산자 and 그리고 or 또는 not 부정 숫자(Numbers) 상대적 단위 연산 일반적으론 절댓값을 나타내는 px 단위로 연산을 합니다만, 상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연산해야 합니다. width: 50% - 20px; /* 단위 모순 에러(Incompatible units error) */ width: ca..
![[SCSS] 💎 중첩 기능 (Nesting)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb6tJ71%2Fbtrhly0uDLf%2FUzfITQNGiVMlXK3tcfk2LK%2Fimg.png)
[SCSS] 💎 중첩 기능 (Nesting)
Nesting (중첩) Sass 의 매우 유용한 기능중 하나는 선언을 중첩시킬 수 있다는 것 입니다. 어떻게 작동하는지, 또 어떤점을 주의해야 할 지 알아봅시다. 일반 CSS 에선 특정 선택자 자식,자손의 선택자를 스타일링 하려면 이렇게 따로따로 하나하나씩 선언해서 해야 했습니다. .section { width: 100%; } .section .list { padding: 20px; } .section .list li { float: left; } 간단한 CSS 면, 큰 문제는 없지만, CSS 파일이 커지면 유지보수가 어려워지죠. Sass 에선, 이런식으로 중첩해서 작성하면 위와 같은 결과물을 얻을 수 있게 됩니다. .section { width: 100%; .list { padding: 20px..
![[SCSS] 💎 변수와 타입 (variable $)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdnvDQE%2Fbtrhgk2XGIA%2F2QKhD8hC7UvzwaXi7nEHf1%2Fimg.png)
[SCSS] 💎 변수와 타입 (variable $)
Comment (주석) Sass의 주석이 CSS 와 다른점은 한 줄 주석이 추가되었다는 점 입니다. Sass /* You can See me */ // You can't see me /* You Can See Mee */ Data Types (데이터 종류) Numbers 숫자 1, .82, 20px, 2em… Strings 문자 bold, relative "/images/a.png", "dotum" Colors 색상 표현 red, blue #FFFF00 rgba(255,0,0,.5) Booleans 논리 true, false Nulls 아무것도 없음. 컴파일 하지 않음. null Lists 공백이나 ,로 구분된 값의 목록 (apple, orange, banana) apple orange Maps List..
💎 SaSS & SCSS 소개 & 설치 세팅 💯 총정리
CSS 와 Sass(SCSS) Sass(SCSS)에 대해 얘기하기에 앞서, CSS에 대한 이야기를 짧게 해보자. 🤔 CSS의 단점 CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다. 예를들어 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 ..등 프로젝트가 커지면 코드 중복이 많아지고 복잡해지어 유지보수가 어려워지게 된다. 프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사 & 붙여넣기' 만 주구장창 해야한다. 이 밖의 CSS의 단점을 열거하면 다음과 같다. 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다. function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기..
📚 제이쿼리 AJAX 요청 문법 정리
제이쿼리 AJAX 요청 이번 포스팅에는 ajax의 기본개념 간단 정리와 제이쿼리 ajax 메소드를 살펴봅니다. AJAX 란? AJAX란 asynchronous Javascript and XML입니다. 요즘은 XML보다 HTML이나 JSON을 더 많이 쓰지만, 개발 당시 xml이 주류라서 이름이 그렇게 된 것입니다. 기존의 웹에서는 한 번 페이지를 로딩하면 다른 페이지를 로딩하기 위해서 링크를 타고 넘어가야 했습니다. 그렇게 되면 흔히 말하는 페이지 깜빡임이 발생합니다. 구글 검색을 해보면, 페이지를 전환하지 않고도 예상 검색어와 결과를 보여줍니다. Gmail도 마찬가지죠. 바로 AJAX 기술을 사용하였기 때문입니다. 이처럼 비동기적으로 서버에 요청을 하여 페이지 전환 없이도 새로운 데이터를 가져올 수 있..
📚 제이쿼리 이벤트 종류 & 설정 총정리
jQuery 이벤트 문법 웹 페이지는 사용자와 수많은 상호작용을 하게 된다. 사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다. 이러한 사용자의 동작들이 모두 이벤트(event)를 발생시키는 것이다. 정리하자면, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다. 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행하게 되는 원리이다. 제이쿼리는 자바스크립트의 이벤트 헨들러와 동일하게 ..
🐱 톰캣 서버를 윈도우 서비스로 등록 방법
톰캣 윈도우 데몬 서비스 등록 톰캣 서버를 실행하기 위해 매니저나 startup.bat 파일을 매번 실행하여야 했다. 만일 톰캣 서버를 컴퓨터를 재부팅할때마다 고정적으로 실행하게끔 하고 싶다면, 윈도우 서비스탭에서 데몬으로 등록을 할 수가 있다. 1. 톰캣 기본 포트 변경 톰캣을 윈도우 데몬 서비스로 등록하기 전, 기본 포트가 8080으로 되어있는데 추후의 포트 충돌을 위해 데몬 용 포트는 변경해주는 것이 좋다. 톰캣의 C:\Program Files\Apache Software Foundation\Tomcat 8.5\conf 폴더에 들어가서 server.xml 파일을 열어 아래와 같이 포트번호를 간단히 변경해준다. 2. service.bat 설치 그리고 CMD를 실행하고, C:\Program Files\..
