금백조의 개발 블로그

[CSS]이슈사항으로 알아보는 CSS 적용법 3가지(인라인 스타일/내부 스타일 시트/외부 스타일 시트) 본문

Web/CSS

[CSS]이슈사항으로 알아보는 CSS 적용법 3가지(인라인 스타일/내부 스타일 시트/외부 스타일 시트)

금백조 2021. 1. 23. 18:50
반응형

서론

 

현업에서 개발 도중 웹 화면에 표시되는 문서를 보존하기 위해 문서의 HTML, CSS 자체를 DB에 저장하는 로직이 있었습니다. 그런데 적용된 CSS가 인라인 스타일(Inline Style) 방식으로 되어있어서 코드량이 많아 짤려서 Database에 저장되는 이슈를 테스트 때 발견했습니다. 컬럼의 MAX 길이를 조정하거나 외부 스타일 시트로 적용할 수 없는 상황이었으므로 HTML, CSS 코드량을 최소화하기 위해 내부 스타일 시트 방식으로 CSS를 개선했습니다. 이 개선 과정에서 정리하게 된 CSS 스타일 적용방법 3가지를 예제를 통해 소개해보겠습니다.

본론

 

만약 아래와 같이 품목, 품목명, 수량을 보여주는 HTML 문서를 만든다고 생각해봅시다.

 

 

1. 인라인 스타일(lnline Style)

 

인라인 스타일이란 아래의 예시처럼 HTML 내부 태그에 스타일을 지정하는 방식입니다. 

 

[예제 : InlineStyleExample.html]

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>품목을 보여주는 문서입니다.</h3>
<table style = "border-collapse: collapse;width: 600px;">
  <tr>
    <th style = "border: 1px solid #ddd;padding: 10px;width: 200px;background-color: #F5F5F5;">품목코드</th>
    <th style = "border: 1px solid #ddd;padding: 10px;width: 200px;background-color: #F5F5F5;">품목명</th>
    <th style = "border: 1px solid #ddd;padding: 10px;width: 200px;background-color: #F5F5F5;">수량</th>
  </tr>
  <tr>
    <td style = "border: 1px solid #ddd;padding: 10px;background-color: #FFF8DC;">ITEM001</td>
    <td style = "border: 1px solid #ddd;padding: 10px;background-color: #FFF8DC;">품목1</td>
    <td style = "border: 1px solid #ddd;padding: 10px;text-align:right;background-color: #FFF8DC;">100</td>
  </tr>
  <tr>
    <td style = "border: 1px solid #ddd;padding: 10px;background-color: #FFF8DC;">ITEM002</td>
    <td style = "border: 1px solid #ddd;padding: 10px;background-color: #FFF8DC;">품목2</td>
    <td style = "border: 1px solid #ddd;padding: 10px;text-align:right;background-color: #FFF8DC;">200</td>
  </tr>
  <tr>
    <td style = "border: 1px solid #ddd;padding: 10px;background-color: #FFF8DC;">ITEM003</td>
    <td style = "border: 1px solid #ddd;padding: 10px;background-color: #FFF8DC;">품목3</td>
    <td style = "border: 1px solid #ddd;padding: 10px;text-align:right;background-color: #FFF8DC;">300</td>
  </tr>
</table>
</body>
</html>

InlineStyleExample.html
0.00MB

1-1. 인라인 스타일 방식의 장점

 

사실 외부 스타일 시트 방식으로 개선하는 것이 수정하기도 쉽고 이후에 관리하기도 편하다고 생각합니다. 그럼에도 불구하고 인라인 스타일 방식을 사용하는 경우는 외부 스타일 시트 방식을 사용할 수 없는 상황이나 내부 스타일 시트 방식을 사용할 경우 CSS 우선순위에 따라 충돌이 발생할 수도 있으므로 가장 우선순위가 높은 인라인 스타일 방식으로 따로 지정하여 사용해야 할 경우가 있습니다.

 

1-2. 인라인 스타일 방식의 단점

 

위와 같은 방식으로 HTML이 작성될 경우 품목4, 품목 5... 가 추가될수록 그 행에 대한 CSS도 지속적으로 추가가 될 것입니다. 그러면 HTML 코드량은 방대해질 것이고 코드의 가독성이 떨어지게 됩니다. Database에 저장해야 될 필요성이 있는 경우 저가 겪었던 문제를 겪을 수 있습니다.  또한 행의 색깔을 다른 색깔로 수정해야 한다면 전체 행에 대해 CSS를 수정해야 하므로 그만큼 시간이 많이 소요될 것입니다.

 

2.내부 스타일 시트(Internal Style Sheet)

 

내부 스타일 방식은 <style> 태그를 사용하여 스타일을 지정하는 방식입니다.

 

[InternalStyleSheetExample.html]

