doeunn.log

▶자바스크립트 var, let, const 1) 변수의 종류 ① var 자바스크립트의 기본 변수로 초기에 만들어진 변수입니다. ② let 나중에 추가된 변수로 블록 범위 변수입니다. ③ const 나중에 추가된 변수로 블록 범위이면서 상수입니다. 2) var, let, const의 차이점 변수의 종류에 3가지에 대해 알았으니 이제 셋의 차이점에 대해서 알아봅시다. 아래와 같은 세가지 차이점을 가집니다. 중복선언 가능 여부 재할당 가능 여부 변수 사용 범위(스코프 유효범위) 변수 하나하나 특징을 살펴보자면 아래와 같습니다. var let const 변수 선언 및 사용범위는 전역 범위 변수의 선언 및 사용 범위는 로컬 범위 변수의 선언 및 사용 범위는 로컬 범위 재(중복) 선언 O, 재할당 X 재(중복) 선..

▶반응형 웹과 미디어 쿼리 우리가 웹을 통해 네이버의 모습은 PC 화면으로 보았을 때와 모바일 화면으로 보았을 때는 다릅니다. 이는 반응형 웹을 이용한 모습입니다. 이번 글에서는 반응형 웹을 통해 모바일에서의 화면과 PC에서의 화면을 서로 다른 웹 서비스를 보여줄 겁니다. ▷반응형 웹 반응형 웹은 다양한 화면 크기의 디바이스(PC, 모바일, 태블릿 등)에서 웹 서비스를 제대로 보여주기 위한 기술 또는 개념입니다. 반응형 웹의 일반적인 조건은 다음과 같습니다. 데스크탑, 태블릿, 모바일에 대해 각각의 기기에서 문제없이 동작해야 한다. 사용자가 서로 다른 기기(다양한 크기의 화면)에서 접속시 즉시 반응하여 화면의 내용을 보여주어야 한다. ▷뷰포트(viewport) 뷰포트란 일반적으로 모바일 기기에 적용하기 ..

▶플렉시블 컨테이너와 아이템 ▷플렉시블 박스(Flexible Box) Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나입니다. ▷Flex의 개념 container : Items를 감싸는 부모 요소 박스를 의미 Items : 각 요소를 의미하며, 반드시 container의 자식으로 존재 ▷Flex Container 요소의 속성 참고로 컨테이너에 flex 속성을 주어야 합니다. .container { display: flex; width: 400px; } ① display : 컨테이너를 수직/수평 방향으로 정렬 프로퍼티값 설명 flex Block 특성으로 컨테이너가 수직 방향 정렬 inline-block Inline 특성으로 컨테이너가 수평 방..

▶CSS 애니메이션 CSS 애니메이션을 통해 엘리먼트 즉 컨텐츠들을 키프레임을 통해 다양한 움직임을 줄 수 있습니다. 애니메이션의 대표적인 속성 5가지는 다음과 같습니다. transform : 트랜스폼은 요소 이동, 크기 변경, 위치, 색상 등 속성 변경 동작을 수행 transition : 트랜지션은 시간 경과에 따라 하나의 속성 상태가 다른 속성 상태로 변형 @keyframes : 키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드 animation : 키프레임 애니메이션 실행을 위해 CSS에 설정해 주는 속성 예제를 통해 자세히 알아봅시다. 예제 1. 네모 박스 색깔, 위치, 각도 애니메이션 transform은 어떻게 변경할 지를 입력한다고 했습니다. 위 예제 코드를 보면, scale 즉 크기를..

▶CSS 화면 중앙 배치 콘텐츠를 가로나 세로 혹은 가로/세로 즉 중앙에 배치하고 싶을 때의 방법을 공부해보겠습니다. 1) 가로에서 중앙 배치 ① margin 이용 margin은 컨텐츠 바깥 부분의 여백을 의미합니다. 이 방법은 바깥 여백을 이용하여 중앙에 배치합니다. margin left/right 실행 화면은 아래와 같습니다. margin-left와 margin-right를 auto로 주는 것은 좌우 바깥 여백을 자동으로 해서 가로 기준 중앙에 배치하는 것입니다. ② position: relative & transform 이용 position은 컨텐츠의 위치에 관해 설정해줄 수 있습니다. 이번에 사용할 position: relative는 컨텐츠들의 위치를 기준으로 위치를 이동시킬 수 있습니다. pos..

▶DOM 이벤트 이벤트(Event)는 어떠한 일(또는 인터랙션)이 발생했을 때, 그 시점에 발생하는 신호를 의미합니다. DOM에서는 요소를 클릭하거나, 특정 키를 입력했을 때처럼 다양한 상황에서 이벤트가 발생합니다. 프런트엔드 개발자에게 이벤트를 제어하는 것은 굉장히 중요한 부분입니다. 이벤트의 발생 시점에 맞춰 여러 가지 동작을 추가하여 사용하자와 인터랙션할 수 있기 때문입니다. 1) Event 객체 Event 객체는 DOM 내에서 발생한 이벤트에 대한 정보를 담고 있습니다. Event 객체는 발생한 이벤트의 종류부터 요소에 대한 정보, 갭처링 여부, 이벤트 발생 위치 등 여러 정보를 갖고 있습니다. ▷target과 currentTarget 이벤트가 발생한 요소에 접근하고 싶은 경우, target 혹은..