자바스크립트에서는 데이터 값을 하나의 목록으로 만드는 배열이 존재합니다. 원래 변수안에 값을 할당할때 하나씩만 가능하잖아요. 근데 여러개의 값을 하나의 변수안에 넣고 싶은거죠.. 좋아하는 과일을 하나만 고를 수 없는 그런 마음? 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.woff2) format("woff2"); } @font-fa..
한글폰트를 지원 하는 폰트 중에 font-weight가 다양한 폰트 중 하나가 Pretendard글꼴인데, 디자이너 길형진 님이 inter와 noto를 결합해 서로의 단점을 보완해서 만든 폰트입니다 window, ios 둘 다 지원하고 한국어에 최적화된 기호까지 지원하는 장점이 있고 Pretendard를 사용하는 웹사이트들이 많더라구요! 전체적인 설명은 제작자의 티스토리에 자세히 적혀있어서 링크 걸어봅니다. https://cactus.tistory.com/306 Pretendard Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와..
스크롤의 위치에 따라 실행되는 애니메이션을 만들어볼건데요~ 스크롤 이벤트라고 하죠? 스크롤을 내릴 때마다 svg애니메이션이 돌아가게 하는 결과물이구요 svg애니메이션은 나중에 또 따로 포스팅을 하기로 해요 실은 순서대로 하는게 맞는데 그러다보니 자꾸 밀려서;;; 일단 html구조 자체를 한섹션씩 짜버리게 했습니다. 이미지 + 텍스트박스 + cass svg 를 한 박스로 묶어서 네개를 만들고 svg는 absolute처리를 했구요 // SVG HTML h a n m a c // SVG CSS /*svg*/ @keyframes stroke { 0% { stroke:#fff; stroke-width: 1px; stroke-dashoffset: 326px; } 70% { fill: transparent; } 98..
https://www.cjfreshway.com/ CJ프레시웨이 CJ프레시웨이는 좋은 식자재를 유통하며, 건강하고 맛있는 식문화를 창출하는 대한민국 최고의 글로벌 식자재 유통 및 푸드 서비스 전문 기업입니다. www.cjfreshway.com:443 CJ프레시웨이사이트를 클론 코딩하다가 CJ그룹에서 사용하는 전용서체 OnlyOne 서체를 만났다. 가독성이 떨어질 줄 알았는데 적당한 굴림서체가 오히려 제목요소와 탭메뉴같은 타이틀로 궁합이 좋았다. 상업적 용도로는 절대 사용을 못합니다 라이센스는 CJ그룹에 있는것 같아요 HTML 삽입 미리보기할 수 없는 소스 CJOnlyOne Woff 다운로드 CJOnlyOne TTF 다운로드 @charset utf-8; @font-face { font-family: "Cj..
Tenor Sans 구글 웹폰트 Tenor Sans - Google Fonts Tenor Sans is a humanist sans-serif typeface designed by Denis Masharov. Intended for the setting of body text, it can also be applied to headlines. Optimized f fonts.google.com 확실히 영문 폰트들이 이쁜 서체들이 많은 것 같다. 기본적으로 굵기를 하나만 제공해서 자주 사용하는 서체는 아니지만.. 지금 같은 느낌의 사이트에는 공유해서 사용하기 좋을 듯 하다. 삐침이 있는 서체들은 확실히 고딕체에 비해 고급스럽고 우아하고 부드럽다. 위아래 이미지를 비교해보면 한글폰트는 기본 Noto Sans..
- Total
- Today
- Yesterday
- boxmodel
- 자바스크립트숫자카운트
- Border
- uxdesign
- 코딩교육
- JavaScript
- slickAPI
- 웹표준
- css그리드
- margin
- 시멘틱마크업
- 스마트폰해상도
- 반응형웹
- CSS3
- padding
- 프로그래밍기초
- JavaScriptTips
- css
- 디자인팁
- 크로스브라우징
- Slick
- 포토샵합성
- 웹디자인
- 웹접근성
- uiux
- UI디자인
- 슬라이드플러그인
- 피그마플러그인
- uidesign
- css4
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |