Minji

자바스크립트 코드 작성이 가능한 위치 1. HTML 태그의 이벤트 리스너 속성에 작성 2. 태그에 작성 나 내 어디든 가능 웹 페이지 내에 여러 번 삽입 가능 3. 자바스크립트 파일에 작성 자바스크립트 코드 파일 저장 확장자 .js 파일에 저장 4. URL 부분에 작성 자바스크립트로 HTML 콘텐츠를웹 페이지에 직접 삽입 바로 브라우저 윈도우에 출력 document.write() 예) document.write("Welcome!"); document.writeln() writeln()은 텍스트에 ‘\n＇을 덧붙여 출력 '\n'을 덧붙이는 것은 고작해야 빈칸 하나 출력 다음 줄로 넘어가는 것은 아님 document.write()로 웹 페이지에 HTML 콘텐츠 출력 prompt("메시지", "디폴트 입력값"..

1. 클래스형 컴포넌트를 사용해서 증가, 감소하는 카운트앱 만들기 App.js import logo from './logo.svg'; import './App.css'; import ImpotConponent from './comp'; import Compo from './Compo'; function App() { return ( Start React 200! CSS 적용하기 ); } export default App; Compo.js import React, {Component} from 'react'; class Compo extends React.Component{ constructor(props){ super(props); this.state = { count : 0 }; console.log(..

React 리액트는 페이스북에서 개발된 JavaScript 라이브러리, 사용자 인터페이스(UI)를 구축하기 위해 활용한다. 주요 목표는 UI를 더 간단하고, 효율적으로 구성하기 위함. 컴포넌트 기반 아키텍처를 중심으로 동작하는데 컴포넌트 : UI의 작은 부분을 독립적으로 관리하는단위, 재사용성과 모듈화를 용이하게 해준다. JSX(JavaScript XML) : 자바스크립트와 XML을 결합하여 동적인 UI 생성 가상 DOM을 활용하여 성능 최적화, 가상 DOM, DOM을 복제해서 실제 DOM과 비교하여 필요한 부분만 업데이트한다. 장점 - 컴포넌트 기반 아키텍처 : 독립적인 단위인 컴포넌트로 분리하는 디자인 패턴이다. 소프트웨어 엔지니어링 기본 원칙 : 관심사의 분리(Separation of Concern..

실행하기 npx create-react-app [프로젝트명] cd [프로젝트명] npm start

CSS3로만 HTML 태그 모양의 동적 변화 가능 자바스크립트로 구현하던 것을 CSS3로 작성 가능 3 가지 기법 지원 애니메이션(animation) 5초를 주기로 태그의 글자색을 파란색, 초록색, 빨간색으로 바꾸는 애니메이션. 무한 반복 '꽝!' 글자의 크기를 3초에 걸쳐 500%에서 100%로 서서히 축소되는 애니메이션을 작성. 애니메이션은 무한 반복한다. 전환(transition) HTML 태그에 적용된 CSS3 프로퍼티 값의 변화를 서서히 진행시켜 애니메이션 효과 생성 HTML 태그의 색이나 모양, 위치 등이 서서히 변하는 효과 전환 설정 : transition 프로퍼티 이용 변환(transform) 텍스트나 이미지를 회전, 확대 다양한 기하학적인 모양으로 출력 회전 각도의 단위는 deg이며 시계..

리스트의 모양을 꾸미는 CSS3 프로퍼티들 리스트 꾸미기 더보기 리스트 꾸미기 프로퍼티 설명 list-style-type 아이템 마커 타입 지정 list-style-image 아이템 마커 이미지 지정 list-style-position 아이템 마커의 출력 위치 지정(아이템 영역 내 혹은 영역 바깥) list-style 앞의 3개 프로퍼티 값을 한 번에 지정하는 단축 프로퍼티 마커의 위치, list-style-position 마커 종류, list-style-type 스타일을 응용하여 리스트로 메뉴 만들기 표 꾸미기 더보기 표 꾸미기 border : 표 테두리 border-collapse : collapse; /* 중복된 테두리 합치기 */ 셀 크기 제어, width height 셀 여백 및 정렬 paddi..

1. display 속성 : 요소가 어떻게 표시되는지 설정 block : 한 줄에 하나의 요소만 표시되며, 행 전체를 차지한다. inline : 한 줄에 여러 개의 요소를 나란히 표시한다. inline-block : 인라인처럼 동작하지만, 너비와 높이를 블록처럼 설정이 가능하다. 2. position : 위치 지정 정적 - static(기본값) : 일반적인 문서의 흐름에 따라 배치된다. 상대 - relative : 자기 자신을 기준으로 상대적으로 배치한다. 절대 - absolute : 부모 요소(realtive, absolute, fixed)를 기준으로 위치가 결정된다. 고정 - fixed : 브라우저 창에 고정된 위치로 유지된다. 유동 - float : left 혹은 float : right

박스 모델 CSS에서 레이아웃과 공간 배치를 다루는 개념 HTML 요소들은 모두 사각형 박스로 간주되며, 여러가지 속성을 가지고 있다. 1. 콘텐츠 영역 width, height 2. 패딩 padding-top, padding-right, padding-bottom, padding-left padding : 24px 0px 0px 24px (시계방향) 3. 테두리 영역 border-style, border-width, border-color 4. 마진 영역 margin-top, margin-right, margin-bottom, margin-left 실제 너비: width + padding-right + padding-left + border-right-width + border-left-width + ..

텍스트 꾸미기 1. font-size : 글자 크기 2. color : 글자 색 3. font-weight : 글자 두께(normal, bold) 4. text-decoration : 텍스트 장식(밑줄, 취소선 등 none, underline, overline, line-through 등) 5. text-align : 텍스트 정렬(left, center, right) 6. line-height : 줄 간격 7. letter-spacing : 문자 간격 8. text-transform : 대소문자 변환(uppercase/lowercase/capitalize) text-decoration 프로퍼티로 하이퍼링크에 밑줄 제거 네이버 font 프로퍼티 font-style, font-weight, font-size..

색상 1. 이름을 사용한 색상 지정 (140개) 2. 16진수 코드를 이요한 색상 지정 # 뒤에 16진수쌍 3개로 이루어진다. 10 진법 : 0 1 2 3 4 5 6 7 8 9 2 진법 : 0 1 16 진법 : 0 1 2 3 4 5 6 7 8 9 A B C D E F 2진법 두묶음으로 거쳐서 16진법으로 계산하면 쉬움 120 > 01111000 > 78 10진 > 2진 > 0111 / 1000 > 7 / 8 > 16진법 78 16진수 코드로 표현 10진수 코드와 RGB()로 표현 사례 3. RGB, RGBA : Red Green Blue Alpha(투명도) 4. HSL, HSLA : Hue(색조), Saturation(채도), Lightness(밝기), Alpha 색 관련 CSS 프로퍼티들 color :..