비전공자 개발일기

표기법 dash-case(kebab-case) snake_case camelCase PascalCase 데이터 종류(자료형) String: 문자 데이터, 따옴표를 사용 let myName = "ABC"; let email = 'abc@abc.com'; let hello = `Hello ${myName}??`; console.log(myName); // ABC console.log(email); // abc@abc.com console.log(hello); // Hello ABC?? Number: 숫자 데이터, 정수 및 부동 소수점 숫자 let num = 123; let opacity = 1.57; console.log(num); // 123 console.log(opacity); // 1.57 Boole..

CSS 속성(Properties) 박스 모델 글꼴 & 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 1. 박스 모델( 내부 & 외부 여백, 가로 & 세로 등) width / height : 요소의 가로 / 세로 너비 기본값(요소에 이미 들어있는 속성의 값): auto(브라우저가 너비를 계산) 단위: px, em, vw 등 span(인라인 요소) vs div(블록 요소) span(인라인 요소) div(블록 요소) 가로 콘텐츠의 크기만큼 자동으로 줄어듬 부모 요소의 크기만큼 자동으로 늘어남 세로 콘텐츠의 크기만큼 자동으로 줄어듬 콘텐츠의 크기만큼 자동으로 줄어듬 max-width / max-height: 요소가 커질 수 있는 최대 가로 / 세로 너비 기본값: none(최대 너비 ..

선택자 { 속성1: 값1; 속성2: 값2; /* 주석 */ ... } 선택자: 스타일을 적용할 대상 속성: 스타일의 종류 값: 스타일의 값 선언 방식 내장 방식: 의 내용으로 스타일을 작성(HTML) 인라인방식: 요소의 style 속성에 직접 스타일을 작성(선택자 없음, HTML) 링크방식:로 외부 css문서를 가져와서 연결하는 방식(병렬 방식) @import방식: css의 @import규칙으로 css문서 안에서 또 다른 css 문서를 가져와서 연결하는 방식(직렬 방식) @import url("") div { .... } CSS 선택자 기본선택자 전체 선택자: 모든 요소를 선택(*) 태그 선택자: 태그를 선택 (태그명) 클래스 선택자: (.class명) 아이디 선택자: (#아이디명) 복합선택자 일치 선택..

프론트 엔드 개발자: HTML, CSS, Javascript를 사용해 데이터를 그래픽 사용자 인터페이스로 변환하고, 그것으로 사용자와 상호작용 할 수 있도록 하는 것 HTML: 웹의 구조 CSS: 웹의 정적 표현(시각적) Javascripit: 웹의 동적표현 특수 문자 ` : 백틱, 그레이브(Tab 위의 키) ~ : 틸드, 물결 표시(Tab 위의 키) ! : 느낌표, 엑스클러메이션 @ : 앳, 골뱅이 # : 샾, 넘버, 우물점 $ : 달러 % : 퍼센트 ^ : 캐럿 & : 앰퍼센드 * : 에스터리스크, 별표 - : 하이픈, 대쉬 _ : 언더스코어, 로우대쉬 = : 이퀄, 동등 " : 쿼테이션, 큰 따옴표 ' : 아포스트로피, 작은 따옴표 : : 콜론 ; : 세미콜론 , : 콤마, 쉼표 . : 피리어드, ..

관계형 데이터 베이스Relational Database) 용어 릴레이션(Relation): 2차원의 테이블(엑셀의 스프레드 시트) 오직 하나의 레코드 타입만 포함 한 애트리뷰트 내의 값들은 모두 같은 유형 순서는 관계없음 동일한 튜플이 2개 이상 존재하지 않음(원자성) 순서는 관계없음 레코드(Record): 릴레이션의 각 행 튜플(Tuple): 레코드 애트리뷰트(Attribute): 릴레이션에서 이름을 가진 하나의 열 도메인(Domain): 한 애트리뷰트에 나타날 수 있는 값들의 집합, 원자성, 데이터 타입, 동일한 도메인이 여러 애트리뷰트에서 사용될 수 있음 차수(Degree): 한 릴레이션에 들어 있는 애트리뷰트들의 수 카디널리티(Cardinality): 릴레이션의 튜플 수 널 값(Null): 아직 ..

캔버스(CANVUS) 만들기 주요 기능 저장 삭제 색상 변경 전체 덮기(Paint) / 선으로 그리기(Fill) 선 굵기 변경

개요 Javascript with HTML Javascript with CSS Event localStorage Javascript with HTML console에서 document라고 입력하면, 본인이 작성한 HTML 코드가 나옴 이를 활용해, HTML의 정보 변경도 가능(새로고침을 하게 되면 변경한 기록은 다 지워짐) document = Web page HTML에 Javascript 연동시, 에 삽입 getElementById(" ") = querySelector("# ") const a = document.getElementById("아이디명") const a = document.querySelector("#아이디명") querySelector( ) VS querySelectorAll( ) VS ..