반응형 스터디19 CSS 참고 키워드 - 반응형 웹사이트 참고하는 강의를 기준으로는 최근에는 모바일 환경에서 사이트를 더 자주 접속하므로, 우선적으로 모바일 환경에 맞추어 웹사이트를 개발한다. 이후에 데스크탑 같은 환경에 대응하게끔 CSS 코드를 추가하면 된다. 태그로 모바일 환경 대응픽셀 밀도 차이모바일 기기는 해상도는 매우 높지만 물리적인 화면의 크기는 작다. 그렇기 때문에 모바일 브라우저는 웹사이트를 표시할 때 일반적인 데스크톱 화면을 보여주는 것처럼 기본적으로 설정한다. 즉, 모바일 브라우저는 좁은 화면이지만, 넓은 화면을 가정해서 요소들을 배치하기 때문에 웹페이지가 작고 축소된 형태로 욱여 넣어지게 된다.뷰포트와 픽셀이러한 픽셀 밀도 차이 문제를 해결하기 위해 실제 물리적인 픽셀을 모바일 환경에 적절한 비율의 CSS 픽셀로 변환하는 작업이 필요하다.C.. 2024. 9. 25. CSS 참고 키워드 - CSS 요소 CSS를 학습하면서 기억하면 나중에 유용하겠다 싶은 키워드들을 기록한 글이다. 하나하나 상세히 설명을 적기엔 내용이 방대해서 필요하면 직접 검색을 하면서 그때그떄 활용을 하면 좋을 것 같다.올바른 단위 선택하기font-size (root element)%: 브라우저 설정보다 웹 사이트의 기본 폰트 크기를 작게하려면 해당 값을 사용할 수 있다.단위를 사용하지 않는 게 좋다font-sizerem: 루트 요소에 아무런 폰트 크기를 적용하지 않은 경우, rem이 적용된 font-size는 항상 이 루트 요소를 참조한다. em은 자식 요소에 적용하되 연쇄적으로 적용하면 크기 제어가 복잡해진다.padding, marginrem: 만약 요소 사이의 바깥쪽 여백을 고정하고 싶다면, 이때는 rem을 적용하지 않아도 된다.. 2024. 9. 24. [JS, React]이벤트 버블링과 실제 개념 활용 사례 개념이벤트 캡처링 / 버블링이벤트 버블링은 JS를 잠깐 배웠을 때 접했던 용어다. 대략적으로 이해하고 넘어갔었고 리액트 강의를 수강할 때는 이를 크게 의식할 일이 없었다. 대략적인 개념을 일단 짚고 넘어가 보자.웹 페이지의 엘리먼트들은 위와 같이 태그 안에 태그가 위치하는 계층식으로 이루어져 있다. 그렇기 때문에 HTML 요소에 이벤트가 발생하면 연쇄적인 이벤트 전파가 일어난다. 그 순서는 다음과 같다.이벤트 캡처링: 이벤트가 최상위 노드에서 시작하여 이벤트 타겟(이벤트가 발생한 요소)까지 내려가는 과정이다. 캡처링 단계에서는 이벤트가 도달하기 전에 상위 요소에서 먼저 감지된다. 그림에서는 windonw -> ... -> tr까지 이벤트가 순차적으로 전파되는 것이다.타깃 단계: 이벤트가 실제 타깃에 전달.. 2024. 8. 29. [Internet] 브라우저의 동작 방식 인터넷을 사용하는 이들은 빠른 로딩과 원활한 상호작용을 원한다. 이를 위해선 웹 성능이 뒷받침되어야 하는데, 이때 고려하는 주요 사항은 지연시간과 브라우저의 싱글 쓰레드 동작이다. 지연 시간과 같은 경우에는 웹 브라우저가 요청을 보내가 응답을 받아 이를 화면에 반영하는 데 걸리는 시간을 의미한다. 당연히 짧을수록 웹 페이지가 빠르게 로드되어 좋은 사용성을 가져온다.그리고 대부분의 웹 브라우저는 JS 엔진이 싱글 쓰레드 방식으로 작동한다. 즉 한 번에 하나의 작업만 처리할 수 있는 구조다. JS 코드를 실행하는 동안에는 다른 작업(UI 업데이트, 이벤트 처리 등)을 동시에 처리할 수 없다. 그렇기 때문에 무거운 JS 코드를 실행하게 되면 DOM 렌더링이나 이벤트 처리가 지연될 수 있다.이러한 점을 고려하면.. 2024. 8. 27. 이전 1 2 3 4 5 다음 반응형
