찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 참고하시고~~ 2023.06.07 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout() JS) 숫자 카운트 setInterval(), setTimeout() 웹페이지 접속 할 때 숫자 카운팅 되면서 움직이는.. 그런것들을 만들고 싶었다면? // HTML 0 // JS // 숫자 카운트 const counter = ($counter, max) => { let now = max; const handle = setInterval(() => { $counter.innerHTML = Ma ..

원래 레이아웃의 시작은 Float이긴 했는데 ie작별인사하시고 굳이 써야되는 상황이 적은 것 같아 레이아웃의 끝판왕(이라고 생각했는데 그리드 레이아웃과 섞어쓰는것이..) flex에 대해서 포스팅 해보려 합니다. 워낙 자세하게 나온 포스팅들이 많지만 시작해보겠어요 예전 학생과의 카톡..내용 float를 배우고 flex를 하고 나면 생각보다 너무 편리해서 학생들이 좋아하고 잘 사용하긴 했는데 중요한건 제대로 알고 써야 하니까~ flex는 display 속성 중 하나이고 flex와 inline-flex가 있어요 block과 inline-block개념이라 생각하시면 되고 잘 모르겠으면 일단 보고오... 2021.12.12 - [WEB/HTML] - inline요소와 block요소 inline요소와 block요소..

