목록 (152) 썸네일형 리스트형 4. window.location.reload() 💨 window.location.reload() javascript를 이용한 새로고침 기능이다. 임의 버튼을 클릭하면 초기화면으로 돌아갈 때 사용하거나 자주 새로고침 되어야하는 주식프로그램 같은 곳에서 쓰인다. ◾ 예시 종료 버튼을 누르면 처음 화면으로 가도록 만들었다. 3. Element.disabled / Element.className 💨 HTMLSelectElement.disabled 선택한 요소의 클릭 기능과 같은 제어 요소를 작동하지 않게 만드는 boolean 타입의 구문이다. ◾ 예시 classList를 쓸 때 유용하게 쓰인다. 💨 Element.className createElement() 를 이용해 만든 노드에 클래스 이름을 주고자 할 때 사용하자. ◾ 예시 2. inserAdjacentHTML() / setAttribute() 💨 Element.inserAdjacentHTML() HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. element 안에 존재하는 element를 건드리지 않는다. ◾ 구문 element.inserAdjacentHTML(position, text); ✅ position은 아래 4가지만 사용 가능하다. 1) beforebegin --> element 앞에 2) afterbegin --> element 안에 가장 첫번째 child 3) beforeend --> element 안에 가장 마지막 child 4) afterend --> element 뒤에 ❕ text는 HTML 또는 XML 로 해석될 수 있는 문자열(html code) 이고 , .. 4. position / display 💨 Position ◾ static 모든 태그들은 처음에 position: static; 상태이다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. ◾ relative static 을 기준으로 태그의 위치를 옮기고 싶을 때 사용한다. 상하좌우 다 움직일 수 있다. ◾ absolute static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다. ❗ absolute가 되면 div 태그를 지니고 있어도 width: 100% 가 아니다. #absolute 는 조상 태그에 position: relative 인 것이 없기 때문에 body를 기준으로 가장 오른쪽에 지정된다. #child .. 3. margin vs. padding / border vs. outline ◾ margin vs. padding ✅ padding은 요소의 내부에 빈 공간을 추가하고 margin은 요소의 주위에 빈 공간을 만든다. ◾ border vs. outline - border : 실제로 그만큼의 공간을 차지하게 되어 레이아웃에 영향을 끼친다. - outline : 레이아웃에 영향을 끼치지 않는다. ✅ border은 상하좌우 각각에 설정값을 줄 수 있지만, outline은 그렇게 할 수 없다. 2. 중앙 정렬하기 ✅ transition position: absolute; top: 50%; left: 50%; 이렇게 설정할 경우 위와 같이 도형이 생성된다. 따라서 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 💥trasform: translate(-50%, -50%) 를 줘서 정가운데로 위치시킨다. translate( X축 거리, Y 축 거리) 인데, 값을 준만큼 이동시키는 것이다. ✅ scale, rotate - scale( 가로길이에 곱하는 수, 세로길이에 곱하는 수) --> 길이 변환 - roatate(각도) --> 주어진 각도만큼 요소를 시계방향으로 회전시킴. 1. transition ✅ 문법 : { transition: property, timing-function, duration, delay} ▪ property: transition을 적용시킬 속성을 정한다. - all : 모든 속성에 적용한다. - property : 속성을 정한다. 여러 개일 경우 쉼표로 구분한다. ex) transition-property: width, background-color; ▪ timing-function : transition의 진행 속도를 조절한다. ease, linear, ease-in/out 등이 있다. ▪ delay : transition이 시작하는 시간을 연기할 수 있다. 시간 단위는 초(s) 또는 1/1000초(ms) 를 사용한다. ex) transtion-delay: 0.5s; 1. create HTML from an array of data 배열 안의 데이터를 HTML로 바꾸는 방법에는 두 가지가 있다. 1. createElement 방식 createElement () 메서드를 이용해 요소를 만들고 appendChild() 메서드를 이용해 DOM에 넣는 방식이다. 하지만 이렇게 할 경우 만약 수 많은 데이터를 읽어와야한다면 DOM에 접근 하는 속도는 굉장히 느려질 것이다. 그이를 개선하는 방법이 바로 fragment를 이용하는 것이다. 2. createElement 방식에 fragment 추가 ✅ fragment 란? 결론부터 말하자면 fragment 또한 node 이다. 그러나 어느 것에도 속하지 않는다. 심지어 DOM tree에도 속하지 않는다.덕분에, createElement() 에 비해 작업하는 속도가 빨라진다. ✅ 작동 방식 기존에.. 이전 1 ··· 15 16 17 18 19 다음
