220428(html,css,js)

JS

1. substring(), slice()의 차이점

-숫자가 음수일 때 substring은 인식하지 못하고  음수는 0으로 변경되고, slice()는 문자열의 뒤부터 -1로시작한다!
둘 다 (startIndex,endIndex)인건 같음

-substring() : 시작인덱스가 끝인덱스보다 크다면 자동으로 둘의 위치가 변경됨

-slice():시작인덱스가 끝인덱스보다 크다면 빈 값을 반환함(둘 다 양수) . 다만 끝 인덱스가 음수라면,

앞에서 시작인덱스만큼 센다음 시작하고, 맨뒤부터 끝인덱스의 절댓값만큼 왼쪽으로 움직인다

예) str.slice(2,-5)  '이건 테스트야 한번 볼래?=>' 테스트야 한'

-둘다 시작인덱스만 적어도 됨. 하지만 slice()는 음수가 허용되기 때문에 끝에서 [-4]인 위치에서 끝까지를 반환한다.

   => str.slice(-4)일 때 "번 볼래?" 가 됨

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice

 

 

2.join()- 배열을 문자열로 변경해줌

array.join(seperator) 이렇게 사용하는데 괄호안에 아무 것도 넣지 않았을 시에는 ,로 자동으로 구분된다. 배열을 구분자 없이 이어지게 하고 싶다면 ('')이렇게 하면 된다

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

---

Html

1. form 안에 있는 버튼들은 "submit"인 것 처럼 작동.반드시 버튼 속성에  type="button"이라 명시필수!

 

---

 

CSS

1. display:grid

https://developer.mozilla.org/ko/docs/Web/CSS/grid

grid(블록요소로 배치)/ inline-grid(인라인 요소로 배치)

-여러 개가 한줄 한줄씩 줄세우기 위해선 inline- grid를 써야한다

 

배치할 때 행과 열을 설정하기 위해

grid-template-columns

grid-template-rows 속성을 사용해서 배치

grid-gap: 열 간격, 줄 간격

 

fr- 상대적인 크기를 지정하는 단위

예)grid-template-columns: 1fr 1fr 1fr;=> 비율이 1:1:1인 배치

 

auto-fit,auto-fill 화면 너비에따라 칼럼개수 조절할 때 사용

 

 

grid에서 함수 사용하기

 

-repeat(갯수, 단위)

  위의 예를 함수를 사용하여 작성하게 되면 grid-template-columns: repeat(3,1fr); 

-minmax()

 

이 포스트도 읽어보기

https://heropy.blog/2019/08/17/css-grid/

 

2.css 함수

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions