doeunn.log

▶배열 자바스크립트의 배열은 개체의 특별한 형태로 순서가 있는 데이터의 집합입니다. 배열 안의 값은 원소라고 하며, 배열의 위치를 가리키는 인덱스로 각 원소에 접근합니다. 인덱스는 0부터 시작하는 정수이며, 배열 값은 어떤 타입의 데이터든 사용할 수 있습니다. 즉 배열은 객체이지만 정수 타입인 인덱스를 프로퍼티로 갖는 특별한 데이터입니다. 1) 배열의 생성 ▷Array() 생성자 사용 객체와 마찬가지로 배열도 자바스크립트에 내장된 생성자 함수 Array()가 있으며, 이를 사용해 새로운 배열을 생성할 수 있습니다. const arr = new Array(1, '1', true); console.log(arr) // [1, '2', true] Array() 생성자 함수는 새로운 배열을 생성하고 인자로 받은..

▶반응형 웹을 위한 미디어 쿼리 미디어 쿼리를 사용하면 콘텐츠 자체를 변경하지 않고 장치의 해상도, 뷰포트의 너비, 미디어의 유형 같은 조건에 따라 스타일을 지정할 수 있습니다. 데스크톱과 모바일, 태블릿 등 화면의 크기에 따라 다른 스타일을 지정하거나 인쇄, 음성 장치 등의 조건에 따라 다른 스타일을 적용할 수 있습니다. 미디어 쿼리 작성은 크게 CSS 파일 내부에 작성하거나 나 미디어 쿼리는 미디어 타입과 미디어 기능을 기준으로 동작합니다. 두 조건이 모두 일치할 때 해당 코드가 동작합니다. 미디어 타입에는 모든 장치(all), 인쇄미디어(print), 화면(screen) 등이 존재합니다. /* 미디어 타입이 screen일 때 적용됩니다. */ @media screen { /*...*/ } 미디어 기..

▶flex를 이용한 레이아웃 만들어 보기 레이아웃을 잡는 방법은 과거부터 다양하게 존재했습니다. 을 이용하는 방법부터 아직도 많이 사용되는 float 프로퍼티와 position 등을 이용하는 방법이 존재합니다. 모던 웹 브라우저에서는 보다 유연한 레이아웃 방식이 필요했고, CSS3가 등장하며 이에 맞는 flex와 grid 레이아웃 방식이 등장했습니다. 현재는 대부분의 모던 브라우저에서 flex나 grid 프로퍼티를 지원하기 때문에 레이아웃을 배치하기 위해 이 두 가지 방법을 가장 많이 사용합니다. 이번 글에서는 두 방법 중 flex에 대해 알아보고 flex를 상요해 레이아웃을 작성해 보겠습니다. ▷기본 개념 살펴보기 flex는 디바이스나 디스플레이의 크기에 다라 컨테이너에 들어 있는 콘텐츠의 너비, 높이..

▶HTML이란? HTML은 Hyper Text Markup Language의 약어입니다. 하이퍼텍스트(Hyper Text)는 링크로 연결된 텍스트 페이지를 말합니다. 예를 들어 지금 보고 있는 블로그 페이지도 하이퍼텍스트가 되겠죠? 현재의 포스팅을 끝까지 다 읽어야 다음 포스팅으로 갈 수 있는 것이 아니고, 언제든지 링크를 통해 다른 포스팅이나 내 블로그, 블로그 홈으로 갈 수 있는 것처럼 링크를 통해 자유롭게 이동이 가능하다는 것이 하이퍼텍스트의 가장 큰 특징이라고 볼 수 있겠습니다. ▶HTML 요소 구성 HTML은 다른 언어들보다 느슨한 문법을 가지고 있습니다. 구성에 맞지 않게 요소를 작성하더라도 에러 없이 요소가 제대로 렌더링되고 에러 또한 노출되지 않습니다. 그렇다 보니 표준을 준수하지 않고 코..