코딩 일지

목차 -자바스크립트 메서드, 속성 차이 -프로토타입 배열, 객체 -객체 속 객체 typeof = 예약어 데이터 타입 알아내는 함수 arr.length 배열 길이 알아내는 함수 push 배열 맨 뒤에다 값 하나 추가하는 행위 메서드와 속성 차이 메서드는 뒤에 () 붙는다. (액션을 취해준다.) 속성은 뒤에 () 없다. 가지고 있는 것만으로 표현한다. prototype 찍어보면 메서드, 속성 확인 가능하다. 숙지해놓자. > console.log(arr[arr.length-1]) 자바 스크립트 프로토타입 at: ƒ at() concat: ƒ concat() constructor: ƒ Array() copyWithin: ƒ copyWithin() entries: ƒ entries() every: ƒ every(..

목차 - 변수 선언 원리 - let, const - 줄바꿈 \n - 사용자 지정 함수 - return 변수정의하는 원리 let 변수 --> 변수를 선언하면 일단 단순 공간 확보를 한다. 그 뒤로 변수 값이 바뀌면 그대로 덮어쓰기 하는 것이다. var : 오래 전에 자바스크립트가 나올 때 쓰던 변수 선언 방식이다. 실제 실무에서도 거의 안쓴다. let : 가장 기초적인 변수 선언 자기가 가진 영역에서만 실행되도록 한다. (전역변수/지역변수) 원래는 같은 변수명 사용할 수 없다. code block 안에서는 ? 가능하다. 전역변수로 선언된 변수가 똑같은 이름으로 지역변수로 선언될때는 실행이 가능하다. 같은 공간에선 사용할 수 없다. 변수는 내용을 바꿀수 있다. const 값이 절대 안바뀐다. 상수니까. 아스..

목차 -사용자 정의 함수 -for문 -자바스크립트 let 사용자 정의 함수 내가 원하는 함수를 만들어서 사용할 수 있음. 사용하는 이유? 특정 역할을 반복해서 수행할경우 간편하다. 사용 형식(방법) function 함수명( 파라미터(인자) ){ 처리 내용; . . . return 반환값; } 출처: https://cofs.tistory.com/142 [CofS] 예시) function hi(name){ let result = name + "님 환영합니다."; return result } console.log(hi("청포도 에이드")); hi --> 함수명 name --> 인자(parameter) 함수 내부에서 result를 정의하여 return 값으로 반환하였다. 출력결과 for문 사용형식 for(초기문..

목차 -비트, 바이트, 진수 -예약어, 변수 -데이터타입 -배열의 인덱싱 -개발자도구 콘솔 console.log(); -객체 선언 하는 법 -객체 value값 불러내기 -연산자(산술, 연결, 비교, 논리, 증감) -if문 -for문 들어가기 전 기본 상식 ES6(국제표준) = 자바스크립트 16진수는 컴퓨터 공학 때문에 나왔다.(추정) 8 비트 = 1바이트 영어 한글자 1바이트 / 한글 한글자 2바이트 => 16진수의 탄생 니블이라는 단위 비트를 4개씩 묶는 단위(1니블 = 4비트=16가지=16진수) 2니블 = 8비트 = 32가지(2진수) = 2가지(16진수) 코인지갑주소= 16진수 0~9, a~f 사용 int 타입은 4바이트 javascript 저급 언어, 바이트 관계가 없기때문에 배우기가 쉽다. (전)..

목차 -form - (post와 get차이) -URL과 URI -display:flex -padding, margin을 어디에다 주어야 정렬이 될까? 1. 로 글 올리는 게시판 만들기. 게시판 로고 /*메인 홈페이지로 바로가는 링크, 여기에선 자기자신에게 이동*/ /*선의 표시를 위해 넣어둠*/ 번호 제목 작성자 작성일 조회수 1 ㅎㅇ /*제목을 눌렀을 때 그 글로 이동*/ 김밥 21-12-29 3 2 안녕하셈 떡볶이 21-12-29 1 글쓰기 /*누르면 메인페이지로 주소 이동하는 버튼. 귀찮아서 앵커태그로 함.*/ 출력 결과 2. 제목을 눌렀을 때 view.html라는 아래 코딩한 파일로 이동하게 할것임. 그전에, 링크를 누른다는건 (제목을 누르면) 사이트의 주소가 변한다는 것이다. 즉, html이 변..

목차 - 팝업창 만들기 - 블럭 위치 지정하기 (transform:translate) - 그림자 생성하기(box-shadow) - 여러 개의 선택자의 스타일을 동시 적용하기 - 절대 지정(다른 스타일 다무시: important) - 특정 스타일 여러번 재사용하기 - 커서 클릭했을 때 스타일 적용(focus) - 브라우저 별 스타일 다루게 적용하는 접두어 - border와 outline 차이 특정 버튼을 눌렀을 때 팝업창이 나오도록 만들기 원리는 label을 두 개 만들고 하나의 라벨에 100%*100% 뒷배경을 꽉채워 배경을 지정하는 것이다. 1. input으로 체크박스를 넣는다. 버튼 label을 하위 엘리먼트로 넣느냐 동등한 엘리먼트로 넣느냐 고민 했지만, 출력값에 변화가 없는 걸로봐서 input 박..

목차 -label for(라벨의 역할), 체크박스 -선택자 -중복 id 중에 원하는 것만 선택하고 싶을 때. -속성 선택자 -display:none; -input박스 너비조정 가능한 이유 -display: none; 를 checked에만 적용하면? -인접 접근자 -nth-child(숫자) -transition: 0.35s -메뉴 숨기기/ 보이기 (애니메이션 효과 주기) -라벨 클릭하면 바뀌는 원리 -transform: translateY(-50%); -position: fixed; -clear: both; -연습하는 법 라벨의 역할 label for="" 웹 접근성 ↑ (글자 클릭해도 눌림.) input type="text" : 인풋박스 웹접근성 늘리려면? 체크박스(온오프 스위치)도 인풋박스와 동일하다...

목차 -자간설정 -p태그 -블럭 둥글게 만들기 -텍스트 위아래 정렬 -백그라운드 이미지 추가하기 -백그라운드에 추가한 이미지 이동시키기 -border 로 블록 테두리에 선 그리기 -hover line-height: 30px; 오늘의 주의사항 1. html 영역 스케치 먼저하는 게 편함. 2. 로고는 사용 3. ul, li 모두 블럭 속성 4. float:left; 는 inline효과도 주지만, 기본적으로 아래에 있는 애들(자손 엘리먼트가 블럭이어도 ex) )이 블럭이어도 옆으로 붙는 효과 5.바로 위 엘리먼트도 같이 레프트를 적용하면, 같이 인라인속성 취급되기 때문에 옆으로 바로 붙게됨 6. 블럭으로 바꿨으면 너비 지정하기(블럭은 한 줄을 다 차지하는 성질이기때문에 반드시 너비를 지정해주어야한다) 7.웹..

