[ markdown ] 마크다운 언어 사용 법

# Heading 1 ## ### #### .... ----------------------------------------------------------------- ___ >> 라인 추가(underline X 3) ----------------------------------------------------------------- this is **bold** text this is *italic* text ----------------------------------------------------------------- > programming is good ----------------------------------------------------------------- Fruits: *🍓 *🍑 Other fruits: -🍊 -🍒 ----------------------------------------------------------------- Numbers: 1. first 2. second 3. third ----------------------------------------------------------------- Click here (http:....) ----------------------------------------------------------------- ![image description] (image link) ----------------------------------------------------------------- |Header|Description| |--:|--:| >> 오른쪽 정렬 |:--:|:--:| >> 가운데 정렬 |Cell1|Cell2| |Cell1|Cell2| |Cell1|Cell2| |Cell1|Cell2| ----------------------------------------------------------------- To print message in the console, use 'console.log('your message')' and ... >> 백틱을 이용하면 인라인 형태로 코드 입력 가능 ```js console.log('your message') ```

[Vue] 트랜지션

Vuejs를 이용하여 프로젝트를 진행하다 페이지 전환효과를 구현하기 위해 Vue에서 제공하는 트랜지션을 공부하였다. 트랜지션 CSS클래스에는 v-enter : 요소가 나타나기 시작할 때 적용할 클래스 v-enter-active : 요소가 나타나는 트랜지션이 진행되는 동안 적용할 클래스 v-enter-to : 요소가 나타나는 트랜지션이 완료될 때 적용할 클래스 v-leave : 요소가 사라지기 시작할 때 적용할 클래스 v-leave-active : 요소가 사라지는 트랜지션이 진행되는 동안 적용할 클래스 v-leave-to : 요소가 사라지는 트랜지션이 완료될 때 적용할 클래스 @keyframes를 이용한 사용 사례 .elastic-enter-active { animation: elastic-in 0.5s; } .elastic-leave-active { animation: elastic-in 0.5s reverse; } @keyframes elastic-in{ 0%{transform : scale(0); opacity:0;} 100%{transform: scale(1); opacity:1;} } //App.vue ... // or watch:{ //router에 의해 페이지 변경되는 것을 관찰. $route(to, from) { this.transitionName = to.meta.page > from.meta.page ? 'next' : 'prev'; }, },

[JS] hoisting

호이스팅(hoisting)이란, 자바스크립트에서 변수의 선언, 함수의 선언 등을 코드의 맨 위로 올려주는 것이라고 간단하게 설명할 수 있다. 예시를 보면 console.log(temp); var temp = 3; >> 이 경우 console에는 undefined가 나타난다. 변수 선언 타입 중 var는 호이스팅이 적용되는 타입이며 아래와 같이 호이스팅이 되기 때문에 undefined가 출력이 된다. var temp; console.log(temp) temp = 3; 변수 선언 타입 중 let은 var과 다르게 호이스팅이 일어나지 않는데, console.log(temp); let temp = 3; >> 이 경우 console에는 에러가 출력된다. 함수에도 비슷한 사례가 있다. sum(1,2); function sum(a, b) { console.log(a+b) } 함수 sum()이 선언되기 이전에 사용했음에도 불구하고 잘 작동한다. 호이스팅이 일어났기 때문이다. 하지만 아래와 같은 상황에서는 호이스팅이 일어나지 않는다. sum(1,2); let sum = function(a, b) { console.log(a+b); } >> 에러 발생

[JS] 'use strict'

javascript file의 맨 위에 'use strict'를 쓰면 기존의 자바스크립트와는 달리 문법이 다소 엄격해지는데, 예를 들면.. // javascript a = 6 console.log(a); // no error //javascript 'use strict' a = 6 console.log(a); // error let b = 10; console.log(b) // 변수 선언 후 사용하면 no error 이렇게 사용하면 javascript엔진의 최적화 작업을 방해하는 문법, 실수들을 방지할 수 있어 자바스크립트의 실행 속도를 향상시킬 수 있다. 또한 기존에는 무시되던 에러들이 throwing될 수 있다.

[JS] export, exports, export default

// temp.js //하나하나 export하는 방식 export var count = 2; export var num = 100; // index.js import {count, num} from "./temp.js" count += 2 // console.log(count) >> 4 num +=2 // console.log(count) >> 102 //temp.js // exports는 객체의 프로퍼티 형식으로 export함 exports.count = 2; exports.num = 100; //index.js import temp from "./temp.js" console.log(temp) // {count : 3, num : 19} temp.count = 3; temp.num = 19; //temp.js // 딱 하나만 export 할 수 있으며, export default는 하나만 존재해야함. var name = "nggoong"; var num = 20; export default name;

[CSS] @keyframe, @media

/* 미디어 쿼리 사용 방법 */ /* 가로 폭이 최대 1000px, 즉 1000px 이하일 때 적용되는 코드 */ @media screen (max-width:1000px) { /* CSS 코드*/ } /* 가로 폭이 최대 1000px, 즉 1000px 이상일 때 적용되는 코드 */ @media screen (min-width:1000px) { /* CSS 코드*/ } 반응형 웹 디자인을 위해 필수적으로 쓰이는 CSS 미디어쿼리 사용법이다. 요즘 반응형 웹 디자인을 할 때, 작은 것에서부터 큰 것으로 즉, 모바일 크기에서 웹의 크기로 디자인 하는 mobile first design을 많이 사용한다는 얘길 들은 적이 있다. 코딩스타일과 상황에 따라 다르겠지만, 나는 mobile first design을 더 선호하기 때문에 min-width를 이용한 미디어 쿼리를 더 많이 사용할 것 같다. /* 키프레임 사용 방법 */ style> @keyframes apple { from { opacity: 0.2; } to { opacity: 1; } } .wrap { position: relative; display: flex; height:100%; width: 100%; justify-content: center; align-items: center; animation: apple 1s linear 0.3s infinite alternate; } style> body> div class = "wrap">i class="fab fa-apple">i>div> body>

[CSS] 변수 선언 및 사용법, calc()

/* 변수 선언법 */ :root {--white-color: #fff; --black-color:#140a00; --grey-dark-color:#909090; } /* 변수 사용법 */ h1 {color:var(--white-color); } h2 {color:var(--black-color); } /* calc() */ .temp { margin-bottom:calc( var(--padding) / 2 ) }

[CSS] 속성 값을 이용한 selector

a[href ="naver.com"] // naver.com이 들어가는 것 a[href ^= "naver"] // naver로 시작하는 것 a[href $= ".com"] // .com으로 끝나는 것

[CSS] flex 사용법

container { display : flex; // flex box로 만들기 flex-direction : row; // default flex-wrap : nowrap // default >> window크기 조절 시 자동 줄 바꿈 지원 justify-content : space-around; >> 일정 간격으로 item 자동 맞춤 justify-content : space-between; /* justify-content >> 중심 축에 대한 정렬 */ /* align-items >> 반대 축에 대한 정렬 */ } item {flex-grow : 0 //default >> window 크기 조절 시 item크기조절 일어나지 x /*1,2,3 등으로 조절되는 비율을 정할 수 있음.*/ flex-shrink : 0 //default >> grow와 유사 flex-basis : 10% >> container의 width값에 따라 크기를 조절함. align-self : center; // 하나만 center지정 }