04. HTML과 CSS 이해하기

qpress 2020년 2월 19일 24

앞 글에서 HTML 태그는 Style 속성을 갖는다고 설명했습니다. 이 Style 속성에는 수많은 세부 속성들이 존재 합니다. 단순히 색깔이나 크기 뿐만 아니라 공간, 배치 등으로 확장하면 속성 값이 무수히 많아지게 되기 때문입니다.

<p style="color:white;background-color:black;width:200px;height:100px;border:1px solid red">
    매우 많은 속성 값이 존재 합니다.
</p>

예제에서 P 태그에 많은 Style이 추가 되었습니다.
Style 속성 내에 규정되는 실제 style 관련 내용들을 CSS라고 이해하면 됩니다.

Style 속성 = CSS

CSS는 Cascading Style Sheets 의 약자인데, 여기서 ‘Cascading’ 이라는 말은 ‘단계적, 단층적’의 의미를 지닙니다. 실제 HTML 문서를 만들어 보면 알겠지만 HTML 태그들은 특정 태그 하부에 들어가게 되는 경우가 많습니다. 위 예제의 P 태그 역시 문서상으로는 Body 태그 하부에 속하고, Body 태그는 Html 태그 하부에 속합니다. 즉, 계층적 구조를 가지게 되는데, Style은 상위 요소의 Style이 하위 요소로 상속 되는 특성을 지닙니다. 그래서 Cascading이라는 용어를 사용했다고 볼 수 있습니다.

Class 사용

CSS 코드를 태그에 추가하는 방식(위의 예제)으로 하면 태그 설정의 길이가 길어지고 복잡해집니다.
그리고, 문서 내에 수많은 태그가 존재하는데, 일일이 이렇게 속성을 부여하다 보면 그 번그로움은 차치하더라도 무엇보다 문서의 일관성 관리에 치명적인 문제가 생깁니다. 한 페이지로만 구성된 사이트라면 큰 문제는 없겠지만 페이지 수가 몇개만 되더라도 한 사이트에서 페이지 마다 다른 서식이 적용되는 문제가 생길 수 밖에 없습니다. 또한 서식을 변경해야 할 때 모든 페이지의 해당 태그를 일일이 다 수정해야 하는 재앙이 발생합니다.

이러한 비효율성을 해결하기 위해서 사용되는 것이 바로 ‘Class’ 입니다.

<html>
    <head>
        <style>
           .myclass{
                   color:white;
                   background-color:black;
                   width:200px;
                   height:100px;
                   border:1px solid red;
           }
        </style>
    </head>
    <body>
        <p class="myclass">
            Class를 적용하니 깔끔해졌죠?
        </p>
        <p class="myclass">
            이 문단도 위 문단이랑 동일한 모양새를 가져요^^
        </p>
    </body>
</html>

예제에서 P 태그에 직접 지정됐던 Style이 ‘myclass’라는 이름으로 head 영역에 별도로 지정된 것을 볼 수 있습니다. class=”myclass”라는 부분 또한 앞 글에서 설명한 태그의 속성(Attribute) 중의 하나라고 할 수 있습니다. Class 이름은 Head의 <style></style> 내부에 ‘.class이름’ 으로 기재 되어 있습니다. 이러한 방식은 CSS 문법이라고 이해하시면 됩니다.

CSS 파일을 별도로 분리

웹사이트가 1 Page 사이트라면 위와 같이 Head에 Class를 지정해 두어도 큰 문제가 되지 않습니다. 그런데 여러페이지를 가진 사이트라면 각각의 페이지 Head에 동일하게 Class를 지정해야되는 문제가 생깁니다. 같은 내용을 여러번 반복해서 기재하게 되고, 수정 시에도 모든 페이지를 다 수정 해야 합니다.

CSS, 즉, Class를 정의한 별도의 문서를 두고 이 문서를 사이트 내의 모든 페이지가 가져다 쓰는 형태로 할 수 있으면, 별도의 CSS 문서만 관리하면 되는 효율성이 생깁니다.

이를 위해 사용하는 것이 ‘Link’ 라는태그 입니다.
아래 예제의 Head 영역을 보면 쉽게 이해가 될 것입니다.

<html>
    <head>
        <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
        <p class="myclass">
            Class를 적용하니 깔끔해졌죠?
        </p>
        <p class="myclass">
            이 문단도 위 문단이랑 동일한 모양새를 가져요^^
        </p>
    </body>
</html>
/* mystyle.css 파일 내용 */
.myclass{
   color:white;
   background-color:black;
   width:200px;
   height:100px;
   border:1px solid red;
 }

이제 mystyle.css에 필요한 Style의 Class 들을 정의하고 여러 HTML 문서에서 이 파일을 Link 시킨 후 해당 Class를 사용하면 됩니다.