코딩기록

키보드의 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 태..

내가 생각하는 프론트엔드 개발이란 ?홈페이지 앞단에서 유저가 기능을  편리하게 사용할 수 있게 하는 작업이라 생각한다. 눈이 불편하거나 마우스 사용이 불편한 유저 혹은 컴퓨터 사용이 익숙치 않은 유저 등 다양한 환경의 유저를 생각해 기능을 배치하고 사용하기 편하게 만들어야 하는 사람이라고 생각한다. 그저 주어진 일만 하는것이 아니라 내게 맡겨진 일을 잘 할 수록 다른이들에게 도움이 된다니  ' 널리 인간을 이롭게 하라 '는 우리 민족 정기의 상징인 '홍익인간'의 정신 아니겠는가! 단순 반복적인 일보다 동기부여가 되는 일에 보람을 느끼는 나로서는 더할나위 없이 딱인 일이다. 나는 앞으로 어떤 도움 되는 일을 할까? 꾸준히 갈 수 있기를.  프론트엔드와 백엔드 개발의 차이점은 ?프론트는 홈페이지를 열었을때 ..

제로베이스 프론트엔드 스쿨에 참여하는 나의 다짐 백엔드를 거쳐 드디어 프론트엔드가 되기위해 공부를 시작했다. 집보다 도서관에서 공부하는 타입인 나는 여러 부캠중 온라인으로 하는 제로베이스 프론트엔드 과정을 선택했다. 시기도 6월3일 ~ 11월 말일까지. 다시 부캠을 하게될줄은 몰랐지만. 혼자 하는 것 보다 관리를 받으며 공부할 필요가 있다 싶어 등록했다. 3개월동안 빡세게 해서 노드로 취업했는데 6개월이면  cs를 좀 더 파고, js, ts를 더 다지기엔 충분 한것 같다. 이번에는 운동도 병행해서 체력도 챙겨야겠다. 해보자!  프론트엔드 개발자가 되기로 결심한 이유개발자는 풀스텍, 백엔드, 프론트엔드로 나뉘다. 백엔드, 프론트엔드로 특정된다 하더라도 다른 파트도 조금은 알고 있어야 협업할때 소통이 잘 된..

1. Git Bash를 켠다.2. 키가 있는지 확인한다.$ cd ~/ .ssh$ lsid_dsa나 id_rsa라는 파일 이름이 보일 것이고 이에 같은 파일명의 .pub 라는 확장자가 붙은 파일이 하나 더 있을 것이다. 그중 .pub 파일이 공개키이고 다른 파일은 개인키다. 만약 이 파일들이 없거나 .ssh 디렉토리도 없으면 ssh-keygen 이라는 프로그램으로 키를 생성해야 한다. ssh-keygen 프로그램은 Linux나 Mac의 SSH 패키지에 포함돼 있고 Windows는 'Git for Windows' 안에 들어 있다. 3. 명령어로 키생성.   이름을 적고 비번을 두번 적는다. (비번이 없어도 무방)$ ssh-keygen 확인해보니 gitlecture.pub 키가 생성되었다.4. 키 내용 확인...

웹퍼블리셔 강의 기초부터 - https://wtss.tistory.com/168#실습 - https://blog.naver.com/rebehayan/221351418973  *텍스트한줄효과 2가지 방법- 1.overflow: hidden; width: 50px; height: 10px;2.overflow: hidden; text-overflow: ellipsis; white-space: nowrap; *이미지를 표현하는 방법 2가지1. html- img 태그로 표현(의미가 있을 때) / alt 태그 - 대체 문자 표현2. css - background 속성(의미가 없을 때) - 대체 문자 x3. 이미지를 background 속성 - 웹 표준 준수하기 위해서.     가상으로 대체 문자를 만듬(IR 효과)..

오늘까지 생활코딩 HTML, CSS는 마무리하고간단히 ATOM Editor, 크롬개발자도구 강의를 보고 갈 생각이다.그 후에는 웹퍼블 강의 하나 듣고 리액트 강의, 자바스크립트 강의로 들어갈 계획이다. 1) Korean Language Pack for Visual Studio Code- 한국어버전으로 VS code를 사용할 수 있도록 해주는 플러그인 2) Prettier - Code formatter- HTML, 자바스크립트, 타입스크립트, CSS 등 다양한 언어 형식을 잡아줌- 코드를 보기 좋게 정해진 코딩 컨벤션대로 정렬해주는 도구 3) Atom KeymapAtom에서 자주 사용하는 바로 가기 키를 사용할 수 있음.  4) Settings Sync- github에 VS Code Setting을 올리고..

*훅의 이름은 use~ 로 시작한다.  HTML*모바일 지원  CSS생활코딩 css수업: https://opentutorials.org/course/2418/13340*css참고 사이트: codepen.io*아톰에디터- https://github.blog/2022-06-08-sunsetting-atom/사용법- 생활코딩: https://opentutorials.org/module/1579 *grid-화면에 나란히 위치시킨다. 150px 고정 display: grid;grid-template-columns: 150px 1fr; *반응형- 스크린의 최소폭이 800이되면 div디스플레이가 사라진다@media(min-width:800px) {  div{     display:none;   }}*반응형 순서 캐스..

생활코딩 - React class vs. function style coding 시작  *다음 들을 강의1. HTML의 모든것, HTML 기초 2. WEB2-CSS, CSS기본부터 활용까지3. 생활코딩 - JavaScript Immutability, WEB2 - JavaScript 4. 개발자도구  개발자도구Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구Resources :  현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구Sources: JS 디..

개인메모장 1. JSX 2. Rendering Elements 3. Components and Props*** 4. State*** and Lifecycle 5. Hooks 6. Handling Events 7. Conditional Rendering 8. List and Keys 9. Forms 10. Lifting State Up 11. Composition vs Inheritance 12. Context 13. Styling 14. Mini Project 15. Appendix A. 리액트 버전18  8월 스케줄5번째 주  html/css 피드백 강의 & 프로젝트 마무리 하기mission04 (240829~30)mission05  (240830~31) 코딩 테스트 5차(240829)모던자바스크립트 ..

배열값을 오름차순과 내림차순으로 정렬 오름차순방법1.  \Math.min / Math.max로 시작점과 끝점을 지정function answer(x, y) { let result = []; // 시작점과 끝점 설정 const start = Math.min(x, y); const end = Math.max(x, y); // 단일 for문으로 처리 for (let i = start; i   방법2. 비교연산자 ( >,  x는 항상 작은 값, y는 항상 큰 값만약 x가 y보다 크다면, 두 값을 서로 바꿈.function answer(x, y) { let result = []; // x를 항상 작게 만듦 if (x > y) { let t = x; x = y; y = t; } /..

프론트엔드 신입 개발자를 구인하는 회사에서 요구하는 기술 스펙은 회사의 규모, 산업 분야, 그리고 팀의 기술 스택에 따라 다를 수 있다. 하지만 전반적으로 공통적으로 요구되는 기술과 역량은 다음과 같다1. 필수 기술 스택HTML, CSS웹 페이지의 기본 구조와 스타일을 작성하는 데 필수.요구사항:시맨틱 HTML 사용.반응형 디자인(Responsive Design)을 이해하고 구현할 수 있는 능력.CSS Flexbox와 Grid 시스템에 대한 이해.간단한 애니메이션(CSS Transition, Animation) 구현.JavaScript (ES6 이상)프로그래밍 언어로서 JavaScript에 대한 숙련도는 프론트엔드 개발의 기본.요구사항:최신 JavaScript 문법(ES6+, let, const, 화살표..