하얀 코딩

String 객체 함수와 똑같이 쓰이는 메서드! 이번 글에서는 Array에서 쓸 수 있는 전용 객체 함수만 다루어 봅니다. 밑에는 사용법은 String 객체 함수와 똑같기에 설명은 따로 하지 않습니다. Array.prototype.includes() Array.prototype.indexOf() Array.prototype.lastIndexOf() Array.prototype.slice() nameB) { return 1; } // 이름이 같을 경우 return 0; }); Array.prototype.reverse() reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다. a.reverse() 1. return 순서가 반전된 배열..

CLI(Command-Line Interface) 입력하는 글자와 출력되는 글자로 컴퓨터와 소통할 수 있다. CLI의 명령줄 대기모드를 가리키는 것으로써, 터미널 화면에서 글자가 입력되는 한 줄의 공간을 prompt라고 한다. 가장 최상위 폴더를 루트 폴더라고 한다. 터미널 들어가기 crtl + alt + t crtl + c : 작업 취소 복사: (Ubuntu) Ctrl + Shift + c 붙여넣기: (Ubuntu) Ctrl + Shift + v 명령어 기본 개념 숙지 하기! 1. 옵션을 뜻하는 대쉬(dash, -) 뒤에 오는 옵션의 순서는 기능에 영향을 미치지 않습니다. 2. 폴더 또는 파일의 이름에 공백(띄어쓰기)이나 특수문자가 있으면, 백슬래시()를 이용해 적용합니다. 3. 루트폴더로 이동하여 명..

스타벅스를 대표하는 시그니처 컬러로 구성해 보았습니다. CSS gradiant 속성을 다수 이용하여 입체감과 테마에 맞는 색 조화를 이룸. hover와 active를 이용하여 버튼 동적 구현 (GIF 용량이 매우 커 이미지만 올렸습니다.) HTML + CSS (배치, 형태) 작업보다 디자인 작업 시간이 2~3배 더 걸림 ㅡㅡ….ㅠ

정의 자식이 부모에 차지하는 공간을 맞추고 크기를 키우거나 줄이는 방법을 설정하는 방법. 위치 배치는 배치할 대상의 부모에 display : flex를 사용하여 메인축과 메인축 기준의 수직축으로 2개의 축을 이용하여 정렬을 하게 된다. 메인축 방향의 디폴트값이 가로로 설정 되어 있기에 반드시 알고 갈 것! flex-direction 1. row (default) : 가로방향 2. column : 세로방향 3. row-reverse : 가로방향 (반대) 4. column-reverse : 세로방향(반대) flex-wrap nowrap (defalut) : 줄바꿈 하지 않음. wrap : 줄바꿈 함 row-reverse : 밑에서 부터 위로 줄바꿈 함 justify-content align-items jus..

1. 기본 셀렉터 전체 셀렉터 전체 셀렉터는 문서의 모든 요소를 선택합니다. * { } 태그 셀렉터 태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다. h1 { } div { } div, h1 { } div, h1, h2, b { } ID 셀렉터 ID 셀렉터는 #id로 입력하여 선택합니다. #only { } #coper { } class 셀렉터 class 셀렉터는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택합니다. .widget { } .center { } attribute 셀렉터 attribute 셀렉터는 같은 속성을 가진 요소를 선택합니다. a[href] { } /* 지정된 어트리뷰트를 갖는 모든 요소를 선택한다. */ p[id="..

기본 스타일링 색상 : color (background-color, border-color) 글꼴 : font-family 굵기: font-weight 밑줄, 가로줄: text-decoration 자간: letter-spacing 행간: line-height 정렬 가로로 정렬할 경우 text-align을 사용합니다. 유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있습니다. 글자 크기 값 절대 단위: px, pt 등 상대 단위: %, em, rem, vw, vh 등 부모나 현재 크기에 계산 % , em 에 정해진 크기에 계산 vw, vh, rem block vs inline-block vs inline block inline-block inline 줄바꿈 여부 줄바꿈이 ..

HTML(HyperText Markup Language) 1. 웹 페이지의 틀을 만드는 마크업 언어. 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성됩니다. 2. 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다. 3. HTML 태그는 태그 이름을 꺾쇠 괄호()로 감싸서 표현합니다. 4. HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성됩니다. 5. 종료 태그는 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시(/)가 존재합니다. 6. 태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 존재합니다. ex) : 빈 태그(empty tag)라고 합니다. 기본 구조 : ..

반복문 for of는 요소 출력으로 쓰인다. for in(dex)은 인덱스 출력으로 쓰인다. 반복문은 정의, 설명 보다 사용법이 제일 중요. 다양한 예제들을 보며 해석하자. // 2 이상의 자연수를 입력받아 2부터 해당 수까지의 소수(prime number)들을 리턴. function listPrimes(num) { let count = 0 let result ='' for(let i = 2; i true