반응형 디자인의 정의반응형 디자인이란, 다양한 디바이스에서 사용자에게 최적화된 뷰를 제공하는 웹 디자인 기법이다. 휴대폰, 노트북, 가로 방향이, 세로 방향 등의 사용자의 환경에 따라 웹페이지의 레이아웃과 콘텐츠가 유동적으로 변화한다.이 기법은 주로 CSS3의 미디어 쿼리를 사용하여 구현된다.왜 중요할까? 🤔인터넷 초창기에는 대부분 컴퓨터만을 사용했기 때문에 화면 크기가 다양하지 않았다. 이 때에는 웹사이트를 디자인하기가 쉬웠지만, 최근에는 기술이 발달로 인해 기기와 화면의 크기가 다양해졌다.초기에는 모바일 전용 웹사이트(m.naver.com)를 따로 만들어 해결했으나, 최근 7~8년 사이에 반응형 디자인이 주목받기 시작했다.이 접근 방식을 통해 웹사이트의 접근성을 높이고 사용자의 편의성을 향상시킬 수..

참고자료1분 코딩- 이번에야말로 Flex를 익혀보자Flexbox란?Flexbox는 레이아웃 배치를 위해 최근 고안된 기능이다. 우리는 Flexbox를 사용하여 요소들을 행(row) 또는 열(column)로 배치할 수 있다.Flexbox는 크기를 미리 알지 못하는 요소들 사이에 공간을 동적으로 배분할 수 있게 해주기 때문에 flexbox라는 용어를 사용한다.Flexbox 레이아웃을 만들기 위한 기본적인 HTML 구조는 아래와 같다. 1x 2 3부모 요소인 container를 Flex Container라고 부르고, 자식 요소인 item들을 Flex Item이라고 부른다.Flexbox의 속성들은 두 가지로 나뉜다.컨테이너에 적용하는 속성아이템에 적용하는 속성👉 MDN Flexbox Guide..

배경 속성에 대해 알아보도록 하자. 이 속성은 다양한 속성을 한 번에 작성하는 속기법 속성이다.background속성을 통해서 바꿀 수 있는 속성들은 아래와 같다.구성 속성background-color: 배경색을 지정할 때 사용하는 속성으로 기본값은 투명이다.background-image: 배경 이미지를 지정할 때 사용하는 속성으로 url()함수를 사용하여 속성값을 명시한다.background-repeat: 배경 이미지가 주어진 영역에 꽉 차지 않는 경우, 이미지를 반복할 방식을 결정한다.background-position: 배경 이미지가 주어진 영역에서 어디에 위치할지 결정한다.background-size: 배경 이미지의 크기를 결정하는 속성이다. 기본값은 auto로 배경 이미지의 실제 크기를 나타낸다..

이정환 강사님의 '한 입 크기로 잘라먹는 리액트' 강의를 바탕으로 정리한 글입니다.1.6) 형 변환형 변환이란 형태를 변환한다라는 의미로, 어떤 값의 타입을 다른 타입으로 변경하는 것을 말하며 영어로는 Type Casting이라 한다.형 변환의 종류자바스크립트의 형변환은 묵시적 형 변환과 명시적 형 변환으로 나뉜다.묵시적(암묵적) 형 변환개발자가 직접 설정하지 않아도 자바스크립트 엔진이 눈치껏 형 변환하는 것을 말한다.생각지도 못하게 형이 변환될 수 있다는 말이다.let num= 20;let str = '25'const result = num + str; // '20' + '25'= '2025'불가능한 연산의 경우, 자바스크립트 엔진이 오류를 발생시키지 않기 위해 숫자를 문자열로 암묵적 형 변환을 시키게..

이정환 강사님의 인프런 강의, '한 입 크기로 잘라먹는 리액트'의 강의 내용과 자료를 바탕으로 정리한 내용입니다1.1) 안녕 자바스크립트JavaScript의 실행 방법JavaScript는 JavaScript 엔진이라는 프로그램을 통해 실행된다. 이 엔진이 없으면 실행 및 해석이 불가능하다.자바스크립트는 크롬/사파리 등의 웹브라우저에 모두 탑재돼 있다. 따라서 웹브라우저를 이용하여 간단한 자바스크립트 코드를 작성 및 실행시켜 볼 수 있다.웹브라우저의 개발자 도구 사용하기윈도우: F12맥: Command + Option + I1.2) VsCode 설치하기이미 다운 및 설정이 다 돼 있어서 스킵!1.3) JavaScript 실습 환경 설정1.4) 변수와 상수변수let이라는 키워드를 사용하여 선언한다.변수는 언..

Q3. Describe your experience the last time you went to the park. In detail, explain which park you went to, what you did while you were there, and who went there with you. What went on during your visit?최근에 공원에 갔었던 경험을 설명해 주세요. 어느 공원을 갔었고, 그곳에 있는 동안 무엇을 했으며, 누구와 함께 갔는지 구체적으로 말해 보세요. 공원에 있는 동안 어떤 일들이 있었나요? 언제/ 어디에That was just last weekend. I went to the small park, near my house. 무엇을I invited my..

