A to Z 웹기초 JavaScript 정리-1

1. margin은 바깥 여백을, padding은 내 안쪽 여백을! 

ex) padding: 30px 0px 10px 0px;  사각형 모양의 이미지가 있는경우,패딩 옆 숫자 4개는 차례대로 12-3-6-9시 안쪽 여백 을 설정함

 

2. box-shadow: 0px 0px 3px 0px blue; =>그림자 효과를 주는것이고 숫자 4개는 차례대로 12시부터 시계방향에 마지막 blue는 그림자 색상 설정

(1,2번은 css 헷갈렸던 내용)

 

3.자바스크립은 변수앞 자료형을 예전 var로 한다 들은듯한데  let으로 적기도한다. ex) let fruits='apple'

 

4.자바스크립트의 forEach문 ->  ex) 리스트변수 fruits일때  fruits.forEach( (i) => { console.log(i) } ) 이러면 fruits에 들은 요소들 개발자도구 모드의 콘솔부분에 다 출력한다.

 

5.html태그안 속성으로 onclick="함수이름" 하면 해당 태그 눌렀을때 내가 설정한 자바스크립트가 작동한다.

   함수는 <script></script>사이에 적는다. ↓  사진의 예시에 alert 함수는 메세지 알림창 뜨게 하는거다. 

6. JQuery란 자바스크립트의 라이브러리이고 사용하려면 임포트 해야하니 head안에 ↓넣어야한다

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

7.  JQuery로 이제 자바스크립트 동작 일어나게 하려면 일단 동작 시키고 싶은 태그를 가리켜야한다. 그러기 위해선 태그들에 id값을 설정도 해야한다.

  ex) h1에 id값을 title로 했고 이제 이걸 가리킬땐 $('#title') 이렇게한다. 사진에 text는 '킹덤'이였던거를 '쥬라기월드'로 변경

8. 사진을 보면 현재 "2.붙이기"  태그안에 고정 단어들이 적혀있다. 이제 이 태그를 가리키면서 empty()함수로 태그안 내용을 비워버리고 append로 temp_html변수에 있는 값으로 추가한다. 

temp_html 변수값 보면 백틱(키보드 숫자1 왼쪽에 있는 키)인 ` ` 를 사용한다. 백틱은 문자와 변수를 함께 써줄 수 있도록 하는 특수기호!

                                  

9. 리스트에 있는 요소들 하나하나 다 할경우 ↓ 포맷이랑 비슷하게 ${값} 넣는다.