madogawa

#조건문 Switch switch (a) { case 0: console.log('a is 0') break case 2: console.log('a is 2') break case 4: console.log('a is 4') break default: console.log('rest...') } switch문에는 a라는 변수만 집어 넣어줍니다. 그 a라는 변수가 상황에 따라서 어떠한 값인지를 우리는 case라는 키워드를 통해서 명시 할 수 있어요, case 0: (a라는 조건이 숫자데이터 0인 경우에 해당하는 내용을 작성할 수 있고요.) console.log('a is 0') (a가 0인 경우에 'a is 0'를 출력하고요.) 그리고 하나의 케이스의 내용이 끝나면 그것이 끝났다는 표시로 break 키워..

#실습준비 *getRandom.js 파일을 새로 만듭니다. 코딩을 합니다. export default function random() { return }; #Math.floor(Math.random() * 10) ( return할 값은 개발자도구의 콘솔창에서 직접적으로 코딩을 해 볼게요. ) #Math.random() 대문자로 시작하는Math라는 수학객체가 하나 있습니다. 메소드로 random()을 실행해줄 수 있습니다. 여기다가 곱하기 10을 하면 Math.random() * 10 정수부분에도 숫자가 잘 나오게 되는데요. #소수점 부분 숫자는 버려주는 Math.floor(Math.random() * 10) Math 객체의 내림처리를 해주는 메소드 floor 를 사용합니다. #.getRandom.js파일..

#삼항연산자(ternary operator) if의 첫번째 블럭이 실행되어서 true가 나왔습니다. 우리는 어떤 특정한 조건이 참인지 거짓인지 확인을 해서 그것을 조건을 가지고서 어떤 코드를 실행 할 수 있는데요, 그것을 조건을 가지고서 어떤 코드내용을 실행하면 5줄정도 사용하죠. 위 조건문의 코드를 삼항 연산자로 더 간단하게 만들 수 있습니다. console.log(a ? '참' : '거짓'); a ? '참' : '거짓' 말 그대로 3개의 항이 있는 거고요. if else 조건문이 훨씬 더 직관적으로 보일 수도 있겠지만, 비교적 단순한 조건 같은 경우에는 이렇게 3항의 연산자를 통해서 우리가 조건을 만들어낼 수가 있겠습니다. **의미해석** a ?는 물음표를 기준으로 그 앞의 값을 확인해야합니다. a가..

#ECMA Script(에크마 스크립트) ES라고도 부른다. 유럽컴퓨터제조협회의 약어. 자바스크립트를 표준화 해 주는 국제 표준화 기구. ES6 나 ES2015는 버전이라고 생각하시면 됩니다. #1997년 이래로 계속 버전이 추가되고 있다. ES6 ES2015때 크게 바뀌게 되었다. JS5.1(2011)과 ES6(2015)버전 사이에 있는 차이점을 주목해야한다. 그 전후로 구버전 신버전을 구분한다. 이 때 크게 바뀌었다. JS를 개발할 때 어떤 버전인지 확인한다. #. 바벨이라는 플러그인 바벨이라는 플러그인 바벨이라는 플러그인의 도움을 받아서, 6버전 이후의 최신버전의 기술들을 구형브라우저에서도 동작할 수 있는 5버전 때의 자바스크립트의 문법으로도 변환시켜줄 수가 있겠고, 우리는 최신 기술로 작성을 하고..

#. npm init -y 로 {} package.json 파일이 생성 test 폴더를 만들어서, 터미널을 열어주세요. nodejs를설치했으면 npm도 설치됩니다. npm init -y를 입력하면 ( npm init 를 입력하고 -y 플래그를 입력합니다. ) 그러면 옆에 {} package.json 파일이 생성되는 것을 볼 수 있습니다. 안 나오면 새로고침 누르세여. # {} package.json 파일 상세보기 name: test ,폴더명이고요. 다른이름으로 바꿔도 사용해도됩니다. version: 1.0.0 ,프로젝트 버전도 나오고요 description: "" 프로젝트에 대한 설명 main: index.js 우리도 직접 패키지를 만들어서 사용할 수 있는데요, 현재의 프로젝트를 하나의 패키지처럼 만들어..

