본문 바로가기

✏️ 공부27

[CSS] @font-face와 google fonts 사용 방법 * 공부한 내용을 다시 기억하고 정리하기 위해 쓰는 글입니다. * 부족한 내용이나 틀린 내용을 알려주시면 감사합니다. @font-face 사용하는 방법 (단, 폰트 파일 갖고 있어야 함) @font-face { font-family: '폰트명_지어주면_됨R'; font-weight: 400; src: url(폰트_디렉토리_경로); } @font-face { font-family: '폰트명_지어주면_됨B'; font-weight: 800; src: url(폰트_디렉토리_경로); } body { font-family: '폰트명_지어주면_됨R'; } 근데 위와 같은 경우는 폰트 파일을 내가 갖고있어야 함. 그리고 한글 폰트는 용량이 커서 1~2개만 사용해야 함. (용량 줄이려면 ttf 대신 woff 쓰면 됨).. 2022. 7. 25.
배열 정렬 해보자! sort() filter() map() (작성중) 코딩애플 강의를 듣고 내용을 정리해봅니다. 잘못된 내용에 대한 설명은 감사히 받겠습니다. 배열에 대해 정렬을 하는 함수들이 있다. 배열.sort(); 🌱 문자 정렬하기 ▼ 문자 정렬(오름차순) → 가 ~ 라 가, 나, 다 에서 '가' 보다 '다', 'ㄱ' 보다 'ㅎ' 가 더 크다. // 배열.sort() 정렬 → 문자 정렬을 해줌 let 어레이 = ['다', '나', '가', '라']; // 문자 정렬(오름차순) 어레이.sort(); console.log('문자정렬(오름차순): ' + 어레이); // 문자정렬(오름차순): '가', '나', '다', '라' ▼ 문자 정렬(내림차순) → 라 ~ 가 // 문자 정렬(내림 차순) 어레이.sort(function(a, b){ if(a < b){ return 1; .. 2022. 6. 24.
태그 생성 문법과 객체, 배열의 반복문(forEach, for...in, for...of) 코딩애플님의 강의를 보다가 유용하게 쓰일 것 같아서 정리해보았다. (노션에 정리하니까 잘 안들어간다... 그냥 티스토리에 써야지) 지금 원하는 작업은 select 태그 안의 option 태그를 싹 갈아치우는 것이 목적이다. 강의에서는 jQuery를 주로 쓰는데, jQuery의 append( )를 javascript는 어떤 메서드를 써야 하는지...! (앗 그리고 jQuery의 append( ) 기능으로 무한 스크롤을 만들 수 있다고 한다.) 바닐라 자바스크립트에 appendChild, innerHTML 이것저것 써서 append 를 대신할 것을 넣어보았는데 잘 되지않았다. appendChild는 하나의 요소만 추가가 가능하며, DOM string은 추가가 안되더라. const div = document... 2022. 6. 14.
innerHTML, innerText, textContent 그리고 value (작성중) 🌵 태그 내부에 값을 넣을 때 태그.innerHTML = '내용'; 태그.innerText = '내용'; 태그.textContent = '내용'; 🌵 차이점 innerHTML innerText textContent 공통점 • HTML에 텍스트를 추가한다. • 해당 엘리먼트의 텍스트 값을 반환 한다. • node나 element의 텍스트 값을 읽어오고 설정 가능하다. 차이점 • 자기 자신은 텍스트 값만, 자식들은 텍스트와 태그 값까지 모두 가져온다. • 불필요한 공백을 제거하고 텍스트로 반환 함. • element 내에서 사용자에게 보여지는 텍스트를 읽어옴. • display: none; 으로 정의된 숨겨진 텍스트는 브라우저에서 사용자에게 보여지지 않는다. • 자기 자신과 자식 태그들의 텍스트 값만 가지고.. 2022. 6. 10.

티스토리툴바