본문 바로가기

Language

(48)
[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..