웹 스터디16 [JavaScript] 데이터 타입, let vs var, hoisting (With. Ellie) Variable) -> 변경될 수 있는 값 1) let (added in ES6) -> mutable 값으로 수시로 변경할 수 있는 변수이다. let globalName = 'global name'; { let name = 'rotoma'; console.log(name); name = 'hello'; console.log(name); console.log(globalName); } console.log(name); console.log(globalName); 이렇게 사용하면 된다. glober은 전역변수를 뜻하고 glober이 붙지 않은 let은 지역변수이기 때문에 박스 밖에서는 무시된다. - let vs var var는 되도록 쓰지마!!! 왜냐??!! var hoisting이 일어난다. hoistin.. 2021. 7. 23. [JavaScript] 콘솔에 출력, script async / defer 차이점 (With. Ellie) 드디어 HTML 과 CSS 다음에 프로그래밍 언어 JavaScript 까지 무사히 시작하게 되었다. 이번에도 차근차근히 기초부터 꼼꼼히 JS를 배워보도록 하자! 우선 VScode를 실행해서 js 파일을 만들어 JS의 시작을 알리는 Hello World를 콘솔 창에 출력해 보았다. 또, index.html 파일을 만들어서 JavaScript가 실행되게끔 하는데 있어서, js파일을 포함하는 과정에 있어 어느 방법이 효율적인지 알아보았다. 1) 콘솔창에 Hello Woooorld! 출력하기 javascript에서 콘솔창에 Hello Woooorld!를 출력하는 명령어는 console.log( )를 사용한다. ( )안에 출력하고자 하는 내용을 작성하면 되는데, Hello Wooorld!와 같은 문자열은 ' ' .. 2021. 7. 21. [CSS] 웹 프로젝트 9일차! (animation) 오늘은 여러 state 속성에 대해 공부했다. active, hover, focus, focus-within, visited ~~ 그리고 드디어.. 애니메이션 효과를 넣는 방법을 배웠다. state) - active -> 해당 요소를 마우스로 클릭했을 때 지정한 효과를 적용한다. - hover -> 마우스가 해당 요소 위를 지나갈 때 지정한 효과를 적용한다. - focus -> 키보드로 선택되었을 때 지정한 효과를 적용한다. - focus-within -> 부모 요소에게 적용하며, 자신의 자식 요소 중 하나가 focused 되었을 때 지정한 효과를 적용한다. - visited 링크를 걸어 두었을 때, 이미 방문한 사이트일 경우에 효과를 적용한다. 추가적으로 조건을 나열해 여러 상황을 설정할 수도 있다!!.. 2021. 7. 14. [CSS] 웹 프로그래밍 8일차! (position & pseuco selector) 오늘은 position 과 pseudo selector에 대해 공부했다. 우선 position에 대해 알아보자!! position) position은 요소의 위치를 지정하는 기준을 정하고 그에 맞추어 요소의 위치를 설정한다. 그렇다면 본격적으로 4가지 속성에 대해 알아봅시당!! - position : static ; (기준 없음) 모든 태그의 position 디폴트 값은 static으로 설정되어 있다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. - position : relative ; (요소 자신을 기준) 태그의 위치를 살짝 조정하고 싶을 때 사용한다. 이 코드를 사용함으로써 top(위) bottom(아래) left(왼쪽) right(오른쪽) 속성을 사용해 위치를 조정할 수 있다. * 주의할 점.. 2021. 7. 12. [CSS] 웹 프로젝트 7일차! (flexbox froggy) 오늘은 챌린지 쉬는 날~~ 오늘만 푹 쉬기로 했다!!! ...... 였으면 좋겠지만 그래도 간단한 복습이라도 진행하기로 했다!! ㅋㅎㅋㅎㅎㅋ 오늘은 가장 헷갈리는 개념 중 하나인 flex를 쉽고 재밌게 뽀실 수 있는 게임을 해 보기로 했다! 목표는 개구리의 위치를 연잎에 위치하게끔 flex코드를 이용해 문제를 풀어나가면 되는 간단한 게임이다. 총 24stage로 구성되어 있다. ㅋㅎㅋㅎㅎㅋ 그나저나 개구리가 참 귀여운 것 같당 ㅎㅎㅎ flex익히는게 이렇게 귀엽고 재밌을 줄이야~~~ ㅎㅎ 이제 display:flex; justify-content: ; align-items: ; flex-direction: ; 이고 뭐고 다 덤벼~~~~ https://flexboxfroggy.com/#ko Flexbox .. 2021. 7. 12. [CSS] 웹 프로젝트 6일차! (border & padding & flex) 오늘은 2일차 CSS의 box 특징 margin, border, padding 중 border 와 padding에 대해 공부해 보았다. padding) border의 안쪽 공간 = box의 경계 안쪽 padding: 20px; -> padding을 20px 해라 border) margin 과 padding의 경계선 = box의 경계 border: 2px solid black; -> border을 2px의 검은색 실선으로 해라 FLEX ) -> flex는 레이아웃 배치 전용 기능으로 고안되었다. 기존 방식의 inline-block보다 훨씬 편하고 강력하다!! 1 2 3 이런 코드가 있다고 할 때, flex선언은 부모 요소인 body에 하고, body는 flex container라고 한다. 자식 요소인 di.. 2021. 7. 11. 이전 1 2 3 다음
