비전공자의 개발 도전기

과제 두가지를 받았다.우선 이젠 이해는 가는 css를 먼저 해보았다. div태그를 하나 만들고 아래와 같은 CSS 효과를 적용해보기1. 처음 빨간색으로 배경화면 채우기 100px * 100px2. 애니메이션 시작시점 노란색 적용3. 50%시점에서 초록색 가로로 길이가 증가 가로 300px4. 100%시점 파랑색에 세로 길이도 300px로 증가 div class="sample2">sample2div>    style>        .sample2 {            background-color: red;            width: 100px;            height: 100px;            /* animation-name: changeColor;            animat..

Transition : 스타일 속성값 변경 ⏩ transition 단축 속성     - transition: property, duration, timing-function, delay;     - [전환 효과] [지속 시간] [진행 속도] [지연]     - [ex] .element {                                               ➡️      .elment {                    transition-property: width;                                  transition: width, 1s, ease-in, 0.3s;                   transition-duration: 1s;            ..

Animation :  transition(전환 효과)을 부드럽게 제어                   특정시점에 대한 설정값을 주어 연속되어 전환되도록 함 ⏩ @keyframes : 애니메이션이 지정되는 각 단계의 시점에 대한 설정값     - 이를 적용하려면 animation 속성을 사용해야함     - animation-name & animation-duration는 함께 사용     - 생김새        @keyframes animation-name{             from { 애니메이션의 시작 상태 }             to { 애니메이션의 끝 상태 }        ➡️ 'from' = 0%(애니메이션의 시작), 'to' = 100%(애니메이션의 끝)        + 애니메이션의 중..

웹개발로 배우는 자바스크립트 기초 - YouTube 웹개발로 배우는 자바스크립트 기초 www.youtube.com 1. selextor안녕하세요 document.getElementById('hello').innerHTML = '안녕';document - 웹 문서. - ~의, ~안에 있는get 가져오다 elemnt html요소 byid id에 의해서 근데 id는 hello야inner내부글자= 웹문서 ID hello인 HTML요소 가져와 내부글자를 '안녕'으로 바꿔줘 document.getElementById('hello').style.color = 'red';색상을 빨갛게 변경 document.getElementById('hello').??? = ???';  2. alertweb에 존재하는 ui 종류는모달..

자바스크립트로 백엔드, 앱 들도 만들 수 있다. 변수, 함수, 조건문, 반복문기본이 된다. 변수 : 상자(변수)안에 값을 담는 개념자바스크립트는 유연해 알아서 입력되는 경우가 많다= -> 오른쪽에 있는 걸 왼쪽에 넣는 다는 의미== -> 같다var : 변경가능let : 변경가능, 일반적const : 바뀔 수 없는 변수 생성 함수function 함수이름(들어가는 값[입력값]) {                                 들어가는 식                                  return(결과를 돌려주다) } 입력,출력 없을 수 있다ex) function add(x,y) {               let temp = x + y;               return temp..

[네트워크 통신] HTTP는 Stateless(무상태) 프로토콜 이다.상태를 기억하지 않고 요청한 상태만 처리 ➡️ 저장을 하고 있지 않다. Accept: ~~~~,~~~,                      */* -> 모든 타입에 받겠다. HTTP 메서드 상태 코드 GET 데이터 조회 요청  www.naver.com/blog/300/article/1  -> 1번글을 요구한다.  POST 데이터 전송해 등록 요청  www.naver.com/blog/300/article/edit  -> 글을 작성하고 있는 것 전송 PATCH 부분부분 수정 PUT 전체 수정 DELETE 데이터 삭제OPTIONS 서버가 어떤 메서드를 지원하는지 알아볼때 HEAD GET과 동일, 하지만 시작 행과 헤더만 변환 받아 TRAC..

var mailTitile = document.querySelector('#main-title small');        consol.log(mailTitle);        var ilbuni = document.querySelector('.ibuni');        consol.log(ilbuni);        // querySelector는 여러개라도 첫번째것만 가져온다        // 다 가져오고 시픈데? => querySelectorAll        // 그래도 하나만 가져올래 => querySelectorAll로 가져와 console.log(ibuni[1]);로 []개체 가져오기        // 자바로 보더 넣기        ilbuni[0].style.border = '1px so..

//함수        function sample() {            console.log('ㅋㅋㅋㅋ')        }        function 함수이름() {            실행 코드        }        함수이름(); //->호출해 출력되도록        sample();        // a와 b는 더하기 함수의 매개변수(parameter)        function 더하기(a, b) {            console.log(a + b);        }        더하기(1, 100); //1 + 100 -> 101출력        // function 더하기2(a, b) {        //     return a + b; //리턴값        // }     ..

var a = 100;        var mesaage = "\'엄마가 그런 짓 하면 안돼!'\ 라고 하셨어요.";        // \문장부호를 쓰려는 곳 앞에 넣어 비교        var b; // 값이 없어서 console.log를 쳐도 undefined(정의되지 않음)이 뜬다 //        // boolean (true, false)        consolelog(1 > 100); // false        consolelog(1 100); // true                // console.log(typeof a); //        // string : 문자열 ''안에 없는 건 숫자 //        //기본(원시) 데이터 타입//        var a = 100;    ..

너무 절망만 많이 한 것 같아 배운 내용 복습 겸 완성해야하는 포폴겸 유튜브를 보고 차근차근 해보기로 하였다. 유튜버 '타모 디자인'에 빠르게 정리가 잘 되어 있길래 보게 되었다.듣고 나니 왜 그렇게 힘들어 했는지 모르겠다.혼자 복기 하는 건 천천히 필요할때 공부하는 거고 간단한 필수만 되짚어야 했었는데 너무 무겁게 생각했다.이래서 매일 흥미로 시작한 공부도 포기했던 거구나... 근데 태그를 보고는 알겠는데 완전히 아는게 아니라 그런가 게임을 할땐 진짜 모르겠던데...ㅜ1. block 과 inline 태그의 차이 (div, span)block tag : div : 가로로 붙는 것 처럼 보인다 (하지만 배경색을 넣어보면 알 수 있드시 한줄 전채를 차지하고 있는 중)inline tag : span : 세로로..