전체 글 41

[CSS] em과 rem 비교 (feat. 브라우저 기본 설정 폰트 크기)

1)공통 em과 rem 단위를 쓰면 디자인이 유연해지면서 고정된 크기에만 머무는 게 아니라 구성 요소의 크기를 늘리고 줄이는 게 가능해집니다. 브라우저 사용자는 전체 사이트의 크기를 조절해 가면서 읽기에 가장 적합한 환경을 손수 구성할 수도 있습니다. 2)em 단위의 한계 (연쇄 상속) 일반적으로 폰트 크기는 px 혹은 vw와 같이 상속에 영향을 받지 않는 단위를 지정해주지 않는 한 자동으로 상위 요소로부터 그 값을 상속 받는다. 그런데 이 상속으로 인해 em 단위를 가지고 작업을 할 때 복잡한 상황에 처할 수 있다. em 단위는 사용된 요소의 폰트 크기에 따라 결정됩니다. 그런데 사용된 요소의 폰트 크기는 상위에 있는 요소로부터 폰트 크기를 상속 받았을 수도 있고, 그 상위 요소도 마찬가지로 그 위의 ..

[HTML,CSS] 2023.04.25

[CSS] 가운데 정렬하는 방법 - text-align과 line-height 심화 / flex 비교

1)display:flex;/ justify-content:center;/ align-items:center; 가운데 정렬하는 쉽고 간편한 방법이 있다. 아래와 같이 가로 세로 가운데 정렬이 잘 된다. 참고로 image 크기를 키우면 이미지가 다른 영역 위까지 뻗는다. img{ width:50px; } 2)text-align과 line-height 텍스트를 가운데 정렬할 수 있는 text-align, 줄 높이를 활용해 세로 가운데 정렬할 수 있는 line-height를 계속 사용해보고 싶었다. 두번째 요소는 가로 세로 모두 가운데 정렬이 잘 되었다. 하지만 이미지 태그가 있는 첫 번째 요소의 경우 수직 가운데 정렬이 잘 되지 않는다. 심지어 태그의 사이즈를 키울 수록 '1'의 수직 가운데 정렬은 틀어진다..

[HTML,CSS] 2023.04.22

[HTML,CSS] CSS 기본 단위(px, em, rem, % 등) 및 브라우저 영역viewpoint 기준 단위(vw,vh)

1.CSS의 기본 단위 CSS의 단위로는 절대 단위와 상대 단위가 있다. 절대 단위로 px, 상대 단위로 em, rem, vh, vw 등이 있다. 대부분의 브라우저에서는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 로 이루어져 있다. 1)절대 단위 px 반응형 웹에는 적절하지 않다. 그렇기 때문에 웹 디자인할 때에는 px 를 권장하지 않는다. 2)상대 단위 (1)em과 rem em은 실제 사용된 요소의, rem은 최상위(루트) 요소( 태그)의 글자 크기(font-size)를 기준으로 가변한다. 즉 em과 달리 rem은 태그 요소의 글자 크기만 참조한다. 등 다른 태그의 글자 크기와 상관없다. em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다고 잘못 알려져 있다. W3 명세서의 의..

[HTML,CSS] 2023.04.20

[CSS] SCSS와 Bootstrap From GPT

(1)SCSS SCSS(또는 Sass)는 CSS 전처리기(preprocessor)로서, CSS의 기능을 확장하고 개발자가 작성한 코드를 더욱 효율적으로 관리할 수 있도록 돕는 도구입니다. SCSS는 변수, 조건문, 반복문, 함수 등의 기능을 제공하여 CSS 작성 시 중복되는 코드를 줄이고, 코드의 가독성을 높이며 유지보수성을 향상시킵니다. (2)Bootstrap Bootstrap은 웹 개발에 널리 사용되는 오픈소스 프론트엔드 프레임워크입니다. Bootstrap은 HTML, CSS, JavaScript를 이용하여 모바일 우선 디자인, 반응형 웹 디자인 등을 쉽게 구현할 수 있도록 돕습니다. Bootstrap은 CSS 전처리기인 Less와 Sass(SCSS)를 이용하여 스타일링 코드를 작성합니다. (3)관계..

[HTML,CSS] 2023.04.19

[Javascript] 산술연산자시 문자열 자동 형 변환

문자열과 배열 데이터의 경우 '+' 연산자를 활용해 데이터를 합칠 수 있음. 그 외 '*'와 같은 산술 연산자는 적용되지 않음. 다만 숫자일 경우 형 변환되어 산술된다. 파이썬은 '*' 연산자를 통해 문자열과 배열 데이터 반복이 가능하다. console.log('20'+'10'); //'2010' (string) console.log('20'-'10'); // 10 (number) console.log('20'*'10'); // 200 (number) console.log('20'/'10'); // 2 (number) console.log('20'%'10'); // 0 (number)

