본문 바로가기

분류 전체보기

 (149)
CSS 뷰포트 CSS 뷰포트 브라우저 에서 Viewport 는 화면 크기 표시영역을 말합니다. viewport meta 태그를 도입해 웹 개발자들이 viewport 크기와 scale을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대부분 모바일 브라우저들도 이를 지원합니다. 모바일 브라우저에서 viewport가 중요한 이유 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려고 하니 전체적인 페이지의 배율이 조정되는 것입니다. 결과적으로 모바일 화면에 맞도록 전체적인 페이지가 축소되어 보이지만 페이지의 컨텐츠는 배율 축소가 발생해 가독성이 떨어지게 됩니다. 바로 이때 viewport를 설정하면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있습니다. 사용방법 head 태그 사이에 다음을 코드로 입..
css 다중 선택자와 css 클래스명 띄어쓰기 css 다중 선택자로 여러 요소를 동시에 선택해서 적용 할수 있다. 1.공백없이 클래스끼리 붙어있는 경우 .class1.class2{} ex)-.name1.name2 클래스 속성 내에 name1과 name2가 모두 설정된 모든 요소를 ​​선택합니다. 2.쉼표가 있는 경우입니다. element, element, element { style properties } css 선택자 목록(,)은 일치하는 모든 요소를 선택합니다. 쉼표로 구분한 목록을 한 줄에 배치할 수 있습니다. h1, h2, h3, h4, h5, h6 { font-family: helvetica; } 3. 공백으로 연결해서 사용 하면 하위 개체로 지정합니다 . .a .b .c a클래스 내부의 b클래스 내부 c클래스요소에만 스타일 적용합니다. 특..
a태그 a태그란? href특성을 통해 다른 페이지나 다른 url로 연결할수 있는 태그입니다. 속성 href 연결할 주소 지정 -ex 절대경로 상대경로 target 링크를클릭할때 창을 열수있는 속성 -ex _blank 새창으로 열때 사용합니다. title 해당 링크에 커서를 올리면 네이버이동 active 는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다 즉 클링했을떄 상태입니다. - ex a:active { color: red; } 클릭하는 동한 빨간색이 됩니다.
css font-family 그리고 웹 폰트 font -family 글씨폰트를 지정하는 속성 입니다. 지정하는 서체가 사용자가 가지고 있어야 합니다. 사용자 컴퓨터에 설치되어있지 않은 경우 다음선언된 폰트를 찾습니다. 없을 경우 대한 서체를 함께 넣어줘야 합니다. 예문 font-family: Gill Sans Extrabold, sans-serif; arial, helvetica,arial, helvetica, arial, helvetica, 아니면 웹 폰트 웹폰트를 사용해서 온라인에 서버에서 파일을 다운로드하여 화면에 보여주는 폰트입니다. 구글에서 필요한 스타일들을 체크한후에 여기에 있는 부분을 복사해와서 css 코드로 이렇게 font-family: 'Roboto', sans-serif; 사용을 합니다
LifeCycle API (1) lifeCycle 은 리액트의 생명주기 입니다. 크게 3가지로 나눠집니다. 1.나타날 때 2.업데이트 될 때 3. 사라질때 -Mounting 컴포넌트가 화면에 나타날 때 -Updating 컴포넌트에 prop가 바뀌거나 state가 바뀔때 -Unmount 컴포넌트가 사라질 때 constructor 리액트가 실행될떄 가장먼저 실행되는 함수 하는 일은 State의 초기 설정 또는 컴포넌트가 만들어지는 과정에서 미리 해야되는 것들을 하는 작업들을 하는 것 getDerivedStateFromProps props로 받은 값을 state에 다가 동기화 시키고 싶을 때 또 마운팅 과정에서 나 또는 렌더 과정에서 Props가 바뀔때 사용됩니다. render 함수는 어떤 돔을 만들게 될지 내부에 있는 태그들에 어떠한 값을..
참조 2 let a = 1; function func(b){ b = 2; } func(a); console.log(a) 다시 예를 들자면 a의값은 b가되니깐 b=a 라고하면 b=2 이지만 a=1 입니다. 함수 안에서 b의값을 2로 선언해도 a의 값에는 영향이 가지 않습니다. 다른 예제를 보자면 let a = {'id':1}; function func(b){ b = {'id':2}; } func(a); console.log(a.id); // 1 변수에 담겨있는 값이 객체이면 b=a 라고 선언했지만 b = {'id':2}; 이라고 새로운 객체를 만들었기 때문에 a.id는 1입니다. let a = {'id':1}; function func(b){ b.id = 2; } func(a); console.log(a); a={..
참조 전자화된 시스템의 가장 중요한 특징은 복제입니다.. 현실의 사물과 다르게 전자화된 시스템 위의 데이터를 복제 하는데는 비용이 거의 들지 않습니다. 바로 이러한 특징이 소프트웨어를 기존의 산업과 구분하는 가장 큰 특징일 것입니다. 프로그래밍에서 복제가 무엇인가를 살펴봅시다. let a = 1; let b = a; b = 2; console.log(a); // 1 결과는 1입니다. 변수 b의 값에 변수 a의 값이 복제된 것입니다. 참조는 영어로 레퍼런스라고 합니다. let a = {'id':1}; let b = a; b.id = 2; console.log(a.id); // 2 a.id값을 바꿔도 b.,id값이 바뀌고 b.id값을 바꿔도 a.id값도 바뀝니다. 이것이 참조입니다. let a = {'id':1}..
원시 데이터 타입 원시 데이터 타입(기본) VS 객체 데이터 타입(참조) 원시 데이터 타입은 숫자 ,문자,불리언(true/false),null,undefiend (primitive type)이라고 합니다. let str = 'coding'; console.log(str.length); // 6 console.log(str.charAt(0)); 이상한게 있습니다. 문자열은 원시 데이터 타입인데 srt.charAt(0)은 객체 처럼 보입니다. 정식 명칭은 Object access Operator 객체 접근 연산자입니다. srt. 여기에 점은 객체입니다. srt은 객체입니다. 좀 혼란스러울수 있습니다. 문자열을 제어하기 위해서 몇번째 자리인가 또는 몇개의 글자가 있는가 어떠한 작업을 하기 위해서는 문자열을 객체데이터로 작업을 ..

티스토리툴바