1. text-align: center 정렬대상이 inline 요소일 때 사용하는 방식이다. 정렬할 때 부모 block 요소를 가진 부분에 적용을 하면된다. inline 요소에 text-align: center를 했을 때 적용되지 않냐면 inline 요소는 content의 넓이만큼(글자크기, 글자수)만 공간을 차지하기때문이다. text-align: center 를 적용시켜도 이미 딱 그 요소의 넓이만큼만 공간을 차지하고 있으니 움직일 공간이 없다. 그래서 부모 block 요소에 적용을 해야한다. block 요소는 기본적으로 한줄을 다 차지하기 때문이다. 그러면 그 요소에 속한 inline 요소들이 정렬된다. 2. margin: 0 auto 이 정렬방법은 정렬대상이 block 요소일 때 사용하는 방식이다...

목차 -반드시 알아야할 사실 -width, height -인라인->블럭속성으로 변경 -가운데 정렬하기 -링크 # -리스트 동그라미 없애기 -margin과 padding 초기값 설정 -float -엘리먼트 붙여서 출력 -로고 이미지 업로드 및 링크 연결 -하이퍼링크 언더 라인 지우기 -가운데정렬, 글자 굵게 -postion:absolute vs position:relative -z-index -투명도 설정 오늘의 목표 : 홈페이지 이미지 위에 div 태그 올리기(겹치기) 만들기 전에 알고 들어갈 사실! 1. 는 블럭속성을 갖고 있다. 그렇기 때문에 여기에 너비 높이 설정해서 블럭이 작아져도, 한 블럭 다 차지하는건 변함없다. 2. 안에 새로운 div 태그를 넣을 시(가둘 시) 이 div는 부모 div 안에..