[Javascript] 2023.04.03

[Javascript] 배열 연결하기 [concat() 와 push(...arr)]

1)arr.concat() 함수 인자로 받은 배열 데이터와 객체 배열 데이터를 합쳐서 새로운 배열 데이터를 반환함. const arr = [1, 2, 3]; const newArr = arr.concat('a', ['b', 'c'], 'abc'); document.writeln(newArr); // [1, 2, 3, 'a', 'b','c', 'abc'] document.writeln(newArr.length); // 7 2)arr1.push(...arr2) spread operator를 사용하면 push() 함수를 이용해서도 여러 개의 배열을 하나로 합칠 수 있습니다. (1)arr1.push() push() 함수는 배열 데이터의 마지막 item으로 추가하는 것으로, 파라미터로 전달된 배열은 연결이 되지 ..

[Javascript] 2023.04.02

[Javascript] 배열의 생성, 접근, 변경, 추가, 삭제, 연결

1)배열 생성하기 예전 방식인 new 명령을 사용하는 방법과 리터럴 표기법(literal notation) 을 사용하여 생성하는 방식이 있음. //길이가 0인 예전 방식의 배열 생성 var myArray1 = new Array(); //길이가 10인 예전 방식의 배열 생성, 10개의 자리에는 아무것도 들어 있지 않습니다. var myArray2 = new Array(10); //예전 방식의 생성과 동시에 초기화 var myArray4 = new Array(1, 2, 3,"홍길동", "아무개"); //길이가 0인 literal notation 방식의 배열 생성 var myArray3 = []; //literal notation 방식의 생성과 동시에 초기화 var myArray5 = [1, 2, 3, "홍길..

[Javascript] 2023.04.02

[Javascript] 배열 내 특정 값 조회 함수

