글쓰는 개발자

0. 왜 이 포스팅을 쓰게되었는지에 대하여. 이 포스팅은 계획에 없던 포스팅이다. 사실 CSS Triggers에 대한 포스팅은 저번 포스팅으로 끝내려고 했었다. 근데 왜 또, 포스팅을 작성하고 있냐...면, 사실 내가 숱한 기술 블로그 포스팅들을 보면서 답답했던 부분이, 왜 이론은 엄청 방대하고 자세하게 설명들을 하면서 쉽고 직관적이며 이해하기 쉬운 예제는 잘 안 넣어두시는 걸까, 였었다. 그래서 예시가 있으면 이해가 더 쉬울 것 같은 포스팅에는 그때그때 예시를 될 수 있으면 넣으려고 하는데...그래서 저번 포스팅이었던 [CSS] CSS Triggers 에서도 역시나, CSS Triggers에 대한 쉬운 예제 코드를 넣으려 했었다. 근데 아뿔싸, 예상치 못 한 현상을 봐버린거다. CSS Trigger 그..

0. Rendering Pipeline 브라우져는, HTML을 어떻게 해석해서 우리의 눈에 버튼과 텍스트 필드와 아이콘과 테이블과, 지금 읽고 있는 이 글을 보여주게될까? 보통 이에 대한 설명을 단순하게는 'HTML을 해석해서 보여준다'라고들하지만, 순차적인 단계의 입장에서보면 대략 아래와 같은 절차를 거치게된다. 위 그림은 크로미움에서 사용하는 Blink의 렌더링 엔진에서 제공하는 그림이다. 브라우져 별로 사용하는 렌더링 엔진은 다 다르지만, 대부분 위와같은 프로세스에서 크게 벗어나지 않는다. * 브라우저별 Rendering Engine Blink : 크롬, 신형 Edge Gecko : 파이어폭스 WebKit : 사파리 Trident : IE EdgeHTML : 구형 Edge 1. 화면의 요소는 언제든..

한줄요약. !important >>> inline >>> id선택자 >>> class명 >>> HTML 태그명 >>> DOM구조의 상위 상속 위에 요약한 것과 같이 아래 정리된 번호를 기준으로 낮은 번호가 우선순위가 높습니다. 즉, 1번과 2번이 동일한 Element를 가리키면서 CSS를 정의한다면, 1번 내용이 적용됩니다. 1. !important 가장 높은 우선순위입니다. 해당 키워드는 정의되는 CSS의 요소 값 뒤에 위치하게 됩니다. h3태그에 대해서 아래와 같은 CSS요소가 정의되어있다면 h3태그의 색상이 빨갛게 나오게 됩니다. .title-box{color: red !important;} .title-box{color: blue;} 타이틀 CSS는 일반적으로 후정의사항이 우선순위가 높게 책정됩니..