Basic/노마드코더6 노마드코더__바닐라 JS로 크롭웹만들기 수업노트 #2 - 자바스크립트로 HTML가져오기. getElementsByClassName() : 많은 element를 가져올때 씀(array를 반환) -getElementsByTagName() : name을 할당할 수 있음(array를 반환) -querySelector(“div.hello.h1”) : element를 CSS selector방식으로 검색할 수 있다. 첫번째의 element를 return해줌 ⇒ hello란 class 내부에 있는 h1을 가지고 올 수 있다(id도 가능함) -querySelectorAll(“div.hello.h1”) : 모든 element를 가져 온다. ⇒ h1이 들어있는 array를 가져다 줌 2022. 3. 31. 노마드코더__바닐라 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 수업리뷰#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 다음