1)indexOf(), lasatIndexOf() arr.indexOf(searchElement[, fromIndex]) arr.lastIndexOf(searchElement[, fromIndex]) (1)indexOf() 배열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는'첫번째' element의 index를 리턴합니다. (2)lastIndexOf() 배열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는 '마지막' element의 index 를 리턴합니다. (3)두 함수 모두 찾으려는 값이 배열에 없으면 -1을 리턴합니다. (4)예시 const arr = [1, 2]; let elementExistYn = true; if(arr.indexOf(3)..

[Javascript] 2023.04.02

[javascript] 반복문 종료 방법(break,continue,return)

반복문을 실행하다가 종료하는 방법으로 아래 세 가지가 있으며 각각 종료되는 범위가 다르다. 1)continue 반복문 실행 중 특정 i에 대한 실행문을 종료한다. 반복문 내 그 외 i에 대해선 명령문이 반복적으로 실행된다. const forContinue = () => { let sum = 0; for (let i = 0; i { let sum = 0; for (let i = 0; i 100) { break; } sum += i; } console.log(sum); // 105 }; forBreak(); 위 코드는 0부터 100까지의 수를 모두 더하는 함수이다. 그러나 sum이 100보다 커질 때 break문을 만나 이후 반복문은 종료되고 console.log(sum) 명령문으로 넘어가는 걸 알 수 있음..

[Javascript] 2023.04.02

[javascript] 문자열 안에 쌍따옴표, 홑따옴표 함께 표시하는 방법

1)문자열에 표시하려는 따옴표와 다른 따옴표로 문자열 표현하기 let str = "'안녕하세요?'"; 2)escape 문자('\') 사용하기 문자열에서 따옴표를 표현하기 위해서, 따옴표 앞에 '\' 문자를 붙여준다. let str1 = "\"홍길동님\" 안녕하세요?"; let str2 = '\'홍길동님\' 안녕하세요?'; 3)템플릿 문자열[back-tick(`)]로 감싸기 let str2 = `'홍길동님' 안녕하세요?`; let str3 = `'홍길동'님 "안녕하세요?"`; 4)참고 URL

[Javascript] 2023.04.02

[javascript] 연산자(operator)

1)개요 연산자에는 크게 산술, 문자열, 증감, 비교, 대입, 상함, 논리 연산자 등이 있음 2)산술 연산자 (+,-,*,/%) -,*,/의 경우 문자열로 표현된 숫자도 계산해준다. +는 안 되는데 아래 이유가 있음. "3" * "2" == 6 3)문자열 연산자('+' 심화) (1)+ 연산자는 숫자 외에 문자열과 다른 데이터도 연결해준다. (2)문자열이 아닌 데이터의 경우 연결되는 과정에서 문자열 형태가 된다. var string1 = 'hi' + 9; // 'hi9' var string2 = 3 + 4 + 'wow'; // '7wow' 재밌는 사실은 string2의 경우 '7wow'가 된다. 3과 4 먼저 연산하기 때문에 7이 되었다가 문자열이 만나 문자열 형태가 되었다. 컴퓨터는 순서대로 연산한다. ..

[Javascript] 2023.04.02

[javascript] 키보드 입력시 event type - keydown과 keyup

[JS] 키보드 Event - onKeyDown(), onKeyUp() 함수 Javascript에서 사용자가 키보드의 key 입력을 감지하여 함수를 호출하여 처리가 가능합니다. onKeyDown(), onKeyUp() 함수를 호출 시 KeyCode를 함께 사용이 가능합니다. onKeyDown() 함수 Javascript 프로그래밍 redcow77.tistory.com 아래 event type을 통해 키보드의 key 입력을 감지하여 evnet handler 함수를 호출할 수 있으며 KeyCode 함께 사용가능함. (1)onkeydown (또는 keydown) 키보드의 Key를 눌렀을 때 발생하는 Event 함수입니다. shift, alt, controll, capslock 등의 모든 key에 동작시 반응함..

[Javascript] 2023.03.25

[javascript] event 객체의 매개변수와 property

때때로 이벤트 핸들러 함수 내부에서 event, evt, 혹은 e와 같은 이름으로 명명된 매개변수(parameter)를 봤을 것입니다. 이벤트 핸들러에 전달되는 매개변수는 event 객체 하나뿐이며 event객체에는 이벤트와 관련된 프로퍼티 및 메서드가 있다. 1)event Property (1)event.target && event.currentTarget ①Event.target: 실제로 이벤트를 발생시킨 요소 ②Event.currentTarget: 이벤트에 binding된 DOM 요소(addEventListener 메소드 앞에 기술된 객체를 말함) 아래 버튼 2개를 자식요소로 가지고 있는 parent 요소가 있다고 해보자. 만약 첫번째 버튼을 클릭하게 되면 결과는 아래와 같이 나온다. // HTML..

[Javascript] 2023.03.25

[javascript] Event의 구성요소와 등록방법

1)Event의 구성요소 (1)event target (대상) event가 일어날 객체(요소)를 말한다. (2)event type event의 종류를 의미한다. click, scroll 등이 있다. (3)event handler event가 발생했을 때 동작하는 코드를 말한다. 2)Event 등록방법 (1)Inline event target 태그 속성으로 지정함. (2)property Listener event target에 해당하는 객체의 property로 event를 등록하는 것을 말함. (3)addEventListener() event를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러 개의 event handler를 등록할 수 있음. addEventListener() 메서드는 이벤트 타입..

[Javascript] 2023.03.25

[HTML] button과 input 태그

1)출력이 비슷함 화살표 2)button type 속성의 button 값 버튼에 타입을 쓰는 이유 (button type="button") 프롤로그 가끔 이렇게 type을 명시한 버튼을 마주칠 때가 있는데 전 항상 궁금하더라구요. "아니 버튼이면 버튼이지 버튼 타입 버튼은 대체 뭐람" 그러고보면 비슷하게 타입을 명시하는 이라는 nykim.work 3)input의 주요 속성(type, value, name) HTML - input태그와 그 속성 type, value, name - 입력태그 (1) HTML - input태그와 그 속성 type, value, name입력태그 (1) 오늘은 input태그와 그 속성 type, value, name에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압..

[HTML,CSS] 2023.03.22

[Javascript] Date() 관련 참고할 만한 사항

(1)Date()와 new Date() 차이 ①Date() new 키워드가 없는 Date() 함수는 인수를 무시하며, 현재 날짜 및 시간을 나타내는 문자열을 반환합니다. Date('asd') // 'Wed Dec 22 2021 19:58:27 GMT+0900 (한국 표준시)' Date() // 'Wed Dec 22 2021 19:59:10 GMT+0900 (한국 표준시)' typeof Date() // 'string' 참고로 date()로 하면 안 된다. Date()다. let a = date(); console.log(a); // Uncaught ReferenceError: date is not defined 객체가 아니므로 getMonth() 등 메소드 사용할 수 없음. let currentDay =..

[Javascript] 2023.03.22

[HTML] Style 및 Script 태그

1)Style HTML에서 스타일을 link 태그가 아닌 직접 정의하는 경우 사용함. 내용은 CSS에서 작성하는 거랑 완전 동일함. (1)태그 사용 (2)속성 사용 (3)JS에서 CSS 변경하기 (확장) ①HTML에서 style 태그 및 속성을 통해 스타일을 변경한 것과 같이 JS에서도 스타일 속성을 다음과 같이 변경할 수 있다. const slideList = document.querySelector('.slide_list'); // Slide parent dom const slideContents = document.querySelectorAll('.slide_content'); // each slide dom const slideBtnNext = document.querySelector('.slid..

[HTML,CSS] 2023.03.22