CS5 크롬 브라우저로 프로세스와 스레드 이해하기 요즘 CS 관련해서 프로세스와 스레드를 설명하는 여러 글들을 읽었는데, 좀 추상적인 개념이다보니 단박에 이해되지 않았다. 프로세스는 "운영체제가 시스템의 자원을 할당하는 작업의 단위"이고, 스레드는 이처럼 "프로세스를 구성하며, 프로세스가 할당 받은 자원을 활용하는 실행 흐름의 단위"라고 한다. 우리가 프로그램이라고 알고 있는 것이 실행되어 운영 체제에 의해 메모리 공간이 할당되면 프로세스가 생성되고 동적인 상태가 된다고 한다. 끙. 사실 여기에서 뭘 더 설명해야 하냐고 하면 할말이 없지만 좀 더 구체적인 정보가 필요했다. 프론트엔드 개발을 하면서 이 개념과 가장 밀접하게 관련이 있을 것 같은 브라우저를 통해 프로세스와 스레드를 이해하는 게 낫겠다 싶었다. 그러다가 NAVER D2에서 "최신 브라우저의 .. 2022. 6. 6. drawer in m.youtube ytm-engagement-panel ytm-engagement-panel-section-list-renderer.engagement-panel-comments-section .engagement-panel-section-list-background.draggable .engagement-panel-container .engagement-panel-section-list-header-wrapper .engagement-panel-content-wrapper ytm-section-list-renderer ytm-single-column-watch-next-results-renderer aria-hidden .player-size { position: relative; width: 100%; padding-.. 2021. 11. 21. [UI/UX] px에서 rem으로 최근에 "Why designers should move from px to rem — and how to do that in Figma" 라는 제목의 글을 읽었다. 평소에 관심 있었지만 항상 헷갈렸던 주제였는데 개념에 대한 설명과 실제 업무에서 쓰는 예시와 활용 방법 까지 알려주어서 너무 큰 도움이 되었다. 다음에 회사 디자이너 분들과 꼭 같이 읽고 싶다. 간단하게 정리를 해봤다. px 값의 문제점 절대값, 고정된 물리 값. 브라우저에는 기본값인 루트 폰트 사이즈가 있는데 보통 16px이다. 유저는 설정에서 이를 직접 변경할 수 있고, 시력 장애가 있는 유저의 경우 이 기능이 웹을 이용하는 데 중요할 수 있다. 그런데 px 값을 쓸 경우, 유저가 직접 자신에게 적절한 폰트 사이즈를 선택해도 이를 무시해버.. 2021. 11. 14. [211004] glowing effect, guidelines glowing effect box-shadow와 text-shadow로 구현한 것 같은데, 현실의 어떤 물리적인 사물을 이렇게 웹에서 구현할 때 너무 짜릿함... awesome guidelines 가이드라인 같은 단어만 보면 게걸스럽게 북마크에 담는 사람(주니어) 작은 글씨에 안티앨리어스 효과 transform: rotate(0.03deg) 놀랍도다 2021. 10. 4. 웹 페이지 로드 이후 HTML 엘리먼트의 위치가 바뀔 때 개츠비로 포트폴리오를 만들다가 메인이 좀 심심해보여서 이미지를 추가했다. 그런데 웹 페이지가 로딩 되는 동안 (1) 우선 이미지가 보이고, 웹 페이지가 전부 로드된 이후에야 (2) 그 이미지가 제 자리를 찾아가는 현상이 발생했다. div_1 position: relative; div_2 img position: absoulte; 알고보니 img가 두 단계로 중첩돼서 그런 거였다. 내 코드를 보면 중첩된 대로 div_1 → div_2 → img 가 차례대로 렌더링이 되고 나서 img의 position: absolute가 적용된다. (div_2는 div의 default position인 static이 적용되기 때문. 이 경우 엘리먼트는 순서대로 렌더링 된다.) 그러면 img는 div_2를 뛰어넘고 posit.. 2021. 5. 2. 이전 1 다음