Mong dev blog

개발 기술199

Traffic Light(신호등) 애니메이션을 만들자
1. 미리보기 border-radius, border-right 혹은 border-left를 이용해 신호등과 신호등에 비치는 불빛을 만들 수 있다! 한 번 만들어보자 See the Pen javascript_day9 by KumJungMin (@kumjungmin) on CodePen. 2. 코드 설명 1) html [1] 신호등 원들을 중앙배치하는 부모요소이다. [2] 각각 신호등 원(빨강, 노랑, 초록)에 대한 요소이다. 2) css [3] container 내부 요소들을, flex의 flex-direction를 사용해 세로 배치시킨다..container { /*[3]*/ width: 70px; height: 200px; border-radius: 50px; background-color: #2c3e..
2021. 9. 16.
커서 스타일 애니메이션을 만들어보자
1. 미리보기 특정 요소에 cursor가 hover됐을 때 cursor의 스타일을 변경하는 애니메이션을 만들어보자! 이 애니메이션을 만들기 위해서 mousemove, mix-blend-mode 등을 이용해야 한다. See the Pen cursor focus animation by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html html 구조는 그림과 같은데, 전체를 감싸는 menu-list 내부에 3개의 btn이 자식으로 있다. 코드로 나타내면 아래와 같다. 에는 각각 red, gray, skyblue클래스를 지정하여 각각 다른 스타일을 준다. cursor는 미리보기에서 보던 커서역할을 한다. RED GRAY BLUE 2) scss (1) 기본 스타일 지..
2021. 9. 16.
html로 이메일 연결하기
html로 이메일 연결하기 우리 컴퓨터는 각자 내장된 기본 메일앱이 있다. 그럼 이 메일앱을 html로 여는 방법은 없을까? 한 번 알아보자! 1. a태그의 href에 mailto를.. 우리는 a태그에 href에 mailto를 사용해 메일 기본 앱을 연결할 수 있다. 여기에 사용되는 속성은 아래와 같다. 속성 설명 mailto:이메일 수신자 메일을 기재 subject=메일제목 메일 제목을 작성 body=메일내용 메일 본문 내용을 작성 (%0D%0A을 사용해 줄바꿈 가능) cc=참조이메일 참조 이메일 기재 bcc=숨은참조이메일 숨은 참조 이메일 기재 ? 매개변수 간 구분으로 사용 2. 수신자와 제목 미리 기재하기 수신자는 mailto:수신자이메일 을, 제목은 subject=메일제목 형식으로 작성한다. 제목..
2021. 9. 12.
animation-direction 차이
1. 애니메이션 방향이 달라도 진행은 같게 (1). 애니메이션 방향이 다르면 결과가 다르다? keyframe을 이용해 좌 → 우로 이동하는 애니메이션을 만들었다. @keyframes slide { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(500px, 0, 0); } } 그리고, 첫번째 사각형에는 애니메이션 방향을 기본으로, 두 번째에는 reverse로 지정했다. 그렇다면, reverse를 한 사각형과 그렇지 않은 사각형의 애니메이션은 같을까? 답은 아니다! 아래 예시는 다른 방향을 적용한 모습이다. (*css-trick 예시*) 실행버튼을 클릭하면 애니메이션 방향만 다른데, 진행 흐름이 다른 걸 알 수 있다. See th..
2021. 9. 12.
border-radius 50% vs 100%
1. border-radius 50% vs 100% 우리는 border-radius: 50%를 지정하여 원을 만들 수 있다. 그런데 타인의 코드를 보면 50%, 100% 등 2가지를 다양하게 쓰고 있다. 그렇다면 border-radius: 50%, 100%의 차이는 무엇일까? (1). 원을 만들 때 차이 첫번째 div에는 border-radius: 50%, 두번째 div에는 100%를 지정해보았다. 아래 결과를 보면 알 수 있듯이 둘 다 원의 모습을 띤다. See the Pen border-radius difference by KumJungMin (@kumjungmin) on CodePen. (2). 모서리 별로 다르게 적용할 때 차이 한 모서리에만 border-radius를 줘서 부채꼴을 만들어보자. ..
2021. 9. 12.
객체 배열, autocomplete 미작동, 이벤트 제어, input 디자인 제거
이번 시간에는 css, js를 둘 다 소개하고자 한다! 1. 객체 배열에서 특정 조건에 해당하는 요소 얻기 2. autocomplete="off"가 안 먹힐 때 3. safari에서 기본 input 디자인 제거하기 4. css로 이벤트 제어하기 이 들에 대해 알아보자~ 1. 객체 배열에서 특정 정보 얻기 (1). 객체 배열이요? 객체 배열은 객체를 요소로 가지는 배열을 의미한다. ([{ }, { }, { }])const sample = [{id: 1, name: 'hello1'}, {id: 2, name: 'hello2'}]; 그런데 이 객체 배열에서 조건에 해당하는 객체 요소를 가져올 수는 없을까? 당연히 있닭!🐥 (2). 조건에 해당하는 요소는 어떻게 가져오나요? 만약, ..
2021. 9. 12.
js 코드를 더 짧게 써보자
이번시간에는 js 코드를 짧게 쓸 수 있는 방법을 알아보고자 한다! 순서는 아래와 같다 :) 1. 다중 OR 조건문을 짧게 2. 다중 AND 조건문을 짧게 3. null, undefined, '' 체크를 짧게 4. 조건별 함수 호출도 짧게 5. 숫자 형변환을 짧게 6. 반복문을 짧게 1. 다중 OR 조건문을 짧게 써보자 만약 name이 juna, herry, sona 중 하나인지 알아보려고 한다. 하나의 방법으로 아래처럼 다중 or(||) 조건문을 사용할 수 있을 것이다. if (name === 'juna' || name === 'herry' || name === 'sona') { // code } 하지만 이 다중 or 조건문! 이쁘지도 않은데 한..
2021. 9. 12.
캔버스로 둥근 모서리 만들기
canvas태그를 사용하면 선, 면, 원 등 여러가지를 만들 수 있다. 그렇다면 모서리가 둥근 사각형은 어떻게 만들 수 있을까? 이번 시간에는 quadraticCurveTo를 사용하여 둥근 모서리를 만들어보자! 1. quadraticCurveTo? 둥근모서리 사각형을 만들기에 앞서, quadraticCurveTo에 대해 간단히 알아보자. quadraticCurveTo는 2차 곡선을 만들 때 사용하는 함수이다. 조절점을 기준으로 끝점이 (x,y)인 베지어 곡선을 그린다. quadraticCurveTo을 사용하면 둥근 사각형을 만들 수 있다. 2. 둥근 모서리를 위한 규칙 width(너비), height(높이), radius(둥근모서리), x&y(시작점) 변수가 있다. 이 변수를 사용하여 오른쪽 둥근 모서리..
2021. 9. 12.
input에 입력된 숫자에 콤마 찍기
1. 숫자에 콤마를 넣고 싶어! input창에 숫자를 입력하면 콤마 없이 나타난다. 하지만 숫자를 입력했을 때 셋째 자리마다 콤마를 찍고 싶을 때가 있다.1234567890 //일반 1,234,567,890 //콤마 추가 어떻게 하면 숫자에 콤마를 추가할 수 있을까? 대부분 알려진 방법은 정규식으로 콤마를 추가하는 방법이다! 하지만 오늘은 toLocaleString를 사용해보자~ 2. toLocaleString는 무엇인가요? toLocaleString는 숫자를 지역별 포맷으로 반환한다.(문자열로 반환) 또한, 원본을 변경하지 않는다. 이 속성에는 여러 인자가 있는데, 아래 표를 살펴보자! 인자 설명 예시 ko-KR 셋째자리에 콤마 추가 "3,540,000" cs-CZ 셋째자리에 띄어쓰기 추가 "3 540..
2021. 9. 12.

티스토리툴바