노마드코더6 노마드코더__바닐라 JS로 크롭웹만들기 수업노트 #1 - 변수와 return. 자바스크립트에서 변수(variable) JS(Java Script)에서는 변수는 3가지가 있다. const 재선언 금지, 재할당 금지 let 재선언 금지, 재할당 가능 var 재선언 가능,, 재할당 가능 코드를 작성하면 아래와 같다. const a = b; const a = c; //재선언 금지 const a = b; a = c; //재할당 금지 let a = b; let a = c; //재선언 금지 let a = b; a = c; //재할당은 가능 var a = b; var a = c; a = d; //재선언, 재할당 가능 const는 한번 변수를 선언하면 변수의 수정이 아예 불가능하다. 변수의 내용을 바꿀수도 이미정한 변수를 다시 선언 할 수 도 없다. 언어를 통해 보호받을 수 있으나 업데이트를 하지.. 2022. 3. 30. 노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#4 - Advanced CSS Transition 상호작용을(states) 하였을때 변화과정을 애니메이션처럼 보여주는 효과이다. 규칙1 : transition은 states가 아닌 root인 element에 들어가야 작동이 된다. 규칙2 : transiton에 변화를 준것은 states에 들어있는 것들이 기준이 되어 바뀐다. (애니메이션 효과를 볼 수있는 사이트) 참고자료 : https://matthewlein.com/tools/ceaser Transform 다른 요소의 box를 변형시키지 않고 원하는 요소를 이동 시키기 위해서 사용한는 것. 3D차원에서 움직이기 때문이다. rotate, translate, scale, skew, matrix 둥이 있다. transform mdn 에서 많은 작용들이 있으니 한번씩 찾아보는것도 좋을것 .. 2022. 3. 24. 노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#3- Learning CSS 2 flex box lnline-block은 반응형디자인을 적용하지않아 웹크기에따라 크기(좌우폭)가 정해진다. 이런 문제를 해결하기위해 flex box란 개념이 도입되었다, flexbox 3가지 규칙 1, 자식 엘리먼트에는 어떤 것도 적지 말아야한다. 부모 엘리먼트에만 작성해야한다. 2. 주축X(main axis),교차축Y(cross axis) justify-content ->주축X의 정렬을 해준다. align-items -> 교차축Y의 정렬을 해준다. flex-direction : column; -> 주축과 교차축을 바꾸어준다.(default값은 row) flex-wrap -> 화면을 줄였을때 값을 바꾸어준다. vh와 px px : px값의 고정치를 부여. vh : 화면 비의 크기를 부여 Position .. 2022. 3. 23. 노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#3- Learning CSS 1.1 CSS적용하는 방법 2가지. 같은 HTML파일에 HTML코드와 CSS코드를 놓는다. CSS와 HTML을 분리하는 바법 CSS코드 HTML태그를 가르키는 일을 한다. =selctor Cascading style code => 폭포처럼 위에서 아래로 순차적으로 프로그램이 돈다. 같은 명령일경우 마지막 명령을 따른다. head태그 안에서 작성하며, 태그로 적용가능하다. display(box) : block 과 inline blcok -> 옆에 올수 없는 태그들 : div, p / 높이와 너비가 있다. inline -> 옆에 올수 있는 태그들 :span,a,img / 높이와 너비가 없다. HTML은 모두 box요소를 뛰며 block형과 inline형으로 나누어진다. box의 3가지특성 margin : 박스경계의.. 2022. 3. 23. 노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#2- Learning HTML VSC사용시 반드시 지켜야할 주의사항. 1. VSC로 만들어준 폴더안에 파일을 만들어주어야한다. 2. 폴더명은 소문자로만 작성해야한다. 3. 파일명 또한 소문자로 작성해야한다. 나중에 위 문제들로 에러가 나올수 있는 사항들이니 반드시 체크해주어애한다. 웹사이트의 구성 웹사이트는 크게 Head부분과 Body로 나누어진다. head : 웹사이트의 환경을 설정함, 외부적으로 보여지지않는 설정을 해준다.(ex. 타이틀, 메타태그 등) 헤드에서 작성된 글은 웹사이트에서 content로 나타나지 않는다. body : 사용자가 볼 수 있는 contnet를 보여준다. tag와 attribute tag : "내용" 형태로 쓰인다. 웹에서 어떤 타입(?)인지 알려주는 요소이다. attribute(속성) : " 내용 " 의.. 2022. 3. 15. 노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#1 - Introduce 웹사이트와 브라우저 웹사이트는 text로만 이루어진 파일이다.(HTML, CSS, JAVA SCRIPT) 브라우저는 text들이해하여 우리가 보는 웹사이트를 text를 이해하여 보여주는 도구이다. 브라우저는 사람이 쓰는 언어는 이해를 못한다. 오로직 컴퓨터언어만 이해한다! HTML은 무엇인가?? 웹사이트는 2개 또는 3개의 언어로 이루어졌다. 그중 대표적인것이 HTML이다. HTML(Hypertext Markup Language)은 브라우저에게 어떤 구조 혹은 컨텐츠가 무엇인지 알려주는 도구이다. 헤더,네비게이션,사이드바,푸터 등이 있다. CSS는 무엇인가? CSS(Cascading Style Sheets)는 HTML과 함께 사용하는 언어이다. CSS는 브라우저에게 웹사이트가 어떻게 보여야하는지 알려준다.. 2022. 3. 7. 이전 1 다음
