array 란? : 리스트를 만드는 것. 대괄호를 이용해 원하는 칸에 들어있는 변수를 가져올 수 있고 추가, 삭제도 가능하다. const toBuy = ['potato', 'tomato', 'pizza']; console.log(toBuy); toBuy[2] = 'water'; console.log(toBuy); toBuy.push('meat'); console.log(toBuy); 세부 설명 : const toBuy = ['potato', 'tomato', 'pizza']; - potato : 0번 째 - tomato : 1번 째 - pizza : 2번 째 순으로 센다. toBuy[2] = 'water'; toBuy 배열 중 2번 째는 'water'로 바꾸겠다는 것. toBuy.push('meat');..
어떠한 정보를 계속 나열하기엔 코드가 너무 길어지기 때문에 object 를 이용해 그룹화한다. const player = { name: "jeong", point: 10, fat: true, }; console.log(player); player.lastName = "lala"; console.log(player); // console : {name: 'jeong', point: 10, fat: true} {name: 'jeong', point: 10, fat: true, lastName: 'lala'}
function이란? 계속 반복해서 사용할 수 있는 코드 조각이다. 개발자는 가능한 적은 코드를 작성하고자 하기 때문에 필요하다. 어떤 코드를 캡슐화해서 실행을 여러번 할 수 있게 해준다. function 만드는 방법 function sayHello(nameOfPerson, age) { console.log('Hello, My name is ' + nameOfPerson + ". I'm " + age + '.'); } sayHello('nico', 20); sayHello('dal', 30); sayHello('lynn', 16); // console Hello, My name is nico. I'm 20. Hello, My name is dal. I'm 30. Hello, My name is lynn...
많은 웹사이트들의 코드가 이렇게 만들어진다. 이것들을 좀 더 간편하게, 개발자들의 눈에 더 잘 띄도록 만들어낸게 Semantic Elements 이다. 이 외에도 가 있다. 참고 : https://www.w3schools.com/html/html5_semantic_elements.asp
✔️flexbox의 특징 1. display: flex 는 모든 요소를 가로로 둔다. 2. display: flex는 부모한테 적용하고 자손을 컨트롤한다. 3. justify-content : 가로로 요소들을 움직인다. (flex-start, center, flex-end, space-between, space-around 등의 값이 있음) 4. align-items: 세로로 요소들을 움직인다. (flex-start, center, flex-end 등 적용가능) 5. flex-direction:column 가로로 정렬된 요소를 세로로 바꾸고 justify-content는 세로로 align-items는 가로방향으로 바뀐다. ✔️예시 children1 children2 children3 부모 태그에 자식태그..
✔️position 속성 값 1. static:웹사이트의 기본 속성값, (top, right, left, bottom을 이해하지 못함) 2. relative: HTML테그가 있는 위치에서 top, right, left, bottom 값을 통해 움직임 3. absolute: 부모영역에서 top, right, left, bottom을 이용해 주어진 위치로 움직임 4. fixed: absolute와 비슷하지만 스크롤을 내려도 그 위치에 고정, 무조건 브라우저 창 기준 5. sticky: relative와 비슷하지만 스크롤을 내리면 fixed처럼 그 위치에 고정 ✔️상세 설명 1. static:웹사이트의 기본 속성값, (top, right, left, bottom을 이해하지 못함) .locate { positi..