본문 바로가기

Dev.Etc10

[VSCode] 디렉토리(폴더) 구조 보기 방식(전체 나열) 변경 VSCode 디렉토리 구조 보기 방식 변경 VSCode 탐색기 영역에 작업 하고있는 디렉토리 구조를 볼 수 있다. 해당 디렉토리 구조를 보고 재빠르게 현재 작업하고 있는 디렉토리 위치를 알 수 있고 다른 디렉토리 위치도 파악 할 수있다. 하지만 아래와 같이 디렉토리 계층(java/com/example/demo)이 많을 경우 VSCode에서는 한줄로 표시 된다. 생각보다 한눈에 디렉토리 구조를 파악하기 힘들다. 설정을 변경해서 디렉토리 나열 방식을 변경 해보자. VSCode 설정에 가서(단축키: Ctrl + ,) Compact Folders를 검색하자. 기본 default로 Compact Folders가 체크 된 상태다. 해당 체크를 해제하면 아래와 같이 디렉토리구조가 나열되어 표시 된다. 추가로 Ctrl.. 2021. 9. 7.
[VSCode] 자동완성 단축키 추가 시작하기 아마 javascript 개발 중 사용 빈도가 높은 코드가 console.log()다. console.log()를 사용하는 이유는 여러가지가 있지만 그 중에서 간단한 디버깅을 위해 제일 많이 사용하는 것 같다. 그런데 매번 console.log()를 처음부터 적기란 앵간 귀찮은 일이 아니다. 그래서 찾아봤다. 몇글자만 입력하면 console.log()가 자동으로 생성되는 방법을! 간단한 설정으로 코드 작성시 효율성이 높아진다😆 자동완성 단축키 추가 및 사용법 👉 파일> 기본설정> 사용자 코드 조각 👉 자동완성을 적용시킬 언어 선택 언어마다 자동완성을 설정 할 수 있다. 👉 "console.log print" : { ... } prefix는 자동단축키 약어를 설정 body는 위 자동단축키 약어를 .. 2021. 7. 18.
[HTML/ CSS/ JS] input checkbox 다루기 -input type 종류 1. input type="text" 2. input type="password" 3. input type="submit" 4. input type="radio" 5. input type="checkbox" 6. input type="button" 7. input type="number" 8. input type="date" 9. input type="color" 10. input type="range" 11. input type="email" -checkbox에 click시 영역 숨기기 1. 최종 결과 2. HTML 숨기기 hide show show hide show show 숨기기 input 타입을 checkbox로 설정하고 label의 for속성을 input의 id값과 같.. 2019. 11. 3.
[HTML/ CSS/ JS] 단어장 -기능 1. 단어 및 의미 추가 기능 2. 단어 및 의미 검색 기능 -HTML English Vocabulary Add search option -reset.css body{ margin: 0; padding: 0; background: lightgray; font-family: 'Noto Sans KR', sans-serif; } h1, h2, h3, h4, h5, h6, p, div, span, a, button, input, label, ul, ol, li, img, input{ padding: 0; margin: 0; line-height: 1.3em; font-size: 16px; font-weight: normal; list-style: none; text-decoration: none; co.. 2019. 10. 28.
[HTML/ CSS/ JS] random 끝말잇기 게임 - 리팩토링 -HTML Random 끝말잇기 게임 게임 방식은 다음과 같습니다. 1.플레이 인원을 정한다. 2.닉네임을 정한다. 3.게임 순서는 매 턴 마다 Random!! 으로 정해진다. 4.GAME START에 단어를 작성하여 게임을 시작한다. 참가자 인원수 -reset.css body{ margin: 0; padding: 0; background: rgb(220, 20, 60); font-family: 'Noto Sans KR', sans-serif; } h1, h2, h3, h4, h5, h6, p, div, span, a, button, input, label, ul, ol, li, img{ padding: 0; margin: 0; line-height: 1.3em; font-size: 16px; font-.. 2019. 10. 18.
[HTML/ CSS/ JS] random 끝말잇기 게임 -html Random 끝말잇기 게임 게임 방식은 다음과 같습니다. 1.플레이 인원을 정한다. 2.닉네임을 정한다. 3.매 턴 마다 랜덤으로 순번이 정해진다. 4.GAME START에 단어를 작성하여 게임을 시작한다. 참가자 인원수 -reset.css body{ margin: 0; padding: 0; background: rgb(220, 20, 60); font-family: 'Noto Sans KR', sans-serif; } h1, h2, h3, h4, h5, h6, p, div, span, a, button, input, label, ul, ol, li, img{ padding: 0; margin: 0; line-height: 1.3em; font-size: 16px; font-weight: no.. 2019. 10. 7.
(HTML / CSS / JS) 버튼 클릭 시 자동 합계(2019/9/4)(리팩토링 필요!) -최종 결과 -HTML click 0 input 타입을 text로 하고 class명으로 선택한다. 나중에 js에서 유사 배열로 가지고 오기 위해서다. SuM 합계 버튼이다. 0 합계한 값을 출력하는 태그로 사용한다. -javascript 1. html태그를 js로 가지고 오기 const sum_input = document.getElementsByClassName('sum'); const btn = document.getElementById('btn'); const display = document.getElementById('display'); const sum_input = document.getElementsByClassName('sum'); input 태그를 ClassName으로 받아와서 유사 배.. 2019. 9. 4.
[HTML / CSS]input[type="text"]에 아이콘 넣기 최종 결과 HTML 부모안에 input을 자식요소로 넣어준다. CSS #insert_list #drop_the_text input{ background: #343a40; background-image: url(list.png); background-position: 5px center; padding-left: 40px; border: 1px solid #2e3238; width: 100%; height: 30px; box-sizing: border-box; outline: none; border-radius: 3px; } 👉 background-image: url(list.png); 배경 이미지로 아이콘 이미지를 넣는다. 👉 background-repeat: no-repeat 이미지가 작아서 반복이 된.. 2019. 8. 9.
[HTML / CSS / JS] input / label 사용해서 이미지 슬라이드 만들기 -최종 결과 자바스크립트를 이용하여 input이 활성화되면 전체 영역(img_content)의 배경 이미지가 바뀌게 한다. HTML && CSS 코드 보러 가기 -HTML 1. value 값 추가 각각의 input에 value값을 넣는다. 자바스크립트에서 input의 value값으로 어떤 input을 클릭하는지 알게 하기 위해 -Javascript 1. HTML 태그 선택하기 var changeImgBtn = document.getElementsByTagName('input'); var outBackground = document.getElementById('img_content'); var backImg = ['url(eximg1.jpg)', 'url(eximg2.jpg)', 'url(eximg3.jp.. 2019. 7. 31.
[HTML/ CSS] input, label 사용해서 이미지 슬라이드 만들기 -최종 결과 -HTML 1. 전체 영역 및 버튼 구조 잡기 div로 이미지 슬라이드 전체 영역을 잡는다. input의 타입 중 radio를 선택하고 모든 input의 name값을 같게 하여 체크 시 한 개만 선택되게 한다. checked는 처음 체크될 태그를 설정할 수 있다. input의 id 값이랑 label의 for값이랑 같게 하여 label을 클릭해도 input도 활성화된다. 2. img영역 구조 잡기 js를 사용하지 않고 버튼 클릭 시 이미지가 바뀌게 하려면 img영역을 input 태그와 형제관계로 만들어야 한다. CSS에서 인접 선택자(형제 선택자)를 사용하기 위해서다. class값을 두 개로 설정하여 CSS에서 공통 스타일은 .select_img에 스타일을 넣는다. 3. 브라우저 확인 사진 4.. 2019. 7. 29.

티스토리툴바