안녕하세요
현재 인턴 아르바이트로 HTML+CSS+JSP를 공부해가면서 실무를 하고 있는 학생입니다.
저는 저희 회사 내부에서만 사용되는 회사 제품(보안/인증 서비스) 테스트 페이지 개발을 돕고 있는데, 일주일 전에 해당 페이지의 UI를 통일하라는 지시를 받아서 소스를 고쳤습니다.
방식1. 제가 모르는 다른 페이지의 동일 태그 사용 항목들이 변경될까봐 해당 html/jsp 소스의 특정 태그들 안에 직접 스타일을 수정하였습니다.
ex)
<div class="어쩌고">
<div class="저쩌고">
<h5 class="이러쿵저러쿵">
를
<div class="어쩌고" style="float: left;">
<div class="저쩌고">
<h5 class="이러쿵저러쿵" style="margin-bottom : 10px">
로 변경
방식2. 해당 html/jsp 소스 내에서만 수정하고 싶은 동일 태그 사용 항목들이 여러개라 소스 앞부분에 스타일을 적용하였습니다.
ex)
<style>
.이거, .저거{
font-size : 15px;
}
.요거, .죠거 {margin-bottom : 15px;}
</style>
방식3. 모든 페이지의 특정 태그를 수정하고 싶을 때 css 소스 하나에 구문 추가하였습니다.
ex)
header .그거:hover,
header .그거:focus{
color:#B70000;
cursor: pointer;
}
방식4. (스타일시트와는 관계 없지만 같이 묶어서 질문합니다) 공통으로 사용되는 부분을 tag파일로 독립시켰습니다.
ex)
기존에 있던 홈페이지.jsp와 나머지 페이지에서 사용되는 bottom.tag 안에서 footer 태그 내용이 거의 비슷해서 따로 footer.tag를 만들고 <tag:footer/>로 불러오게 했습니다. footer 태그에 마지막 페이지 수정 날짜도 들어가기 때문에, 쉽게 찾아서 쉽게 고치게 만들 의도도 있었습니다.
그런데 크롬 개발자 모드로 검사 해가면서 소스를 수정해보던 도중, 매 페이지마다 여러 장의 CSS가 적용되어 있고, 해당 CSS 안에서도 안쓰이는 구문들이 상당히 많다는걸 알게되었습니다. 직접 회사에서 만든 스타일시트가 아니라 bootstrap에서 정식 구매한 스타일시트 묶음이라 그런 것 같은데, 그 스타일시트들 안에서도 서로 중복되는 구문들이 많습니다.
그래서 궁금해졌는데, 안그래도 여러 스타일시트가 매 페이지마다 로드가 되는 환경에서, 제가 임의적으로 추가한 구문들까지로 적용되면 웹 로딩 속도가 많이 떨어지지 않을까요? 제가 느끼기엔 별 차이가 없는데, 이게 원래 사용되는 방식이라 괜찮은 건지 많이 수정을 안해서 차이가 안느껴지는 건지를 모르겠습니다.
질문 정리:
동일 항목을 여러 방식으로 스타일 적용 시켰을 때, 웹 로딩 속도가 사용자가 불편을 느낄 정도로 많이 떨어지는지
1-1. 그렇다면 스타일시트에서 사용되지 않는 구문이나, 중복돼서 필요 없는 구문을 지워야 할 필요가 있는지 + 쓰이지 않는 구문을 일일이 찾지 않고 한번에 찾아 지울 수 있는 방법이 있는지
실제 현장 웹 개발자들은 웹 UI 제작시 어떤 방식으로 하는지 (bootstrap에서 구매 후 스타일시트들을 모조리 소속 회사 스타일에 맞게 바꾼다, 안쓰이는 구문이 있어도 냅둔다, 등등)
제가 수정하고 있는 페이지는 네이버 같이 외부 이용자들이 많이 이용하는게 아니라 저희 회사원 열 몇 명들끼리만 쓰는 용도라 최적의 로딩속도가 필수적인건 아니지만, 그래도 궁금해서 질문해봅니다.