본문 바로가기

Frontend

 (290)
[CSS] 크기 단위 1. 절대적인 단위 1-1. 픽셀 (px) 화면을 표시하는 기준이 되는 가장 작은 정사각형 예를 들어 10px = 정사각형 10개의 길이 1-2. PPI (Pixel Per Inch) 모니터에서 1인치 정사각형 안에 픽셀이 얼마나 들어가는지 촘촘할수록 모니터 세밀한 표현 1-3. 해상도 화면에 가로로 몇 px, 세로로 몇 px ex) 1280 X 720 2. 상대적인 단위 2-1. 퍼센트 부모 태그에 대해서 상대적인 크기 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면 됨 2-2. em, rem em : 인쇄에서 전통적으로 대문자 M의 크기로, CSS에서 1em = 부모태그의 font-size rem : 1rem = 최상위 태그 의 font-size 글자크기에 맞춰서 여백을 줄 수 있음.
[CSS] 색상 단위 색상단위 1. 색상이름 (color names) 영어로 된 색상이름 (red, yellow, white ... ) 세세한 색깔을 나타내기 힘들어 자주 사용되지 않음. 2. 색상코드(color codes) 가장많이 사용하는 방식 #으로 시작, 숫자와 문자로 표현한 6자리 빨강, 초록, 파랑의 세기를 각각 두 자리씩 표기한 것 (ffffff) 3.RGB 16진수 대신 평소에 쓰는 10진수로 각 빛의 세기를 표시 0 ~ 255사이의 값을 쓴다. rgb(0 ,0 ,255) = 빨강색 4.RGBA RGB 표기에다가 불투명도 (alpha)를 추가한 것 불투명도는 0 ~ 1 사이의 소숫점 숫자 rgba(255, 0, 0, 1) = 빨강색 rgba(255, 0, 0, 0.5) = 불투명한 빨강색
사전캠프 계획 ~ 5.15 1. HTML, CSS 복습 공부한지 1년이 넘어가고 자바스크립트랑 리액트 공부하느라 계속 안써버릇하니 조금 헷갈리기 시작함. 웹개발 종합반 들으면서 느꼈다. 특히 CSS 다시 공부하기. 웹개발 종합반 + 퍼블리싱 과정 복습 + 그동안 만든 웹사이트 3개 코드 다시 복습하여 개념 정리 지금 보면 웹사이트도 하루이틀안에 다 만들었고 내가 어떻게 저렇게 코드를 짰지 하는게 많음.. HTML 과 CSS 는 기초중의 기초 2. JavaScript 기본 문법은 제대로 익히기. 인간은 망각의 동물임. 계속했던것처럼 들었던 강의 다시 듣고 복습, 확실히 처음 들었을때보다 이해가 잘된다. 그 당시에는 공부하면 이게 무슨말이지 했는데 이제는 아 이게 이런 뜻이구나 라고 해야하나. 모르는 부분 계속 사용 + 블로그에 정리..
[JavaScript] 배열 메소드 indexOf/ includes/ reverse 배열에서 특정 값 찾기 (indexOf/ lastIndexOf) 1. indexOf (array.indexOf('element');) 배열에 있는 특정 요소의 인덱스 값을 반환 let brands = ['samsung', 'apple', 'asus', 'lg', 'apple'] console.log(brands.indexOf('apple')); // 1 2. lastIndexOf (array.indexOf('element');) 배열에 있는 특정 요소의 인덱스 값을 뒤에서 부터 찾아서 반환 let brands = ['samsung', 'apple', 'asus', 'lg', 'apple'] console.log(brands.lastIndexOf('apple')); // 4 3. 배열에 없는 요소의 인덱스..
[JavaScript] for ... of 반복문 (배열) for ... of 문 다음과 같이 배열의 요소를 반복할수 있음. let influencer = ['suwonlog', 'small.tiger', 'Minam.ludens', 'cu_convenience24'] /* for (변수 of 배열) { 동작부분; }*/ for (let i = 0; i < influencer.length; i++) { console.log(influencer[i]); } for (let element of influencer) { console.log(element); } for (let index in influencer) { console.log(influencer[index]); } /* suwonlog small.tiger Minam.ludens cu_convenienc..
[JavaScript] for ... in 반복문 (객체) for .. in 반복문 객체안에 있는 프로퍼티를 가지고 반복적인 동작을 할 때 사용되는 반복문. let codeit = { name: 'codeit', bornYear: '2017', isVeryNice: 'true', worstCourse: null, bestCourse: '자바스크립트 프로그래밍 기초', } for(let k in codeit) { console.log(k); // 키에 접근 console.log(codeit[k]); // 대괄호 표기법으로 값에 접근 } /* 실행결과 name codeit bornYear 2017 isVeryNice true worstCourse null bestCourse 자바스크립트 프로그래밍 기초 */
[JavaScript] 요소 노드 추가하기 요소 노드 추가하기 다음과 같은 HTML 태그가 있다고 할 때, 내일 할일을 추가해보려고 한다. 오늘 할 일 밥먹기 잠자기 공부하기 내일 할 일 책보기 게임하기 노래듣기 1. 요소 노드 생성 : document.createElement('태그이름') 원하는 태그 이름으로 요소 노드를 만들 수 있음. const first = document.createElement('li'); 2. 요소 노드 꾸미기 : textContent, innerHTML, ... first.textContent = '처음'; 3. 요소 노드 추가하기 : NODE.prepend, append, after, before tomorrow.prepend(first); method 를 호출한 젤 첫번째 노드로 파라미터로 전달한 값을 추가할 ..
[JavaScript] DOM window 객체 window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 한다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window.을 생략할 수도 있음. DOM (Document Object Model) DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델. 간단하게 표현하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.

티스토리툴바