<!DOCTYPE html>
<html>
<head>
<style>
table{
    border-collapse: collapse;
    width: 600px;
}
th{
    border: 1px solid #ddd;
    padding: 10px;
    width: 200px;
    background-color: #F5F5F5;
}
td{
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #FFF8DC;
}
.num-td{
    text-align:right;
}
</style>
</head>
<body>
<h3>품목을 보여주는 문서입니다.</h3>
<table>
  <tr>
    <th>품목코드</th>
    <th>품목명</th>
    <th>수량</th>
  </tr>
  <tr>
    <td>ITEM001</td>
    <td>품목1</td>
    <td class = "num-td">100</td>
  </tr>
  <tr>
    <td>ITEM002</td>
    <td>품목2</td>
    <td class = "num-td">200</td>
  </tr>
  <tr>
    <td>ITEM003</td>
    <td>품목3</td>
    <td class = "num-td">300</td>
  </tr>
</table>
</body>
</html>

InternalStyleSheetExemple.html
0.00MB

각 태그별로 스타일이 작성되던 것을 <style>태그 안에 분리하여 작성했습니다. 또한 수량을 나타내는 행은 오른쪽 정렬하기 위해 .num-td 라는 클래스를 설정하여 해당 행들에 적용했습니다.

 

2-1. 내부 스타일 시트 방식의 장점

 

인라인 스타일 방식보다 비교적 HTML 코드가 깔끔해진 것을 위의 예시를 통해 볼 수 있습니다. 또한 수정이 필요한 경우 <style> 태그내에 작성된 부분은 수정하면 되므로 수정이 용이합니다.

 

2-2. 내부 스타일 시트 방식의 단점

 

만약 동일한 CSS를 여러 페이지에 적용할 경우 각 페이지마다 <style>태그를 작성해주어야 할 것입니다. CSS를 수정해야 할 경우 각 페이지에 적용하던 CSS를 전부다 수정해주어야 할 것입니다. 그리고 내부 스타일 시트 방식을 사용할 경우 의도하지 않은 CSS 충돌로 인해 잘나오던 화면이 이상하게 변경될 수가 있습니다. 내부 스타일 시트 방식이 외부 스타일 시트 방식보다 CSS 우선순위가 높으므로 외부 스타일 시트로 적용되던 것이 내부 스타일 시트 방식으로 적용되어 문제가 생길 수 있습니다. 또한 HTML 파일 내부에 존재하므로 CSS를 수정하기 위해 HTML이 포함된 파일 자체를 수정해야 하는 것도 단점이라면 단점으로 볼 수 있습니다.

 

3. 외부 스타일 시트(External Style Sheet)

 

외부 스타일 방식은 CSS를 외부 파일 내에 작성하여 스타일을 지정하는 방식입니다.

 

[ExternalStyleSheetExample.html]

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="ExternalStyleSheet.css"/>
</head>
<body>
<h3>품목을 보여주는 문서입니다.</h3>
<table>
  <tr>
    <th>품목코드</th>
    <th>품목명</th>
    <th>수량</th>
  </tr>
  <tr>
    <td>ITEM001</td>
    <td>품목1</td>
    <td class = "num-td">100</td>
  </tr>
  <tr>
    <td>ITEM002</td>
    <td>품목2</td>
    <td class = "num-td">200</td>
  </tr>
  <tr>
    <td>ITEM003</td>
    <td>품목3</td>
    <td class = "num-td">300</td>
  </tr>
</table>
</body>
</html>

[ExternalStyleSheet.css]

table{
    border-collapse: collapse;
    width: 600px;
}
th{
    border: 1px solid #ddd;
    padding: 10px;
    width: 200px;
    background-color: #F5F5F5;
}
td{
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #FFF8DC;
}
.num-td{
    text-align:right;
}

ExternalStyleSheetExample.html
0.00MB
ExternalStyleSheet.css
0.00MB

ExternalStyleSheet.css 파일을 따로 분리하여 작성했고 <link>태그에 href 속성으로 파일명을 작성하여 외부 스타일 시트를 불러와 CSS를 적용했습니다. href 경로는 상대 경로 이므로 ExternalStyleSheetExample.html 파일과 ExternalStyleSheet.css 파일이 같은 경로내에 존재해야 적용됩니다.

 

3-1. 외부 스타일 시트 방식의 장점

 

외부 스타일 방식은 CSS가 아예 분리된 파일이므로 내부 스타일 시트 방식과 다르게 수정 시에도 CSS 파일만 수정하면 됩니다. 이는 상당히 효율적이라고 볼 수 있습니다.

 

 

결론

 

CSS 적용방식에서 문제를 겪었던 일을 계기로 CSS 적용법 3가지에 대해 정리해보았습니다. 각 적용법에 대한 특징을 이해하고 상황에 따라 적용해야겠습니다!

반응형