1.  자바스크립트의 특징자바스크립트는 HTML, CSS와 함께 웹을 구성한느 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다.자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(interpreter language)이다. 인터프리터 언어코드가 실행되기 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환한 후 실행한다.실행 파일을 생성하지 않는다.인터프리트 단계와 실행 단계가 분리되어 있지 않다.인터프리터는 한 줄씩 바이트 코드로 변환하고 즉시 실행한다.코드가 실행될 때마다 인터프리트 과정이 반복 수행된다.인터프리트 단계와 실행 단계가 분리되지 않고 반복 수행되므로 코드 실행 속도가 비교적 느리다.컴파일러 언어코드가 실행되기 전 단계인 컴파일 타임..

1. display: flexdisplay: flex가 적용된 요소로, 이 안에 있는 모든 자식 요소들이 플렉스 아이템이 된다.Flex Item(플렉스 아이템) : 플렉스 컨테이너의 자식요소로, 이 요소들은 플렉스 박스 모델에 따라 배치된다.2. Flex Container, Flex Items 안에 들어가는 것1-1. Flex Container(부모 요소)Justify-content : Main Axis 기준에서의 정렬Main Axis : 가로축부모 justify-content: center 를 준다고 해도 만약 자식요소가 margin 을 주게 되면 자체적으로 자식으로 인하여 자식 margin이 적용된다.align-items : Cross Axis 기준에서의 정렬Cross Axis : 세로축align-i..

1. em 이란?현재 요소의 컨텍스트 내에서 상위 요소의 폰트 크기를 기반으로 계산한다.이는 웹 디자인에서 유연한 크기 설정을 가능하게 하며, 폰트 크기 뿐만 아니라 마진, 패딩, 너비 등의 다른 속성도 적용할 수 있다. 2. em 의 특징상대적인 크기em은 절대적인 픽셀 값이 아닌 부모 요소의 글꼴 크기를 기준으로 계산된다.예를 들어, 부모 요소의 폰트 크기가 16px이라면, 1em은 16px 이다.계층적 적용em 단위는 계층적으로 상속하기 때문에, 상위 요소의 폰트 크기 변경이 하위 요소에 영향을 미친다.이를 통해 전체적인 디자인의 일관성을 유지할 수 있다.유연한 디자인em 단위는 반응형 웹 디자인에서 유용하게 사용한다.화면 크기나 사용자의 기본 설정에 따라 자동으로 크기를 조절 할 수 있어, 다양한..

1. 마진 병합마진 병합은 인접한 블록 레벨 요소의 수직 마진을 합쳐 더 큰 마진 하나만 적용하는 CSS 규칙이다. 이러한 것은 요소 간의 중복된 공간을 제거하고 레이아웃을 최적화 하며 시각적인 안정성을 제공한다.  마진 병합은 주로 부모 요소와 자식 요소 사이에서 나타나는데, 이는 상하로만 나타나게 된다.또한 형제 요소 사이에서도 마진 병합이 나타난다. 이 또한 상하진 마진만 병합이 된다. 2. 해결 방안1. inline-blockinline-block을 하게 되면 마진 병합이 나타나지 않는다. 2. padding, border부모 요소와 자식 요소 간의 마진 분리는 패딩 혹은 보더로도 가능하지만, 형제간의 마진 분리는 이 방법으로 되지 않는다. 3. table부모 요소와 자식 요소 사이에 table ..

1. 콤비네이터(Combinator)우리말로 결합자 라고 하는데, 콤비네이터는 셀렉터와 셀렉터 사이에 추가하여 새로운 선택을 만들어내는 연산자이다.이를 통해 좀 더 복잡하고 효율적인 선택이 가능하다. 브라우저는 요소를 선택할 때, 셀렉터의 가장 오른쪽부터 시작하여 왼쪽으로 이동하여 조건을 확인한다. 이는 성능 최적화를 위함인데, 불필요한 요소 검사를 줄일 수 있다. 1-1. 주요 콤비네이터 유형하위 콤비네이터 (Descendant Combinator)기호: (공백)예: div p설명: 모든 p 요소를 찾은 후, 그 중 div 하위에 있는 요소를 선택자식 콤비네이터 (Child Combinator)기호: >예: `ul > li설명: 모든 li 요소를 찾은 후, 그 중 직계 부모가 ul인 요소를 선택인접 형..

1. Block 레벨 요소한개의 독립된 덩어리로 자신의 콘텐츠 길이에 상관없이 화면의 가로 폭 전체를 차지하는 요소들을 말한다.화면의 가로 폭 전체를 차지하기 때문에 block level 요소들은 세로로 배치된다. 1-1. 대표적인 block level 요소, , , , ....유형G">단일 작성 문법멀티 작성 문법설명블록 요소G">display: blockdisplay: block flow기본적인 블록 요소플렉스 컨테이너G">display: flexdisplay: block flex블록 박스로 배치되며, 내부적으로 플렉스 레이아웃을 사용하여 자식 요소들을 배치그리드 컨테이너G">display: griddisplay: block grid블록 박스로 배치되며, 내부적으로 그리드 레이아웃을 사용하여 자식 요..