안녕하세요 찐망고 입니다. 오늘은 자바스크립트 함수에 대해서 가볍게 포스팅해볼게요 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. 코드를 재사용하고 구조화하여 프로그램을 개발하는데 도움을 주는 사용자정의함수와자바스크립트에서 내부적으로 제공하는 내장함수가 있어요function funcName(parameter1, parameter2) { // 함수실행코드 // 결과반환(선택가능)}function addNumbers(a, b) { return a + b;}let result = addNumbers(3, 5);console.log(result); // 8 함수는 함수 선언식과, 함수 표현식이 존재하는데 함수를 선언하고 사용자가 직접 실행할 함수의 이름을 짓거나 ..

자바스크립트에서는 데이터 값을 하나의 목록으로 만드는 배열이 존재합니다. 원래 변수안에 값을 할당할때 하나씩만 가능하잖아요. 근데 여러개의 값을 하나의 변수안에 넣고 싶은거죠.. 좋아하는 과일을 하나만 고를 수 없는 그런 마음? const fruits = ["체리", "망고", "블루베리", "수박"]; 좋아하는 과일의 종류가 많으면 배열을 쓸수록 더 합리적이겠죠? 좋아하는 과일이 10개가 넘는데 변수를 10개를 굳이 만들 필요가 없으니까요 배열을 만들 때는 각괄호 []를 사용합니다. 배열안에 값을 넣으려면 각괄호 안에 값을 입력하고 쉼표로 나눠주면 됩니다. 배열에 들어간 개별 값을 원소(element)라고 불러요 // 배열 표기 const fruits = [ "cherry", "mango", "blue..

안녕하세요 찐망고입니다. 자바스크립트에서 가장 중요한 두가지는 조건문과 반복문이라고 생각하는데요 반복문(loop)은 "어떤 내용이 true인 동안은 계속 이걸 실행해" 라고 말하는 겁니다. while반복문 가장 간단한 반복문은 while반복문인데요. while반복문은 주어진 조건이 true로 있는 동안은 실행 코드를 반복해서 실행합니다. 그 조건이 false가 되면 하던 일을 중단해가 포함되고 있죠 while(조건식) { console.log("코드실행") // 실행문 i++; // 증가감식 } for문 for반복문을 사용하면 반복문에 사용할 변수를 만들고 조건이 false가 될 때까지 계속 반복합니다. for(초기값; 조건식; 증가감식;) { 실행문; } 반복문은 초기 값을 기준으로 조건식을 실행합니다..

안녕하세요 찐망고입니다. 자바스크립트에서 가장 중요한 두가지는 조건문과 반복문이라고 생각하는데요 if문 조건문은 "만약 어떤 내용이 참(true)이라면 이걸실행해주고, 참이 아니라면 저걸 실행해 혹은 실행하지마" 라고 말하는 것과 같습니다. 이것을 if문과 if...else문이라고 하는데요 if문은 어떤 내용이 true일 때 특정 코드를 실행할 때 사용하고, if...else문은 어떤 내용이 true일 때 특정 코드를 실행하고, 만약 false라면 다른 코드를 실행할 때 사용합니다. // if문 예시 const name = "제니퍼 애니스톤"; console.log(name.length) if(name.length > 5) { console.log("제니퍼 애니스톤입니다.") } 제니퍼 애니스톤은 공백을..

안녕하세요 찐망고입니다. 오늘은 스코프와 호이스팅에 대해서 포스팅 해보도록 할게요. 자바스크립트에서 스코프는 변수의 유효 범위를 말합니다. 즉, 변수가 어디에서 사용될 수 있는지를 결정하고, 변수가 선언된 위치와 관련이 있어요. 1. 전역 스코프(Global Scope): 전역스코프는 코드의 어디에서든 접근할 수 있는 가장 바깥쪽 스코프인데요 전역 스코프에서 선언된 변수는 어디에서든 참조할 수 있습니다. 2. 함수 스코프(Function Scope): 함수 스코프는 함수 내에서 선언된 변수의 유효 범위를 나타내는데, 함수 스코프에 선언된 변수는 함수 내부에서만 접근 할 수 있으며, 함수 외부에선 접근 할 수 없습니다. 3. 블록 스코프(Block Scope): 블록 스코프는 중괄호({})로 둘러싸인 블록..

스포카 폰트도 웹상에서 자주 보는 서체 중 하나인데 아무래도 폰트를 만들어서 배포하고 있는 스포카가 직접 실무에서 활용하기 위해 만들었기 때문에 지속적으로 유지보수가 된다는 점과 한글에 최적화되어 있다는 점이 큰 장점입니다. https://spoqa.github.io/spoqa-han-sans/ Spoqa Han Sans Neo Spoqa unveil the new Spoqa Han Sans Neo, which has evolved in many ways. | 여러모로 개선을 거쳐 진화한 스포카 한 산스 네오를 공개합니다. | これまでいろいろ改善して進化した新しいスポカーハンサンスネオ spoqa.github.io Spoqa Han Sans Neo 폰트를 사용하는 웹사이트 @font-face { font-fa..

안녕하세요 찐망고입니다. 애플 산돌고딕 NEO 폰트는 애플 기본 폰트 입니다.라이선스는 모두 애플이 가지고 있고, 애플 제품 사용자는 비상업, 상업용도 모두 사용 가능 합니다. 참고로 산돌고딕에서 제작한 산돌네오고딕NEO시리즈와는 다른 폰트입니다.  ttf 파일 다운로드 woff2 파일 다운로드     // CSS@font-face { font-family: AppleSDGothicNeo; font-weight: 100; src: url(AppleSDGothicNeoT.woff2) format("woff2");}@font-face { font-family: AppleSDGothicNeo; font-weight: 200; src: url(AppleSDGothicNeoUL.w..

안녕하세요 찐망고입니다 한글폰트를 지원 하는 폰트 중에 font-weight가 다양한 폰트 중 하나가 Pretendard글꼴인데,디자이너 길형진님이 inter와 noto를 결합해 서로의 단점을 보완해서 만든 폰트입니다window, ios 둘 다 지원하고 한국어에 최적화된 기호까지 지원하는 장점이 있고font-weight를 모두 지원해서 좋아요.Pretendard를 사용하는 웹사이트들도 늘어가는 추세입니다.  전체적인 설명은 제작자의 티스토리에 자세히 적혀있어서 링크 걸어봅니다.https://cactus.tistory.com/306 PretendardPretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 App..