브라우저가 css 셀렉터를 해석하는 방법과 성능 향상 방법

브라우저가 css 셀렉터를 해석하는 방법브라우저가 css 선택자를 해석하는 방식은 일반적으로 css를 작성하는 방식과는 반대다. 브라우저는 오른쪽에서 왼쪽으로 css 선택자를 해석 한다.div p a { } 예를 들어, div p a 라는 선택자가 있다면, 브라우저는 먼저 모든 a 태그를 찾고, 그 중에서 부모 요소가 p 인 것을 찾고, 마지막으로 이 중에서 또 다시 부모 요소가 div인 것을 찾는다. 이러한 방식은 브라우저가 불필요한 요소를 검사하는 시간을 줄이는 데 도움이 된다. 왜냐하면 가장 일반적인 요소 (여기서는 a 태그)부터 검사를 시작하므로, 좀 더 빠르게 원하는 요소를 찾을 수 있기 때문이다.  css 선택자의 성능 향상 방법선택자의 복잡성 줄이기가능한 한 간단한 선택자를 사용하는 것이 좋..

2024.06.28

CSS 방법론

현재 CSS 방법론이라고 사람들이 말하는 것은 크게 3가지로 구분됩니다. 해당 방법론이 무엇이고 어떠한 장점과 단점을 가지고 있는지 알아봅니다. 3가지 방법론 중 무엇 하나 정답이라고 말할 수 없으며 공부를 하다 보면 자신에게 맞는 방법론이 보이게 됩니다. 그 방법론을 프로젝트에 맞게 또 공통 가이드화 하여 협업이 용이하게 사용하는게 더 중요합니다. 왜 CSS 방법론을 사용할까요? 협업 시 사람마다 다른 코드 구조 및 스타일 정의 (방법론을 사용하는 이유는 첫 번째 이유가 가낭 크다고 생각합니다.) 서로 다른 네이밍 규칙 유지보수가 어려운 코드 타인이 작성한 코드를 이해하고 분석하는데 드는 시간의 증가 복잡해지는 선택자 등 위 이유 이외에도 추가적으로 더 있을 수 있다. 코드의 규칙성(획일성)을 확보하기..

2022.12.07

CSS 속성 해제 방법

반응형 웹 구축 시 지정된 CSS 속성을 해재해야 하는 상황이 발생한다. 이때 해당 속성에 맞는 해재 방법으로 스타일을 주면 된다. 고정->유동.auto{width: auto;} float.float{ float : none } position.position{ position:static; left:0; top:0; }.position{ position:relative; left:0; top:0; /* 권장 */ } border.border{ border:0 none; } background.background{ background:none; } font.font{ font-style:normal; font-weight:normal;} margin/padding.mp{margin:0; pa..

2022.01.05

스크롤바 숨기기

스크롤바 숨기기 ul { scrollbar-width: none; -ms-overflow-style: none;}ul::-webkit-scrollbar { display: none;}

2022.01.04

모바일 CSS 스타일링

모바일 CSS 스타일링모바일의 화면은 좌우로 좁다. 따라서 길게 스크롤이 발생할 수 있다. 바로가기 메뉴처럼 썸네일 로 만들어진 메뉴를 아래로 배치하면 사용자들이 보지 못하고 넘어갈 가능성이 있 기때문에 적절한 메뉴갯수 와 함께 이미지를 사용해야 한다. 각 디바이스에 맞는 고정형 사이트가 있고 어떤 디바이 스에서 보던 잘 맞는 가변형 사이트가 있다. 서브페이지 에서는 반드시 뒤로가기 버튼과 첫화면으 로 돌아가는 버튼이 존재해 야 한다. 가로보기와 세로보기 테스트를 해도 화면벗어남이나 깨짐이 없어야 한다. 고정형 px값을 사용하지 않고 유동형 레이아웃(%)를 사용한다.

2021.12.22

웹접근성 skip navi

skip navi란? 사용자 편의 및 웹 접근성향상을 위한 skip navi를 body 최상단에 넣어준다. 마우스나 키보드를 사용하지 못해 tab키를 사용해야 하는 사용자에게 사이트 최상단에 바로가기를 만들어 줌으로써 원하는 영역에 바로 갈 수 있게 도와주는 기능을 한다. 사용예제 #skipNav{position:relative; width:100%; overflow:hidden;} #skipNav a{display:block; height:1px; margin-bottom:-1px; overflow:hidden; text-align:center;} #skipNav a:hover, #skipNav a:focus, #skipNav a:active{height:auto; padding:5px 0; backg..

2021.11.19