코딩기록

new가 없을때 function Car(key) { console.log(new.target); this.key = key;}let result1 = Car("Silver Car");console.log(result1);let result2 = new Car("Red Car");console.log(result2);-------undefinedundefined[Function: Car]Car { key: 'Red Car' }  new를 추가하는 코드 function Car(key) { if (!new.target) { return new Car(key); } this.key = key;}let result1 = Car("Silver Car");console.log(result1); //C..

배열을 돌면서 코드를 수행하고 그 결과를 배열로 리턴한다. item 매개변수에 num이 순차적으로 들어가고 * 2를 하면 2, 4, 6, 8, 10 이라는 값이 배열로 들어가 리턴된다. // [2 4 6 8 10]let num = [1, 2, 3, 4, 5];let ex_map = num.map(function (item) { return item * 2;});console.log(ex_map); // [2 4 6 8 10]  map을 사용하면 따로 .push()를 사용할 필요가 없다.    생성자: new Map()개수 확인: Map.size요소 추가: Map.set(key, value)요소 접근: Map.get(key)요소 삭제: Map.delete(key)전체 삭제: Ma..

숫자배열 오름,내림차순 정렬 .sort() 는 오름차순으로  배열값을 정렬한다.문제는 문자열로 치완해서 유니코드 순서에 따라 정렬하기 때문에 우리의 예상과 결과값이 다르다는 것이다. 그것을 보완하는 방법이 고차함수 이다. 아래처럼 ascending_order 이라는 함수를 만들어 사용하면 .sort() 오름차순 descending_order는 내림차순으로 숫자가 정리된다.let nums = [1, -1, 4, 0, 10, 20, 12];console.log(nums.sort()); //[ -1, 0, 1, 10, 12, 20, 4 ]console.log(nums.reverse()); //[ 4, 20, 12, 10, 1, 0, -1 ]// x=1 - y=(-1) = 2 -> x=-1 y=1let..

지난 한달간 좋았던 점단순히 강의만 듣는게 아니라 과제를 하면서 실제로 적용해보고 부딪혀 가며 공부할 수 있다는 점이 가장 좋았다.첫날 작성한 학습 계획표대로 공부하고 있는가 ?(계획대로 안되었다면 이유는 ?)2주까지는 내가 계획한 대로 진행 되었다고 생각했는데 3주차에 과제를 시작하면서 깨달았다. 아! 처음부터 계획을 잘못짰구나❗❗ 과제를 처음부터 시작했었어야 했다. 과제를 늦게 시작하는 바람에 3주차부터 거의 밤을 지새우며 과제를 했고 마감날짜를 이틀이나 지나서 제출했다. 나머지 5개월간의 학습 계획수면시간을 잘 조정해야겠다는 생각이 먼저다. 3주차부터 밤을 새서 현재 수면 패턴이 약간 망했다. 아침 일찍 일어났는데 지금 그 패턴이 무너져서 다시 되찾는게 첫번째고 두번째는 js 과제를 처음부터 살펴보..

a 태그 작성시 href="~~"  만 작성하면 지금 보는 화면에서  "~~" 웹주소로 이동한다. a href="https://ppojjakcoding.tistory.com">a> 새창으로 이동할땐? target="_blank"    를 태그에 추가한다.a href="https://ppojjakcoding.tistory.com" target="_blank">a>  이때 하이퍼링크의 보안 취약점 까지 보완하고 싶다면?rel="noopener"    속성을 추가한다.a href="https://ppojjakcoding.tistory.com" target="_blank" rel="noopener">a>   [ HTML ]         div class="search-wrap">                ..

ul>              li>div class="del">span class="hide">원가span>3,000원div>li> //'목록 항목 수 두개 원가 3천원'              li>div>span class="hide">판매가span>1,000원div>li> // '판매가 천원'            ul>            button>Xbutton> //'엑스버튼'  -알파벳X로 만듬            button class="close">button> //공백 -'버튼'            button class="close">span class="hide">닫기span>button> //아리알기법(과거기법) -'닫기버튼'            button class="clos..

