CSS8 flexbox vs inline block Flexbox를 사용하여 inline 요소를 표현하는 것과 display: inline-block을 사용하여 inline 요소를 표현하는 것의 성능 차이점을 알아보자특성Flexbox (display: inline-flex)Inline-Block (display: inline-block)목적컨테이너 내의 항목 배치 및 정렬자체 크기 조정 및 다른 요소와 나란히 배치레이아웃 가능 범위강력한 정렬, 정당화, 순서 변경 등제한적 (기본적인 정렬 및 마진만 가능)부모 요소의 속성 상속부모 요소의 속성을 상속받으며, 개별 설정이 가능함각 요소는 독립적으로 설정됨정렬 기능 지원수평 및 수직 정렬 지원수평 정렬만 가능속성 설정 유연성flex-grow, flex-shrink, flex-basis등 각 요소별 속성을 지.. 2024. 7. 18. # Worklet Worklet Worklet이란 Worklet 인터페이스는 Web Workers의 경량 버전이며 개발자가 렌더링 파이프 라인의 하위 수준에 접근할 수 있도록 해준다. Worklet을 사용하면 JavaScript 및 WebAssembly 코드를 실행하여 고성능이 필요한 경우 그래픽 렌더링 또는 오디오 처리를 수행 할 수 있다. - MDN 기본적으로 Worker는 한 Thread에 하나가 생성이 가능하지만, Worklet은 한 Thread에 여러 개 생성이 가능합니다. 메인 Thread에서 만들 수 있습니다. 독립적인 GlobalScope와 Event loop를 가집니다. Worklet Type PaintWorklet LayoutWorklet AnimationWorklet AudioWorklet 그리고 Ty.. 2023. 7. 15. Front end 면접에서 자주 묻는 질문들 소개 프론트 엔드 개발은 웹 개발의 중요한 부분이며, 따라서 프론트 엔드 면접에서는 자주 묻는 질문들이 포함됩니다. 이러한 질문들은 면접관이 HTML, CSS, JavaScript와 같은 프론트 엔드 기술에 대한 지식과 이해력을 평가하는 데 도움이 됩니다. 이 블로그 포스트에서는 프론트 엔드 면접에서 자주 묻는 일부 일반적인 질문들을 살펴보겠습니다. 1. CSS에서 박스 모델이란 무엇인가요? 박스 모델은 웹 페이지에서 요소가 렌더링되는 방식을 설명하는 CSS의 기본 개념입니다. 이는 콘텐츠, 패딩, 테두리, 마진으로 구성됩니다. 콘텐츠 영역은 요소의 실제 콘텐츠가 표시되는 곳입니다. 패딩은 콘텐츠와 테두리 사이의 공간을 제공합니다. 테두리는 패딩과 콘텐츠를 둘러싸며, 마진은 요소와 페이지의 다른 요소 사.. 2023. 6. 27. Front end 면접에 대비하기 위한 팁과 가이드라인 소개 프론트 엔드 개발은 웹 개발의 중요한 부분이며, 이 분야에서 취업하기 위해서는 HTML, CSS 및 JavaScript에 대한 튼튼한 이해가 필요합니다. 프론트 엔드 면접에서 성공하기 위해서는 철저한 준비와 흔히 나타날 수 있는 주제와 질문에 익숙해져야 합니다. 이 블로그 포스트에서는 프론트 엔드 면접에 효과적으로 준비하기 위한 팁과 가이드라인을 제공하겠습니다. 1. 채용 요구사항 이해하기 면접 준비에 앞서, 지원하는 프론트 엔드 직무의 특정 채용 요구사항을 이해하는 것이 중요합니다. 채용 공고를 주의 깊게 읽고 필요한 기술과 기술들을 메모해두세요. 이를 통해 준비를 맞추고 역할과 관련된 가장 중요한 영역에 초점을 맞출 수 있습니다. 2. HTML 기본 개념 복습하기 HTML은 웹 페이지의 기반이 .. 2023. 6. 27. Front end 면접에서 예상되는 코딩 과제와 해결법 소개 프론트엔드 개발은 웹 개발의 중요한 부분이며, 프론트엔드 개발자로서 면접에 잘 준비하는 것이 중요합니다. 프론트엔드 면접에서 코딩 과제는 문제 해결 능력, 코딩 능력 및 프론트엔드 기술에 대한 이해력을 평가하는 중요한 요소입니다. 1. HTML 과제 HTML은 웹 페이지의 기초입니다. 프론트엔드 면접에서는 HTML 태그, 속성 및 의미 있는 마크업에 대한 지식을 평가하는 HTML 과제를 만날 수 있습니다. 일반적인 HTML 과제에는 다음과 같은 것들이 있습니다: vs : 차이점과 각각을 언제 사용해야 하는지 설명하십시오. HTML과 CSS를 사용하여 반응형 네비게이션 메뉴를 만드십시오. HTML5 속성을 사용하여 적절한 유효성 검사가 구현된 양식을 만드십시오. 2. CSS 과제 CSS는 웹 페이지의.. 2023. 6. 27. 패럴렉스 스크롤링이 웹 성능에 미치는 영향: 모바일 사용자 경험 소개 패럴렉스 스크롤링은 웹 디자인에서 많이 사용되는 기술 중 하나입니다. 이 기술은 사용자가 웹 페이지를 스크롤할 때 배경과 전경이 다른 속도로 움직이는 효과를 제공하여 시각적인 흥미를 끌기 위해 사용됩니다. 하지만 패럴렉스 스크롤링은 웹 성능에 영향을 미칠 수 있으며, 특히 모바일 사용자 경험에 미치는 영향은 더욱 중요합니다. 본문 1. 패럴렉스 스크롤링의 작동 원리 패럴렉스 스크롤링은 웹 페이지의 요소들이 다른 속도로 움직이는 효과를 제공하기 위해 CSS와 JavaScript를 사용합니다. 일반적으로 배경 이미지는 느리게 움직이고, 전경 요소는 빠르게 움직이도록 설정됩니다. 이를 통해 사용자는 스크롤을 할 때마다 시각적인 변화를 경험할 수 있습니다. 2. 패럴렉스 스크롤링의 웹 성능에 미치는 영향 .. 2023. 6. 22. Stacking Context? Stacking Order? HTML에서 각 요소 레이어가 화면에 쌓이는 순서와 쌓이는 맥락(?)을 의미하는데, 아래 예제가 가장 유명한 듯 하다 Red Green Blue 주석처리한 opacity를 활성화하면 이렇게 된다. stacking order인지 context떄문인지는 모르겠다. 다른 예제로 z-index를 활용한 예제가 있는데, 보다 명확하게 이해할 수 있을 것 같다. (적어도 z-index를 활용한 부분에 대해서만큼은) Division Element #1 position: relative; z-index: 5; Division Element #2 position: relative; z-index: 2; Division Element #4 position: relative; z-index: 6; Division Eleme.. 2020. 11. 5. CSS 전처리기의 종류와 장단점 CSS 전처리기란? 간단히 말해, CSS의 한계를 뛰어넘기 위해 개발된 새로운 형태의 CSS라고 할 수 있습니다. 내가 CSS를 보다 쉽게 작성할 수 있게 다른 개발자들이 내가 작성한 CSS를 보다 쉽게 이해할 수 있게 CSS로는 구현 불가능한 변수 또는 함수를 사용할 수 있게 CSS 전처리기 프레임워크의 종류 Sass Less Stylus 왜 전처리기를 사용해야 하나 개발적인 측면에서 유지보수성과 동일한 스타일을 적용해야하는 대상을 보다 쉽게 관리할 수 있기 때문 너무 큰 CSS파일을 수정하기에 해당하는 위치를 찾아가기가 어렵기 때문 CSS 전처리기 사용시 장단점 장점: CSS 코드를 여러 파일로 나눠 유지보수성이 향상 CSS파일도 나눌 수 있지만, CSS를 다운로드하기 위한 HTTP 요청이 다수 발생.. 2020. 11. 5. 이전 1 다음 반응형
