2024/07 24

한글 입력 제한하기

한글: /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/const check_Korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;       if (check_Korean.test(값)) alert('한글입니다.');       // 아이디 텍스트 박스에 한글 입력 방지      // 1. 입력 방지할 문자열 종류 선택const korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;      // 2. 입력 요소 선택const idTbx = document.querySelector('.login-id_Tbx');idTbx.addEventListener('input', funtion() {    if (korean.test(idTbx.value)) {        // 3. 한글을 제거        idTbx.value = idTbx.valu..

1차 수업

변수 (= 변하는 수)변수는 값을 넣고 재활용하는 용도로 쓰인다.Hello World를 10번째, 100번째 줄에 치거나,1,000개, 10,000개를 쓰거나,Hello를 My로 변경해야 한다면엄청 많이 변경을 해야한다.하지만, 변수를 사용한다면 그럴 필요가 없다. const word = "Hello World";console.log(word); 변수명: word변수 값: Hello World변수 선언: const word변수 참조: console.log(word)메모리에 저장하는 과정변수 할당: const word = "Hello World"; 데이터 타입숫자 ( = 정수, 실수)문자열 문자열의 길이변수.length; 문자열 대체변수.replace("변경 전 문자열", "변경 후 문자열"); 문자열 반..

시나리오, 코드 및 기본 화면 구성 질문

개인 프로젝트 과제가 하나 나왔다!'영화 검색하기'!작년에 포트폴리오 작성 이후로오랜만이다.그래서 설레기도 하고 기대되기도 한다.화면 구상과 시나리오를 짜기 전,궁금한게 생겨서 튜터님한테 질문을 하러갔다.내가 아이멕에서 일 하면서 궁금하기도 했다.왜? 싶었지만 그 때는 물어보지 못했다. 1. 코드는 무조건 짧고 간결하게 짜야하는가. 정답은 No! 꼭 그럴 필요는 없고 무조건 짧고 간결하게 짜야한다 라는건 강박적인 생각이다.게다가 너무 줄이면 가독성이 떨어지는 경우도 있다고 한다. 2. 디자인은 사람들이 자주 이용하는 사이트를 참고하는 것이 좋은가. 정답은 Yes! (네이버, 구글, 한글, 엑셀, ppt등)하지만 지금은 자바스크립트 공부가 우선이기 때문에 너무 디자인에 집중하지 않아도 된다고 하셨다. 3...

질문 2024.07.22

글래스모피즘 css

글래스모피즘: 뒷 이미지는 투명하고 일부만 불투명하게 하는 기능 .클래스명 {                        display: inline-block;                         background: rgba(255, 255, 255, 0.2);                         border-radius: 16px;                         box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);                         backdrop-filter: blur(5px);                         -webkit-backdrop-filter: blur(5px;                        ..

자바스크립트로 캐러셀(슬라이드) 만들기 2 (scss)

/* 노말라이즈 */* {      margin: 0;     padding: 0;     list-style:none;     box-sizing: 0;  } /* 전체 슬라이드 */.slide-div {display: flex;                     flex-direction: column;                     align-items: center;                     justify-content: center;                     top: 50%;                     background-image: url(./background_image.jpg);                     background-size: cove..

자바스크립트로 캐러셀(슬라이드) 만들기 1 (html, js)

1 / 5           첫번째 페이지에요.                   2 / 5           두번째 페이지에요.                   3 / 5           세번째 페이지에요.                   4 / 5           네번째 페이지에요.                   4 / 5           마지막 페이지에요.       ❮ '모양 버튼 --> & #10095;

카테고리 없음 2024.07.19

가운데 정렬이 안될 때, 부모에 text align: center 주는 것

내가 알고있는 태그를 가운데 정렬하는 방법첫번째는, margin: 0 auto;두번째는,부모 를 하나 더 생성해서 text-align:center; 두번째 방법은 문제가 생기지 않을까?싶었지만 지금까지 문제 없었고,제일 쉬운 방법이어서 그냥 써왔다. 마침 튜터님께 질문 하다가 생각나서사용해도 문제가 되지 않냐고 여쭤보았다.내가 생각하는 그대로였다.코딩은 정답이 없어서 맞다, 틀리다, 해도 된다, 안 된다, 라고 해줄 수 없다고 하셨다. = 상관없음 하지만 부모 를 text-align:center;로 설정하면,텍스트 외 inline요소도 가운데 정렬이 되기 때문에 자식의 텍스트도 신경을 써줘야 한다고 하셨다.

질문 2024.07.18

SCSS 기초

@mixin해당 스타일 시트 내부에서 얼마든지 재사용이 가능내부에서 '&'나 또 다른 셀렉터를 포함할 수 있음 @include@mixin을 사용하기 위해 선언하는 구문셀렉터 지정 후, 내부에 @include로 @mixin을 불러오면 됨@include뒤 '( )'는 생략 가능 @mixins재사용이 가능한 스타일을 정의하는데 사용@mixin과 @include를 합쳐서 부름재사용이 가능한 스타일을 정의하는데 사용 /* html */ /* scss */@mixin test {             color: red;             margin: 0; } div {          @ include test;} 믹스인 응용하기  (IE 지원 X)line-clamp: 몇 줄 뒤에 컨텐츠를 자를지box-or..

SCSS(sass) 2024.07.17

Git 협업 프로세스 간단 세션

git휴대폰 갤러리 github클라우드, n드라이브, 구글 드라이브, iCloud repository폴더 push업로드 git add:'트레킹 할거야.'※ 대부분 git add 파일명 이렇게 안쓰고, git add . 라고 씀 commit: '저장할거야.'   VSC에서 내 github를 등록하는 방법git remote and origin https://github.com ~ 을 터미널에 복붙(origin을 변수라고 생각/ origin에 https://라는 걸 담는다고 생각) git remote -v: 어떤 값에 어떤 값이 들어있는지볼 수 있는 명령어

git&github

* VSC → Terminal → New Terminalpwd(print wording directory): 현재 작업폴더를 보여달라는 명령어   Home:데스크탑보다 상위 폴더바탕화면보다 Home이 상위폴더 ls(list): 폴더 안에 있는 폴더랑 파일 내역을 보여달라 ls -a (list all): 숨겨진 파일(보통.로 시작)을 모두 볼 수 있는 명령어 cd 폴더명 (change directory):데스크탑 안에 있는 다른 폴더로 이동 가능* 폴더명/폴더명으로 입력해서 더 상위폴더로 이동할 수 있음 mkdir 폴더명 (make directory): 현재 경로에서 폴더를 생성하는 명령어 touch 파일명:현재 경로에서 파일을 생성하는 명령어 * 정확히는 파일의 생성과 파일의 날짜, 시간을 변경하는 명령..