기존에 48*52 과 16*16가 약간 어긋났다.      display: flex;     추가 코드 수정후 48*48 과 16*16 크기가 딱 맞다 [ html ] button class="btn-toggle">                    img src="../assets/images/ico-arrow-gray.svg" alt="">                  button>[ css ]  .btn-toggle {    //이미지와 이미지를 감싼태그가 미묘하게 어긋날때 display:flex; 주면 딱 맞는다.    display: flex;    // 내가준 패딩값 때문에 밀릴때 패딩값 만큼 마이너스 마진값을 주면 된다.    margin: -16px;    padding: 16px;..

body.scroll-off {     // 팝업이 떠있을때는 뒷배경(body)의   overflow-y: hidden;   //스크롤이 움직이지 않도록 함  -ms-touch-action: none;  //.menu-option-popup 옵션선택영역  touch-action: none;}   메뉴추가가상 클라스 ::before  ::after 로 만드는 메뉴추가 +버튼 .ico-add 로 먼저  '메뉴추가'  영역을 만든다   ::before로 가로  ::after로 세로를 만드는데위치는 .ico-add를 부모로 잡고  display: flex 위치 삼총사로 잡았다       position: relative;      display: flex;      justify-content: center; ..

:not(.클래스이름)  가상 클래스 :not:not(.클래스이름) {  ~~~ css 코드  }'  .클래스이름이 아니면 중괄호 안의 css코드 동작을 수행해라  '라는 뜻이다. not 두개를 같이 쓰는건 어떻게 할까?  간단하다  붙여쓴다.:not(.new):not(.popular( {   margin-top: 10px;}-> 클래스 이름이 now, popular가 아니면 마진탑 10px 적용!156번-새로 나온 메뉴, 164번-인기 메뉴는 마진탑 미적용176번-시즈널 메뉴, 185번-시그니처 샐러드는 적용!! 10px 적용되서 노랑 배경색이 보인다.      메뉴 리스트펼쳤을때 아래화살표 ∨    닫았을때 위 화살표 ∧  .menu-list-area { padding: 28px $m-padding..

@mixin (믹스인)은 CSS 스타일 그룹 선언을 정의하는 기능 scss로 css작성시 여러번 반복하는 코드를 사용할때 따로 파일을 만든다.생성방법 -   @mixin 이름 { css내용 } 쓸때 -  @include 이름; 아래 _mixin_common.scss 파일의 내용은 텍스트 한줄 말줄임 표시  '  ...  ' 이다.  한줄 말줄임 표시   ✨잊지말것!✨styles.scss에 scss파일들을 컴포넌트로 분리해서 임포트 해놨다. 새로만든  _mixin_common.scss 파일도 추가하자index.html > link태그 styles.css파일 연결styles.css안에 scss 파일들 @import   멀티 말줄임 표시//한줄 말줄임표시 @mixin ellipse { text-overflo..

키보드의 TAB키를 사용해 웹페이지를 조작할 때  사용자와 상호작용이 가능한 요소들이 focus된다.대표적으로 , ,  같은 양식(form) 관련 요소(element)와 요소들이 있다.참고로 ,  , ,  포커스가 되지 않는다. 아래는 TAB으로 이동시 포커스가 잡히는 곳에 테두리를 주기 위한 코드이다.   수정전 [ html 코드 ]   구매하기  문제1. Tab 이동시 foucs를 통해 테두리 색상이 변경되도록 구현중  오류첫 번째 의 첫번째 태그줄만 Tab 이동시 focus 가 잡힘. 내가 원한 건 img-box 전체 focus2.  전체 이미지가 Tab시 위로 이동.     여기저기 블로거 글을 보다가 두 블로거 글에서 힌트를 발견!!1. tab..

' 시맨틱(semantic) '  -  의미의, 의미론적인시맨틱 태그란 의미를 가진 html 태그란 뜻이다. , 같은 태그보단 , 와 같은 특정 의미를 지닌 태그를 뜻한다.  ' 웹 표준 ' - 웹 표준은 월드 와이드 웹(W3C)의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어   HTML5 시멘틱 태그와 웹 표준을 지키는 이유 HTML 문서의 가독성과 유지보수  , , , , , , ... 등의 태그만 보더라도 어떤 내용을 담고 있는지 알 수 있으므로 문서의 가독성과 유지보수가 용이해진다. SEO시맨틱 태그를 사용하면 검색 엔진은 콘텐츠의 의미를 더 잘 이해할 수 있는데, 이는 웹 페이지가 더 높은 순위로 나타날 수 있도록 도와준다. 웹 접근성 - ' 스크린 리더 ..

내가 가고 싶은 회사회사에 입사하는 것은 인연이라고 생각한다. 면접관과의 케미, 회사와 나와의 케미 등. 실력이 좋아서 들어갈 수도 있고 면접을 잘 봐서 들어갈 수도 있고 합격 여부는 복불복인 것 같다. 그래서 내가  어떤 회사를 가고 싶다 바래도 이뤄질지 의문이다. 그래도 써보자면,, 직원들의 공부에 적극 후원하는 회사, 기본 반차/월차/연차 보장하는 회사, 적어도 명절날 선물 주는 회사, 점심주는 걸로 생색 안 내는 회사, 특히 지식을 적극적으로 공유하는 동료들이 있는 회사와 본인의 개인적인 기분을 부하직원이나 다른 직원에게 풀지 않는 사람이 있는 회사였으면 좋겠다. 개발자 공부를 하면서 가장 좋았던 점이 지식을 공유하는 개발자 고유의 문화였다. 기술이 항상 끊임없이 발전하다 보니 10~20년 이상 ..

1. 텍스트 요소 - 블럭요소. 텍스트 그대로 나타낼때 사용. 여러줄의 코드블럭을 나타낼때 사용. 이모티콘 등.  - 텍스트를 들여쓰기.  - css로 따로 꾸며야 함. - abbreviation 약어를 나타낼때 사용. WWW   - 주소. - 인용의 출처, 회의록, 이슈추적시스켐의 티켓 번호 등 변경점을 설명하는 리소스의 URI. - 글자를 오->왼 으로 작성한다. 아랍어 쓸때 사용.텍스트 포매팅 (Text Formatting) - 웹페이지상 텍스트에 효과를 준다. - 하이라이트. - 글씨를 작게. - 아래 첨자 요소. 활자배치를 아래  첨자로 해야하는 인라인 텍스트를 지정. 각주 등.  - 위 첨자 요소. 제곱 등. - 가운데 취소선. 문서에서 제거된 텍스트 범위. - 문서에 추가된 텍스트의 범위 표..

1. html에서 js로 이벤트 적용하기모달 열고, 닫기 제목입니다 내용입니다 수정하기 삭제하기 정말 삭제하시겠습니까? 취소 삭제   2. wiggle 애니메이션 복잡한 애니메니션이 필요할때 사용 안녕하세요!   wiggle.css  /* wiggle 애니메이션 */@keyframes wiggle { 0% { transform: rotate(0deg); color: red; } 25% { transform: rotate(10deg); color: orange; } 50% { transform: rotate(0deg); color: yellow; } 75% { transfor..

SASS(SCSS 싸스)란?( Syntactically Awesome StyleSheets )CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전히 해소시켜주는 스타일시트 언어다. SASS에는 Sass와 SCSS가 있다.또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어도 정상적으로 작동한다. 다만 SASS 자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없다. 따라서 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결한다.  scss를 css로 변환하는 방법 2가지1.  Live Sass 확장자vscode에서 scss를 쓰기..

html에서 아이콘 사용하는 2가지 방법 1. i 태그2. svg 1-1. 링크삽입https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"   integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="   crossorigin="anonymous" referrerpolicy="no-referrer" />1-2. https://fontawesome.com/icons아이콘 홈피에서 아이콘 테크 복사  예시) 돋보기 아이콘   2-1.  svg 안에 svg 태그를 쓴다  ...  head 태..