본문 바로가기

분류 전체보기

(90)
[JavaScript] function(함수) 함수엔 input과 output이 중요하다. 하나의 함수에 한가지 일만 하도록 작성한다. 함수를 무언가를 동작하는 것이기 때문에 동사형태로 이름을 지정해야 한다. 자바스크립트에서의 함수는 타입이 없기 때문에 숫자가 문자열로 변환되어 출력된다. 다른 함수에서 타입이 중요한 경우 자바스크립트가 난해할 수 있다. 이것을 보완하고자 typescript가 나왔다. typescript는 명확하고 개발을 더 쉽게 만들어준다. 데이터 반환하기| function addTen(num) { return num + 10; } const result = addTen(5); console.log(result) //15 텍스트 문자열의 연결| function textConcatenation() { const text = "1 더하..
[JavaScript] Object(객체) 추가, 수정, 삭제, 복제, 접근 반복문에서 배열의 순서가 중요했다면 객체는 순서가 없기 때문에 index number를 기억하지 않고 key 값에 접근할 수 있다. 객체에 접근하는 방법 · Object Literal : 중괄호 안에 property(객체 내부의 값)와 method(객체 내부의 함수) 나열 · Dot Notation : 점 표기법으로 '.'(점)을 이용 · Bracket Notation : 대괄호를 이용하여 객체에 접근 Object Literal function iAmGround() { const myself = { name: 'JN', bloodType: 'A형', mbti: 'INTJ', favoriteCoffee: '아이스블론드바닐라더블샷마끼아또' } return myself; } console.log(iAmGrou..
[JavaScript] 반복문|for문 반복문 반복문은 무한으로 코드를 반복해준다. * for문의 구조 for(초기화; 조건문; 증감식) { //반복 구문 } * 조건문이 true면 {반복 구문}이 실행된다 → 증감식 → 조건문 true → 반복조건이 실행 ex. 0~5까지 반복 function forLoops() { const array = []; for(let i = 0; i = 0; i--) {reverse.push(arr[i]) console.log (reverse) } /* 결과 [9] [9, 6] [9, 6, 4] [9, 6, 4, 3] [9, 6, 4, 3, 1] */ {}에서 console.log의 위치가 밖에 있냐, 안에 있냐에 따라 값은 달라진다. ex. 배열의 합계 function arrayLoop() { const myA..
[JavaScript] 배열(Array) 배열(Array) : 순서대로 여러개의 데이터를 저장한다. index|배열된 요소에 접근, 확인, 수정 다차원배열(multi-dimensional array)_1 function multiArray() { const myArray = [["becoming", 29], ["developers", 30]]; return myArray; } console.log (multiArray()) 다차원배열(multi-dimensional array)_2_문자 array에 접근 function getElement() { const arr = [3, [5, ["array", 8], 2 + 3], [0]]; return arr[1][1][0]; } console.log (getElement()) //array arr[0]..
[JavaScript] 연산자 종류와 if 조건문 if 조건문에 비교 연산자를 사용할 수 있다. 연산자 종류 종류 기호 문법 의미 비교 연산자 == A==B A와 B가 같은가? != A!=B A와 B가 다른가? === A===B A와 B가 일치하는가? (type까지 고려) !== A!==B A와 B가 일치하지 않는가? >, 3, A=, =3, A= 21) { return "Nice to meet you, " + name + "!" } } const output1 = checkAge('Min', 21); const output2 = checkAge('Seok', 17); console.log(output1); //Nice to meet you, Min! ex3. string 문자열이 동일하면 true, 동일하지 않으면(else) false를 반환한다. f..
[JavaScript] 함수로 숫자의 합과 문자열 갯수 구하기 함수(function) 함수는 작업을 수행하기 위한 코드 블럭으로 자바스크립트의 객체(함수와 변수의 연관된 것들을 그룹화하는 도구)이다. 함수로 두 개 숫자의 합 구하기 const a = 12345; const b = 67890; function sum() { console.log(a + b) } sum() //80,235 함수로 문자열의 갯수 구하기 const word = "JUST DO IT" function getStringLength() { console.log(word.length) }; getStringLength() //10
[JavaScript] 문자열 길이 구하기 자바스크립트로 문자열 길이를 구할 수 있다. ex.1 const str = "EEE"; console.log(`${str.length}`); 결과값 : 3 ex.2 const word1 = 'green' const word2 = 'red' const word3 = 'black' const length1 = word1.length; const length2 = word2.length; const length3 = word3.length; console.log(length1 + length2 + length3) 결과값 : 13
[HTML] 자주 사용하는 태그 (div, p, span 차이) HTML에서 자주 사용하는 태그 참고 요소 내용 문서 제목 외부 리소스 연결 본문 외부 스크립트 포함할 때 사용하며 보통 JavaScript 코드와 함께 사용 제목 href 특성을 통해 다른 페이지를 url로 연결할 수 있는 하이퍼링크 (단독 사용x) 이미지 삽입 줄바꿈 block 요소|문단 block 요소|class나 id 속성으로 꾸밀 수 있는 컨테이너 inline 요소|특별한 기능은 없으며 CSS 적용시 사용 버튼 삽입 표 정렬되지 않은 목록 숫자 목록 목록의 항목 데이터 입력 문장 입력 양식 그 중 헷갈리는 , , 는 하나의 문단을 나타냅니다. 순수 컨테이너입니다. 은 하나의 구문을 나타냅니다. 포함여부 div - p, span p - span span - x 참고 : https://develop..
[HTML] Semantic Web, Semantic Tag : 의미론적 웹과 의미론적 태그 Semantic Web은 기계가 웹페이지에 표현된 의미를 이해하고 해석 가능하게 하는 차세대 지능형 웹 기술이다. HTML에서 사용되는 나 태그는 비의미적은 요소이다. 컨텐츠의 의미를 강화하고 역할을 명확히 하여 태그에 의미를 부여한 것을 Semantic Tag라고 한다. 특별한 기능은 없으나 탐색에 용이하고 정보의 가치를 올려준다. Semantic Tag를 사용하는 이유는? 1️⃣ 접근성이 좋다. - 영역을 정의함으로써 시각적으로 즉시 눈에 들어온다. - HTML 태그를 읽고 이해하기 쉽다. 2️⃣ 태그 내 컨텐츠의 역할을 나타내기 때문에 SEO(검색 엔진 최적화)의 이점이 있다. 3️⃣ 구조가 명확하게 나누어져 있어 최적의 화면을 구현하기 쉽다. 4️⃣ 코드를 수정하는 등 유지보수가 편하다. 이미지를..
[CSS] Position relative와 absolute 활용 HTML가 순서대로 작성한 코드대로 화면에 보여졌다면, CSS의 Position 속성은 원하는 요소에 위치를 지정(속성:top, bottom, left, right)할 수 있다. Position의 사용값은 5가지이다. static : 기본값 relative : 기본 위치에서 상대적으로 배치 absolute : 가장 가까운 상위 요소 기준으로 배치 fixed : 지정된 위치에 고정 sticky : 스크롤시 상위 요소 기준으로 지정된 위치에 고정 아래 이미지를 구현 1. HTML 구조 [HTML] 태그로 검색어 입력창을, 태그로 돋보기 이미지를 추가한다. 두 개의 요소를 로 감싸준다. 2. 스타일링 [CSS] div { position: relative; → parents width: 300px; } inp..