본문 바로가기

전체 글182

[프론트엔드][자바스크립트] 객체 생성 따라하다가 - 따옴표? 백틱키! 코딩앙마님의 유튜브를 보며, 위와 같이 객체를 새로 생성하는 것을 따라 실습하는 중 다음과 같은 오류가 발생했다. 위의 코드를 실행하게 되면, item2.showPrice();로 인해 가격은 18000원 입니다. 가 출력되어야 하는데, 가격은 ${price}원 입니다. 라고 출력되는 것이었다. 알고보니, 실행 오류가 난 이유는 '가격은 ${price}원 입니다.' 이 부분 때문이다. 화면으로 보면서 실습을 따라하다 보니, 작은 따옴표를 입력할 줄 알았는데, ${price}와 같이 내장된 표현식을 허용하는 템플릿 리터럴(템플릿 문자열)이 있을 경우에는, 문자열을 따옴표 대신 백틱( ` ) backtick으로 에워싸져야 했다. 그래서, 저 작은 따옴표를 백틱으로 바꿔 작성한 후, 실행해보니 정상 작동이 되는.. 2022. 4. 23.
[프론트엔드][자바스크립트] TIL Day-20.1 DOM 문서 객체 모델 자바스크립트는 정적인 HTML에서 벗어나 동적으로 사용자와 상호작용할 수 있게 기능하게 하는 것이다. 웹 페이지는 한 번 화면에 출력되면 자기 자신을 바꾸는 능력이 없다. 그것을 가능하게 해주며 HTML을 제어하는 언어가 바로 자바스크립트이다. 이 때, 자바스크립트는 웹 페이지(웹 문서)와 그 안에서 사용한 텍스트, 이미지, 표 등의 모든 요소들을 각각 다른 객체(Object)로 인지하여 처리한다. 이렇게 자바스크립트를 이용해 웹 문서의 객체들을 이용해 웹 문서에 접근하고 제어하는 시스템을 문서 객체 모델(DOM, Document Object Model)이라고 한다. (여기서는 HTML 웹 문서를 대상으로 하므로 HTML DOM을 기준으로 설명한다.) 예를 들면 웹 문서 전체는 document 객체이고,.. 2022. 4. 22.
[프론트엔드][자바스크립트] TIL Day-19.2 수학 객체, 배열 객체, 문자열 객체 객체의 종류 1. 내장 객체 : 브라우저의 자바스크립트 엔진에 이미 내장되어 있어 필요한 경우에 객체를 생성해 사용 가능 ex) 문자(String) 객체, 날짜(Date) 객체, 배열(Arrary) 객체, 수학(Math) 객체 등 ㅡ 실행 예: Date 객체를 생성한 후, 메서드 getDate( )를 사용하여 오늘 날짜를 결과로 얻음 ① 날짜 객체 ② 수학 객체(Math Object) : 수학과 관련된 기능과 속성을 제공 종류 설명 종류 설명 Math.abs(숫자) 숫자의 절댓값을 반환 Math.pow(숫자, 제곱값) 숫자의 거듭제곱값을 반환 Math.max(숫자1, 숫자2, 숫자3, 숫자4) 숫자 중 최대값을 반환 Math.min(숫자1, 숫자2, 숫자3, 숫자4) 숫자 중 최소값을 반환 Math.ra.. 2022. 4. 21.
[프론트엔드][자바스크립트] TIL Day-19.1 Sort( )함수 및 동작원리, 곁들여 Return값 a - b 완벽 이해해보기 MDN Web Docs를 보며, 다른 자료들을 참조하며 이해해나간 내용을 정리한다. sort( ) 메서드는 배열의 요소들을 정렬하여 반환한다. 다만, 그 정렬은 기본적으로 문자열의 유니코드 순서를 따르므로, 특별히 수를 정렬할 때 우리가 생각하는 숫자의 크기 순서대로 정렬되지 않는다. 다음 콘솔 박스를 보면 숫자들의 배열을 그냥 sort( ) 메서드를 적용하면 다음과 같이 정렬됨을 알 수 있다. 이것이 바로, 숫자의 크기대로 정렬되지 않고 숫자가 문자열로 변환되어 문자열의 유니코드 순서를 따라 정렬되는 것이다. 살펴보면 맨 앞자리의 숫자가 기준이 된 뒤, 그 뒤에 digit이 늘어나는 것을 앞자리 숫자(0, 1, 2, ...) 의 하위 문자열로 인식하여 정렬해놓은 것을 볼 수 있다. 그래서, 정렬 순서를.. 2022. 4. 21.
[프론트엔드][자바스크립트] TIL Day-18.2 Object 객체와 날짜 객체 객체란? 자바스크립트는 객체(Object) 기반 언어이다. 이 객체는 기능과 속성을 가지고 있다. 이때 기능들을 메서드(method)를, 속성을 프라퍼티(Property)라고 한다. 기본형 : ① 객체. 메서드( ); | ② 객체. 속성; | ③ 객체. 속성 = 값; ① 작동 -> 객체의 메서드를 실행한다. ② 작동 -> 객체의 속성값을 가져온다. ③ 작동 -> 객체의 속성값을 바꾼다. 객체의 종류 1. 내장 객체 : 브라우저의 자바스크립트 엔진에 이미 내장되어 있어 필요한 경우에 객체를 생성해 사용 가능 ex) 문자(String) 객체, 날짜(Date) 객체, 배열(Arrary) 객체, 수학(Math) 객체 등 ㅡ 실행 예: Date 객체를 생성한 후, 메서드 getDate( )를 사용하여 오늘 날짜를.. 2022. 4. 21.
[프론트엔드][자바스크립트] TIL Day-17.1 반복문의 continue continue 문은 현재 혹은 레이블이 지정된 루프의 현재 반복에서 1. 명령문의 실행을 종료하고 2. 반복문의 처음으로 돌아가 3. 루프문의 다음 코드를 실행한다. 위 코드를 해석하면, text라는 변수를 let을 이용하여 문자열(String)일 것을 예고하며 비워둔 채로 변수 선언을 하고, for문 안에서 i를 let으로 변수를 선언하면서 초기값을 0으로 지정, i가 10보다 작을 때까지는 중괄호 { }의 명령문을 i를 하나씩 증가시켜가면 실행. i가 3이라면 continue를 실행하고, 아니라면 text = text + i를 실행한다. 이때 + 는 덧셈 기호가 아니라 문자열을 합쳐, 옆으로 연결해 쓰라는 의미이다. i가 0일 때부터 10보다 작은 동안 계속 반복해 실행하면 012 이렇게 실행이 되.. 2022. 4. 20.
[프론트엔드][자바스크립트] TIL Day-18 예제로 For문 꼭꼭 씹어먹기 for문 예문 소스 씹어먹기 ※ 아래 소스를 한 줄씩 이해할 때 반드시 전체 소스를 같이 보면서 문맥을 파악하며 따라오면 좋을 듯 하다. var audNum = prompt("입장객 수는 몇 명?"); 변수 audNum에 "입장객 수는 몇 명?"이라는 텍스트가 쓰여 있는, 또 그 지시나 텍스트에 맞게 사용자가 입력할 수 있도록 prompt로 대화상자를 띄운 후, 사용자가 대화상자에 입력한 값을 변수 audNum의 값으로 할당한다. var colNum = prompt("한 줄에 몇 명씩 배치?"); 변수 colNum에 "한 줄에 몇 명씩 배치?"라는 텍스트가 쓰여 있는 입력형 대화상자를 띄워 그 곳에 사용자가 입력한 값을 변수 colNum의 값으로 할당한다. if (audNum % colNum == 0) .. 2022. 4. 20.
[프론트엔드][CSS] TIL Day-16 Grid 그리드(Grid layout) CSS Grid는 수평선과 수직선으로 이루어진 집합체(격자무늬)로 웹페이지를 위한 이차원 레이아웃 방법이다. 플렉스는 수평이나 수직 중 하나를 기준(1차원)으로 해서 요소를 배치하지만, 그리드는 수평과 수직 어느 방향이든(2차원) 배치할 수 있다. 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 기능들(아래에 기술할 예정)이 많이 있다. ∨ 사용해서 좋은 점? - 한 화면을 여러 개의 칼럼으로 구성해서 밑으로 늘어뜨리는 그리드 레이아웃은 이미 많은 시각 매체에서 사용하여 그리드 레이아웃 웹사이트 디자인은 사용자에게 안정감을 준다. - 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃, 즉 사이트 전체나 콘텐츠 영역의 너비, 각 요소의 위치 등의 사이트 구조를 먼저 .. 2022. 4. 18.
[프론트엔드][일반] CSS 스타일이 안 먹을때 - 소스 숨은 그림 찾기 해보고, 캐시 삭제, !important 등 했는데도 생초보인 나. 아무리 짧디 짧은 소스를 디벼보고, 소스 한 줄씩 지워가며 실행해보고, !important도 넣어보고 했는데도, 스타일 안 먹는다. 아무리 눈을 씻고 봐도 소스는 다 정상으로 보이는데 왜 안 먹을까...... 고구마를 먹고 먹먹한 그 때, 머리 속에 한줄기 빛이 나를 스쳐지나갔으니! vscode 왼편 탐색기를 살펴보자.......... 저 한 눈에 들어오지도 않는 미묘한 층이 느껴지는가.... 그렇다.. 같은 폴더에 있는게 아니라 HTML파일이 하나 상위 폴더에 위치하고 있었던 것. 파일을 새로 만들어 작성하다보면 가끔 이 폴더 저 폴더 비슷할때 한 단 상위나 혹은 다른 곳으로 들어갈 때가 있다. 저 두 파일을 만들어 저장하면서 같은 레벨에 두지 못해, 다시 말해 한 폴더 안에 들어있지 않.. 2022. 4. 15.
[프론트엔드][CSS] TIL Day-14.2 Media Queries 미디어 쿼리 미디어 쿼리(media queries)는 접속하는 장치 즉, 미디어에 따라 사이트의 형태가 바뀌도록 같은 스타일시트 내에서 서로 다른 미디어에 다른 스타일을 적용하도록 지정하게 하는 것을 가리킨다. 이를 위해 CSS2에서 도입된 미디어 타입을 이용하면 @media 규칙을 통해 다양한 미디어 유형에 맞춰 서로 다른 스타일을 지정할 수 있었다. CSS2의 미디어 타입을 확장한 CSS3의 미디어 쿼리는 단지 미디어 타입을 지정하는 것 뿐만 아니라 뷰포트의 크기(폭, 높이), 장치의 크기, 화면의 가로/세로 방향, 해상도 등 미디어 타입의 특성을 구분할 수 있는 다양한 기능을 이용할 수 있게 되었다. 그럼으로써, CSS3의 미디어 쿼리는 반응형 웹을 구현하는 중요한 기능으로 사용되게 되었다. 미디어 쿼리의 문법.. 2022. 4. 15.
[프론트엔드][CSS] TIL Day-14.1 이미지를 가운데로 정렬하여 넣는 법 그리드를 연습하던 중, 주어진 소스로 만들어진 그리드의 각 박스 안의 이미지를 가운데로 정렬하고 싶다는 생각이 들었다. 이미지를 가운데로 정렬하는 방법은 다음 두 가지가 있다. 첫번째는, 이미지 요소 위의 부모요소에 스타일을 주는 방법이다. 아래의 경우와 같이, css에서 img요소의 부모요소인 figure에 text-align 속성에서 center 값을 주는 것이다. ↓ 혹은 figure 태그 안에서 바로 스타일을 줄 수 있지만, 이럴 경우 해당 태그만 스타일링이 되므로 여러개에 동일하게 스타일링을 한다면 위와 같이 css에서 스타일을 주는게 좋겠다. ↓ 두번째는, 아래와 같이 img 요소를 블록으로 지정한 뒤, margin 속성을 사용하여 0 auto라는 값을 주는 것이다. 이 때, 0은 상하의 값이.. 2022. 4. 14.
[프론트엔드][CSS] TIL Day-13.1 Flex 플렉스(Flexible Box layout) CSS Flexbox는 기존의 float, position, display 속성을 사용해 HTML 요소의 배치, 정렬, 방향, 순서, 크기를 조절하는 대신에 좀 더 쉽고 효율적으로 조절할 수 있도록 하는 CSS3 레이아웃 제작 방식이다. ∨ 사용해서 좋은 점? - float속성을 사용하지 않고 가로배치할 수 있다. - 반응형 레이아웃을 만들기 쉽다. - 자식요소의 위치 잡기를 훨씬 쉽게 할 수 있다. - 브라우저에 보여지는 HTML 요소의 순서를 HTML 코드를 수정하지 않고 바꾸는 게 가능하다. 문서의 영역 중에서 Flexbox가 놓여있는 영역을 Flex 컨테이너(container)라고 한다. Flex 컨테이너를 생성하려면 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정한.. 2022. 4. 13.