오늘도 기록it

function helloFunc() { console.log(1234); //실행코드 } //함수 호출 helloFunc(); //1234 function returnFunc() { return 123; } let a = returnFunc(); 반환 console.log(a); //123 function sum(a, b) { //a와 b는 매개변수(Parameters) return a+b; } //재사용 let a = sum(1,2); let b = sum(7, 12); let c = sum(2, 4); //결과 console(a, b, c); //3, 19, 6 //이름있는 함수 function hello() { console.log('Hello~'); } //익명 함수 let world = fun..

String (문자 데이터) - 따옴표를 사용 let myname="kim"; let email='kim@naver.com'; let hello =`hello ${myname}?!` console.lg(myName); // kim console.lg(email); // kim@naver.com console.lg(myName); // hello kim?! Number (숫자 데이터) - 정수 및 부동소수점 숫자를 나타냅니다. let number=123; let opacity=1.57; console.log(number); //123 console.log(opacity); // 1.57 boolean (불린 데이터) true, false 두 가지 값밖에 없는 논리 데이터 let checked = true;..

dash-case(kebab-case) [html,css] the-quick-brown-fow-jumps-over-the-lazy-dog snake_case [html.css] the_quick_brown_fox_jumps_over_the_lazy_dog camelCase [js] theQuickBrownFoxJumpsOverTheLazyDog PascalCase [js] TheQuickBrownFoxJumpsOverTheLazyDog zero-based Numbering 0기반 번호 매기기! 특수한 경우를 제외하고 0부터 숫자를 시작합니다. 주석 키보드 단축기 ctrl+/ //한 줄 메모 /* 여러 줄 메모 */

전환 효과 [transition] 요소의 전환 효과를 지정하는 단축 속성 transition-property transition-duration transition-timing-function tansition-delay 속성명 지속시간 타이밍 함수 대기시간; transition-property 전환 효과를 사용할 속성 이름을 지정 all 모든 속성에 적용 속성이름 전환 효과를 사용할 속성 이름 명시 transition-duration 전환 효과의 지속시간을 지정 0s 전환 효과 없음 시간 지속시간을 지정 transition-timing-function 전환 효과의 타이밍 함수를 지정 ease 느리게 빠르게 느리게 linear 일정하게 ease-in 느리게- 빠르게 ease-out 빠르게-느리게 ease..

container 속성 [display] flex container의 화면 출력 특성 flex 블록 요소와 같이 flex container 정의 inline-flex 인라인 요소와 같이 flex container 정의 [flex-direction] 수평[ row 행 축 (좌->우) row-reverse 행 축 (우->좌) ] 수직[ column 열 축 (위 -> 아래) column-reverse 열 축 (아래->위) ] [flex-wrap] flex itms 묶음(줄 바꿈) 여부 nowrap 묶음 없음 wrap 여러 줄로 묶음 wrap-reverse wrap의 반대 방향으로 묶음 [justify-content] 주 축의 정렬 방법 flex-start flex items를 시작점으로 정렬 flex-end ..

[position] 요소의 위치 지정 기준 - top, bottom, left, right, z-index static 기준 없음 relative 요소 자신을 기준 absolute 위치 상 부모 요소를 기준 fixed 뷰포트를 기준 sticky 스크롤 영역 기준 요소 쌓임 순서 (stack order) 중요! 어떤 요소가 사용자와 더 가깝게 있는지 결정 [어떤 요소가 위에 있는지 판단] 1. 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본 static 제외) 2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임. 3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임. z-index 요소의 쌓임 정도를 지정 -2번요소 auto 부모 ..

[background-color] 요소의 배경 색상 transparent 투명함 색상 지정 가능한 색상 [background-image] 요소의 배경 이미지 삽입 none 이미지 없음 url("경로") 이미지 경로 [background-repeat] 요소의 배경 이미지 반복 repeat 이미지를 수직, 수평 반복 repeat-x 이미지를 수평 반복 repeat-y 이미지를 수직 반복 no-repeat 반복 없음 [background-position] 요소의 배경 이미지 위치 0% 0%~100% 방향 top, bottom, left, right, center 방향 단위 px,em,rem, 등 단위로 지정 background-position: 100px 30px; (x축으로 100px y축으로 30px 만큼..

글씨체 font-style normal 기울기 없음 italic 이텔릭체 (기울어진 글자) oblique 기울어진 글자 font-weight noraml, 400 기본두께 bold, 700 두껍게 bolder 상위 요소보다 더 두껍게 lighter 상위요소보다 더 얇게 100~900 100단위의 숫자 9개 normal과 bold 이외 두께 font-size 글자의 크기 16px 기본 크기, 단위 px,em,rem 등 단위로 지정 line-height 한 줄의 높이, 행간과 유사 normal 브라우저의 기본 정의 사용 숫자 요소의 글꼴 크기의 배수로 지정 단위 px,em,rem 등의 단위로 지정 ex) font-size :16px; -> line-height : 32px; [ line-height:2;(권..

[border] - 요소의 테두리 선을 지정하는 단축 속성 border-width : 선- 두께 border-style : 선-종류 border-color : 선-색상; 기본값 medium, none, black; [border-width] border-width -> medium, thin, thick 단위 px, em, % 등 border-width 1개 -> [top, right, bottom, left] 2개 -> [top,bottom] [left,right] 3개 -> [top] [left,right] [bottom] 4개 -> [top] [right] [bottom] [left] 시계방향 [border-style] none 선없음 solid 실선 dotted 점선 dashed 파선 double..

px 픽셀 % 상대적 백분율 em 요소의 글꼴 크기 1em -> 10px rem 루트(최상위 요소) 요소(html) 의 글꼴 크기 vw 뷰포트 가로 너비의 백분율 vh 뷰포트 세로 너비의 백분율