-가상 선택자 :active를 이용하면 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경할 수 있습니다
-가상 셀렉터 :hover를 이용하면 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경할 수 있습니다. 밑에 보이는 예제의 입력창에 마우스를 올려놓으면 색깔이 변경되는 것을 볼 수 있습니다.
-가상 셀렉터 :focus 는 사용자의 마우스가 해당 요소를 클릭하면 요소의 스타일 변경할 수 있습니다. 클릭 이외에도 탭 키를 이용해서 요소를 선택해도 활성화됩니다.
<id와 class 의 차이>
ex)
<p class = "key">A</p>
<p class = "key">B</p>
-> key 클래스를 여러곳에 중복으로 사용가능
-------이와반대로-------
<p id = "birthday">홍길동</p>
<p>김영찬</p>
-> id 클래스는 위예시로 birthday 아이디는 여러곳에 사용할 수 없습니다.
홍길동에있는 p태그에 사용했다면 김영찬의 p 태그에는 사용할 수 없습니다.
그리고 class 사용예입니다.
<div class="className1 className2"> 연습 </div>위의 두 단어 사이에 띄어쓰기로 공백이 의미하는것은 서로 다른 두 개의 class를 의미하게 됩니다.
또한
선택자사용시
# 기호는 id 값을 선택자로 지정할 때 사용합니다.
. 기호는 class 값을 선택자로 지정할 때 사용합니다.
참고했던 블로그>
클래스(class)와 아이디(id)의 차이점
html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리가 가능하다. 클래스(class)와 아이디(id)는 얼핏 보기엔 똑같은 기능을 하는 것 같지만, 알고
heinafantasy.com
Notification은 웹에서 제공하는 Web API로 Notification을 이용하여 웹페이지에서 시스템 알람이 동작하도록 할 수 있습니다.
| [JS] foreach 문 학습 (0) | 2023.04.15 |
|---|---|
| [JS] 함수란? (0) | 2023.04.15 |
| [JS] Promise 란? (0) | 2023.04.09 |
| [JS] 이벤트리스너 (콜백함수) (0) | 2023.04.08 |
| [JS] 객체의 비교(원시값과의 차이점) (0) | 2023.04.03 |
문자열.split()
: 소괄호 내의 기호로 문자열을 나누어 배열로 만듦
배열.join()
: 소괄호 내의 기호로 배열의 각 원소를 이어붙여 문자열로 만듦
한 마디로 .split()은 문자열을 배열로 나누고, .join()은 배열을 문자열로 이어붙인다.
position 사용법
position 속성 사용법은 다음과 같습니다.
position: static | relative | absolute | fixed | sticky
| static | 요소를 문서 흐름에 맞추어 배치. |
| relative | 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정. |
| absolute | 원하는 위치를 지정해 배치. |
| fixed | 지정한 위치에 고정하여 배치. |
| sticky | 위치에 따라서 동작방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에 는 relative와 같이 동작. 그 이후에는 fixed와 같이 동작. |
static을 제외한 나머지 속성값들은 top, left, bottom, right 와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있습니다. 각 값들은 그 방향에서 얼마만큼 떨어져 위치시킬 것인 지를 나타냅니다. 예로들어 top: 15px 면 기준위치 위에서 15px 떨어져 있는 곳에 위치시키라는 뜻입니다.
출처: https://engkimbs.tistory.com/922 [새로비:티스토리]
a,b=map(int,input().split())
print(format(a,".2f")) 는 안되고
a=float(input())
print(format(a,".2f")) 는됨 ..
---
- border-radius => 테두리를 둥글게 만드는 속성
- querySelector 는 특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾습니다.
--selector all은 그것을 넣고, 그것들을 모두 잡아서 노드 목록이라고 하는 것에 넣습니다. 이것은 매우
배열과 유사합니다.
- addEventListener() 는 document내에 특정요소에 event를 등록할때 사용합니다.
-ES6부터 새로 도입된 문자열 표기법이다.
문자열 생성시 따옴표 대신, 백틱(`)을 사용한다.
-trim() 공백을 만들때
-test() ㅡ 찾는 문자열이, 들어있는지 아닌지를 알려준다.
-1. charAt(인수) - 인수번째의 문자를 읽어 냅니다.
예) "javascript".charAt(2)에는 'v'가 읽어 집니다. 0부터 시작하기 때문에 3번째인 'v'가 읽어 집니다.
2. indexOf(인수) - 인수가 들어있는 위치를 알려 줍니다.
예) "javascript".indexOf("s")에는 4가 읽어 집니다. 0부터 시작하기 때문입니다.(lastIndexOf는 뒤에서부터 셈)
-값 가져오기
element.innerText;
이 속성은 element 안의 text 값들만을 가져옵니다.
element.innerHTML;
innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옵니다.
값 설정하기
element.innerText = "<div style='color:red'>A</div>";
element.innerText에 html을 포함한 문자열을 입력하면,
html코드가 문자열 그대로 element안에 포함됩니다.
element.innerHTML = "<div style='color:red'>A</div>";
위와 같이 element.innerHTML 속성에 html코드를 입력하면,
html element가 element안에 포함되게 됩니다.
위 예제에서 'innerHTML()'을 클릭하면,
입력된 html태그가 해석되어 빨간색A 가 나타나는 것을 확인 할 수 있습니다.
-return 키워드를 제거하면 그 주위의 중괄호를 제거 할 수 있습니다.
-JSON.stringify 했던것을 배열로 다시 전달할려면 JSON.parse 사용
- JSON.parse()란?
JSON.stringify란?
-event.target은 이벤트가 발생한 요소를 반환해준다.
-toggle은 클래스의 유무를 체크해서 없으면 add, 있으면 remove를 자동으로 시켜준다.
-문자열을 숫자로 바꾸느 정말쉬우방법 앞에 + 기호를 추가하면됨
- ex) const arr= [1,2,3]
const arr2= [...arr,4,5]
console.log(arr2)
=> Array [1,2,3,4,5]
-노드 목록 - > 일반 배열로 변환
map?
-return 키워드를 제거하면 그 주위의 중괄호를 제거할 수 있습니다.
-로컬저장소를 사용하면 라이브러리나 기타 항목을 가져올필요 x 브라우저에 내장되어있음
- .setItem() 으로 무언가를 설정할수 있음
- <option value="10">Avengers: Endgame ($10)</option>
<option value="12">Joker ($12)</option>
<option value="8">Toy Story 4 ($8)</option>
<option value="9">The Lion King ($9)</option>
html에서 옵션 value 는 가격 임 이렇게보듯이
- localStorage를 사용하는 방법을 알아보겠습니다.
setItem() - key, value 추가
getItem() - value 읽어 오기
removeItem() - item 삭제
clear() - 도메인 내의 localStorage 값 삭제
length - 전체 item 갯수
key() - index로 key값 찾기
- CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다.
transition은 애니메이션 효과를 적용할 때 애니메이션 효과가 일정 시간에 걸쳐서 다양한 방법으로 진행 되도록 하는것 입니다.