나는 1월 22일까지 영어 점수를 제출해야 돼서 부랴부랴 오픽 시험을 접수하고 보게 되었다. 오픽 시험을 준비하면서 찾아봤던 정보들을 정리해서 공유해보겠다.시험 단계 선택하기난이도는 본인이 목표로 하는 등급에 맞춰 결정한다. 보통 대학교의 영어 졸업 인증의 경우에는 IM1, IM2이기 때문에, 4단계를 추천한다. 4단계를 선택했을 때 IM1, IM2가 제일 많이 나온다는 통계가 있다고 한다. 근데 이건 워낙 강사&지인마다 말이 달랐다. 오픽 노잼 유튜버의 영상들을 보고 시험을 갔다 온 지인들의 경우 5를 선택한 경우도 있었고, 3을 선택하고 IM2를 딴 지인도 있었다. 그런데 나는 영어를 공부하지 않은지 4년이 돼가지고 오픽 노잼의 영상만으로 IM1을 딸 수 있을까 걱정이 되어서 보다가 포기했고, 좀 더..

">문제 유형별 배점오픽 문제는 총 10개의 유형으로 분류할 수 있고, 각 유형별로 배점이 상이하다. 따라서 등급을 올리기 위해서는 배점이 높은 유형을 위주로 답변 연습을 하는 것이 좋다. 배점이 낮은 유형1번 유형 (현재 시제 장소/종류 묘사)2번 유형 (현재 시제 활동,루틴,단계 묘사)5번 유형 (상대에게 간단한 질문)6번 유형 (주어진 상황에 맞게 정보 요청)배점이 높은 유형3번 유형 (최초 혹은 최근 경험 설명)4번 유형 (인상적인 경험 설명)7번 유형 (문제 상황 설명/ 해결 대안 제시)8번 유형 (7번 유형과 비슷한 이전 경험 설명) - 배점 높음 (IL ~ IM2 까지는 준비 안해도 됨)AL을 결정하는 유형9번 유형 (비교나 대조)10번 유형 (사회적 관심사나 이슈를 구체적으로 설명)AL이 ..

">오픽 보물 창고 선생님의 영상을 바탕으로 내가 다시 보기 위해... 정리한 내용이다!! 주제를 잘 선택해야 하는 이유오픽 시험 문제는 내가 제출한 서베이를 바탕으로 출제되며 이 때, 어떤 주제를 선택하냐에 따라 준비 기간이 달라진다. 이는 각 주제별로 문제 세트수가 상이하기 때문이다. 따라서 오픽 서베이에서 주제를 선택할 때는 주제별 문제 세트 수를 고려해서 최대한 문제의 수가 적은 주제를 전략적으로 선택하는 것이 좋다.이 때, 한 세트는 (1번 유형 ~ 10번 유형) 총 10개의 문제 묶음을 의미한다.- 1번 유형 ) 장소 / 종류 묘사- 2번 유형 ) 활동, 루틴, 단계 묘사- 3번 유형 ) 최초 / 최근 경험 묘사- 4번 유형 ) 인상적인 경험- 5번 유형 ) 간단한 질문- 6번 유형 ) 정보 ..

transform 이란?transform속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과등을 부여할 때 사용한다. 속성에 대한 값으로 원하는 함수를 전달하면 된다.이 때, 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다. 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용해야 한다. 이 때, transform 속성은 자식에게도 적용된다.사용법transform: func1 func2 func3 ...;변환 함수를 속성값으로 쉼표없이 나열하면, 나열 순서에 따라 차례대로 적용된다.속성값속성값으로 올 수 있는 함수들은 아래와 같다.회전rotate(a)angle에 들어갈 수 있는 값은 여러 단위가 있다deg, rad, grad, turn을 사..

Redux 소개와 기본 개념1. 상태 관리의 필요성상태는 웹페이지내에서 눈에 보이는 데이터들(ex. 메뉴, 게시글 제목, 게시글 내용)뿐만 아니라 서버와 주고 받아야하는 데이터를 의미한다.이렇게 눈에 보이는 것과 눈에 보이지 않는 모든 것을 상태라고 하고 이를 관리하는 것을 상태 관리라고 한다.상태 관리는 리액트 애플리케이션에서 중요한 개념 중 하나이다. 이는 애플리케이션의 동작을 결정하고, 사용자 인터페이스를 동적으로 업데이트하는 데 필수적인 역할을 한다.효과적인 상태 관리를 통해 리액트 애플리케이션의 성능과 유지보수성을 크게 향상시킬 수 있다.2. 상태의 구분우리는 상태를 세 가지로 구분할 수 있다.Local StateLocal State란 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 ..

position 속성이란position은 HTML 요소를 원하는 위치에 배치하기 위해서 사용하는 속성이다. 위치를 정확히 지정하기 위해 top, bottom, left, right 속성과 함께 사용된다.staticposition 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다.static은 기본 문서 흐름에 따라 요소를 배치하기 때문에 position이 static인 요소들은 문서에서 작성된 순서대로 브라우저 화면에 표시된다. 이 때 top, left, bottom, right 속성은 무시된다. 1 2 3relativeposition 속성을 relative로 설정하면, 요소의 원래 위치(static)를 기준으로 상대적인 위치를 지정해줄 수 있다.이 때, 문서의 일반적인 흐름에서 요소..