상세 컨텐츠

본문 제목

스타트업 인지도와 SEO, 그리고 CSS (1) - 선택자

Tech

by 튜나갓 2021. 11. 12. 00:56

본문

스타트업은 인지도가 부족하다. 

개발자의 입장에서 스타트업의 인지도를 높일 방법은 무었이 있을까 ?

여러 정답이 있을것이다. 그 중 나는 SEO에 초점을 맞추었다. 

(검색시 노출순위 빈도가 높아진다면 회사의 인지도에는 지대한 도움이 있을것이기 때문.)

 

SEO를 높이려면 사이트 이탈 가능성이 낮고 체류시간이 길어야 한다. 

위의 2가지를 높이려면, 사이트의 로딩속도가 이슈다. 

어떤 웹 페이지를 열었는데 로딩이 길면 사용자는 이탈할것이기 때문.

 

자. 그럼 css 의 측면에서 로딩속도를 높이려면 무엇을 해야하나?

일단 css의 로딩시간을 줄여야한다.

여러 방법이 있는데 지금은 css 선택자에 대해 다뤄보겠다

 


 

선택자 규칙

규칙을 정하는 원칙은 두가지로 정했다.

 

1. 성능저하 원인을 없애고, seo에 도움이 되게

2. 유지보수가 쉽게

 

일단 스타일 엔진은 키 선택자로부터 시작하여 왼쪽으로 이동하면서 엘리먼트가 규칙에 적합한지를 확인한다.

따라서 선택자는 스타일 엔진은 엘리먼트와 관계없는 규칙을 매칭 하는데 시간을 낭비하지 않게, 즉 매칭을 줄이는 방법으로 사용해야 한다.

 

- ID 선택자 : 우선순위가 높고 한 번밖에 선언을 할 수 없으니 쓰지 않는 것이 좋다.

- Tag 선택자 : 상위에 tag선택자가 있으면 수많은 html 태그를 모두 조회하고 하위 선택자로 간다. 따라서 브라우저 성능 저하의 원인이 되어서 사용을 피한다.

- Universal 선택자(*) :  모든 요소를 선택함으로 브라우저 성능 저하의 원인이 되니 사용을 피한다.

- Class 선택자 : 개발자가 임의의 이름을 붙이고 css에 정의해주면 된다. 따라서 css 내에 독립적으로 존재해 css가 읽는 속도면에서도 좋고, 작성자의 작성 규칙에 따라 우선순위가 바뀌기 때문에 효율적으로 사용하기 좋다.

 

따라서 아래와 같은 규칙으로 선택자를 정하기로 했다.

 

- ID, Tag, Universal 을 제외한 class 선택자 사용

- 선택자는 상위 선택자를 포함하여 3개 이상 작성되지 않게

 

 

 

 

 

 

IT기술을 통해
사람과 사람의 연결을 돕고
함께 성장해나가는
서비스를 만들어 갑니다.

브릿지코드(BRIDGE CODE)는 대기업 및 금융업 종사자들과 함께 시작, 팀은 웹 애플리케이션 개발에 대한 깊은 노하우를 보유중에 있습니다. 국내 리걸테크 및 핀테크 서비스를 제공하는 스타트업입니다. "사람과 사람의 연결"을 기술을 통해 만들어나가고 있습니다.

 

택슬리 바로가기

 

택슬리 :: SIMPLY.TAXLY

세금은 어렵지만 TAXLY는 쉬워요

taxly.kr

브릿지코드 바로가기

관련글 더보기

댓글 영역