본문 바로가기
하이엔드 개발자가 되자!
반응형

전체 글56

소수점 표기 함수 Math.ceil(요소) - 올림 Math.floor(요소) - 내림 Math.round(요소) - 반올림 2023. 8. 24.
배열 자료를 분류해주는 filter() 함수 filter() 함수는 배열의 자료를 검토 및 분류해서 새로운 배열을 만들어준다 🔸정의 주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다 🔸기본 사용법 const numbers = [1]; numbers.filter((number, index, source) => { // number: 요소값 // index: source에서 요소의 index // source: 순회하는 대상 console.log(number); // 1 console.log(index); // 0 console.log(source); // [1] return number > 3; }); 🔸filter 함수로 분류해서 배열로 만드는 방법 const num.. 2023. 8. 23.
배열에 자료를 추가/삭제하는 함수 배열 추가/삭제 함수 🔷array.push() / array.pop() array.push('a') array.pop() 배열의 끝에 자료 추가 배열의 마지막 자료 삭제 🔷array.unshift() / array.shift() array.unshift('a') array.shift() let shifted = array.shift() 배열의 맨앞에 자료 추가 배열의 첫번째 자료 삭제 삭제한 자료를 반환 🔷array.splice() array.splice(위치, 0, ["a", "b", "c"...]) array.splice(위치(포함),삭제 갯수 ) 원하는 위치에 하나이상의 자료 추가 가능 예) array.splice(3, 0, ["딸기", "포도"]) 원하는 위치에서 하나이상의 자료 삭제 가능 예) .. 2023. 8. 23.
인디자인 디자인요소 HTML 파일로 내보내기 인디자인 막간 꿀팁. 인디자인으로 디자인한 요소를 HTML 파일로 내보내기를 할 수 있다. 레이아웃은 적용이 되지 않지만, 중요한 점은, 텍스트 CSS가 link 되어서 바로 사용할 수 있다는 것이다. 시간 단축에 용이할 것같다. 인디자인 팁 -"w" 키로 미리보기 및 작업창 전환가능 -인디자인에서는 사진을 넣으려면 "f" 키 로 사각형 프레임을 그려야 한다 -한 상태창에서 "shift + comm + p"로 여러개의 페이지를 띄울 수 있다 -레이아웃에서 안내선을 만들어서 작업을 용이하게할 수 있다 2023. 8. 18.
개발자 도구 : 눈금자 설정하기 HTML 파일을 만들다 보면 포토샵이나 일러스트처럼 눈금자가 있지않아서 레이아웃이 정확하게 되어있는지 확인이 어려울 때가 있다. 그럴 때 상태창에 눈금자가 보이면 좋겠다는 생각을 한적이있다. 웹 개발자 모드에서 눈금자 설정하는 방법을 알아보자. 1. "F12" 를 클릭하여 개발자 모드 진입. 2.우측 상단의 톱니바퀴 "설정" 클릭. 3.설정에서 환경설정 클릭. 후 아래로 스크롤. 4."요소" 에서 "마우스를 가져가면 눈금자 표시"를 파란색 체크 표시로 클릭한다. 아래와 같이 "ctrl + shift + c"를 눌러서 개발자모드로 진입하여 마우스를 올려보면 눈금자와 가이드 라인이 생긴 것을 볼 수 있다. 2023. 8. 18.
시멘트 태그 Sementic Tag 비일관된 HTML의 문서구조와 그로 인한 정보 검색 누락을 해결한 시멘틱 태그 🔷시멘트 태그의 장점. 1.SEO(Search Engine Optimization) 의 최적화 검색엔진의 노출에 유리하다 2.웹 접근성 효율 증가 일반 웹에서는 큰 차이가 없지만 스크린 리더 같은 상황에서는 웹 접근성과 사용성을 향상시킨다 3.유지보수의 용이성 레이아웃을 같은 태그로 적용시키면 누가 유지보수를 하든 용이하게 할 수 있다 🔸기존의 방법과 시멘트 태그 위치 기존 사용하던 방법 시멘트 태그 상단 div id = header 본문 div id = container div id = contents 하단 div id = footer 네비게이션 div id = nav global navigation bar 대메뉴 local.. 2023. 8. 18.
반응형