비전공자 개발일기

표기법 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명) 아이디 선택자: (#아이디명) 복합선택자 일치 선택..