#학습목표 스타벅스 뱃지 만들기 먼저 html코드를 작성 해 줍니다. html코딩은 아주 간단합니다. 그리고 기본적인 css코딩을 짭니다. #body선택자에 height에 3000픽셀로 높이값을 넣어줍니다. #header 부분에 position 값을 넣을건데, 잠깐 relative를 주석 처리하고 fixed로 값을 넣어줍니다. 그리고 top을 기준으로 작성 해 주고요. 뷰포트를 기준으로 배치되는 것이기 때문에, 헤더라는 요소의 가로너비는 auto고, 이 auto를 통해서 브라우저가 자동으로 계산하면서 요소의 너비를 최대한으로 많이 사용하려고 하지 못하고, 저 이미지처럼 가로너비를 최소한으로 사용하려고 시도를 해요. 우리가 알고 있는 최대한이 아니고, 최소한으로 개념이 바뀌는 겁니다. 이;러한 현상은 포지..

#학습목표 서브메뉴의 4개의 항목을 만들어서 링크를 걸어둡니다. 4개의 항목사이에 3개의 수직바를 넣어줍니다. 돋보기모양의 아이콘을 넣고, 돋보기 모양을 클릭하면, 검색창이 뜨는 효과를 넣어줍니다. 초록색 테두리를 넣어줍니다. 또 placeholder를 넣어줍니다. #실제로 완성한 이미지 HTML 작성 코드 태그를 작성. 태그를 작성. (ul태그는 li태그랑 세트로 기억하세요.) 태그 4개 작성 Sign in이라는 특정한 페이지로 가게 만들겠다, 라고 선언하는 것. 아직 페이지가 준비가 되지 않았다면, 입력 해 둘수 있는 코드. 자바스크립트로 어떤 동작을 넣을건데 그 동작이 '0', 즉 '없다'라는 뜻. *또는 '#(헤쉬)'도 넣어도 된다. '#'는 몇가지 쓰임이 있지만, 그중 CSS ID 선택자를 이용..

# header태그 html에서는 기본적인 태그들은 이미 핵심요소로 만들어져 있다. 예를들면 header태그! 엄연히 html에 존재하는 태그이고요, 일단 특별한 기능은 없어요. (단순하게 이 부분이 사이트의 헤더영역이다라는 기본적인 의미만 가지고 있다고 보시면 되어요.) 우리가 대표적으로 div 태그를 이용해서 어떤 구조들을 만들고 화면에 출력을 할 수가 있겠는데, 그러면 그렇게 만들어진 구조가 어떤 역할을 하는지 알기가 쉽지않거든요. 그래서 사실 많은 경우에 이렇게 클래스를 부여해서 대표적으로 헤더라는 이러한 이름들을 부여함으로 해서 우리는 그 요소에 어떤 의미를 부여하게 되는데요. 이 html은 기본적으로 그러한 의미를 가지는 몇가지 태그가 있고요, 헤더태그가 그런 것 중 하나입니다. #header..

#. 모든 것들이 완벽한 디자인 시안은 나오지 않을 수 있다. 기본적인 디자인을 요청하는 것도 번거롭다. #.Google Material Icons 구글에서 제공하는 머터리얼 아이콘을 무료로 사용할 수 있습니다. 아래 링크태그를 통해서 구글 머터리얼 아이콘의 연결 주소가 있는데, html에 붙여넣기를 합니다. Head태그에는 링크태그를, Body태그에는 div 태그를 붙여넣기. (아래 링크는 강사님의 깃허브에서 가져 올 수 있음.) #.우리가 적용한 링크태그보다 Google Material Icons은 최신버전으로 올라오는데요. 그래도 아이콘의 이름은 그래도 활용 할 수 있거든요. 클래스 이름이 버전이 다르기 때문에 소스코드가 다른건데요, 그안에서 사용하는 아이콘의 이름은 같아요(예를들면 search라던..

#기본적으로 지정없이 글꼴을 정해두지 않으면 브라우저마다 다른 글꼴이 나오기 때문에 코드작성을 해 두는 것이 좋다. #google Font에서 글꼴 가져오기(무료인지 확인) 보통은 글꼴을 지정할 때 링크방식을 사용하니까 링크를 선택 해 줍니다. (@import는 직렬방식 link방식은 병렬방식) #html로 가져오기 #css도 가져오기 이거도 복사해서 가져오세요. #개발자 도구에서 폰트가 잘 적용이 되었는지 확인하기 개발자도구의 Computed로 들어가서 적용이 잘 되었는지 확인하세용! font-family를 체크.