박민섭

박민섭

어제보다 더 나은 코드를 위해!

html/css - CSS기초

업데이트:

CSS(Casting Style Sheets)는 HTML과 함께 웹 표준의 기본 개념이다. HTML이 웹 문서의 뼈대를 만드는 것이라면, CSS는 웹 문서의 디자인 요소를 담당하고 있다.

스타일과 스타일 시트

웹에서의 스타일은 미리 약속한 스타일 속성을 입력해 웹을 디자인 하는 것을 말한다. 그리고 한 문서에서 반복해 쓰이는 스타일들을 모아 놓은 것을 ‘스타일 시트’ 라고 부른다.

왜 스타일을 사용하는가?

웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.

웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다. HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준의 시작이다. 이렇게 내용과 디자인이 구분되어있어 내용과 디자인을 각각 수정해도 영향을 미치지 않고 바꿀 수 있다.

다양한 기기에 맞게 탄련적으로 바뀌는 문서를 만들 수 있다.

기존 HTML문서는 상황에 맞는 문서를 따로 작성해야 했다. 하지만 CSS를 이용하면 HTML로 작성된 내용은 두고 대상 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 어울리게 볼 수 있다.

스타일 형식

태그와 비슷하게 생겻지만 조금 다르다.

p { text-align : center; } /*텍스트 단락을 중앙에 정렬하는 스타일 규칙*/

p : 선택자
text-align : 스타일 속성
center : 속성 값

  • p는 앞으로 만들 스타일 규칙을 어디에 적용할 것인지를 나타낸다.

  • 중괄호 안에 들어가는 속성과 속성 값은 콜론(:)으로 구분한다.

스타일 예
h2 {font-size:20px; color:orange;}
p {color:blue;}

스타일 시트

웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많다. 이런 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어 놓은 것을 ‘스타일 시트’라고 한다.

스타일 시트는 문서 안에서 사용할 스타일 규칙들을 정의한 내부 스타일 시트와 별도의 스타일 파일을 만들어 연결해 사용하는 외부 스타일 시트로 나뉜다.

내부 스타일 시트

스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 하기 때문에 모든 스타일 정보는 <head>태그와 </head> 태그 안에서 정의해야 하고 <style>태그와 </style>태그 사이에 작성한다.

<!doctype html>
<html lang="ko">
    <head>
        <title>온라인 프로필</title>
        <meta charset="utf-8">
        <style>
            section {
                width: 500px;
                padding: 15px; /*테두리와 내용 사이 여백*/
                border: 5px solid gray; /*테두리 스타일*/
            }
        </style>
    </head>
    <body>
        <div id="container">
            <section>
                <h2>Who am i</h2>
                <p>프론트엔드 웹 기술에 관심이 많습니다.</p>
            </section>
        </div>
    </body>
</html>

외부 스타일 시트

웹 사이트는 한 문서로 끝나는 경우가 거의 없다. 대부분의 경우, 디자인의 일관성을 위해 같은 스타일을 여러 웹문서에 사용한다. 하지만 각 문서마다 똑같은 내부 스타일 시트를 만든다면 서버 공간이 매우 낭비될 것이다. 이런 불편을 해소하기 위해 스타일 정보를 따로 .css라는 파일 확장자로 저장해놓은 것을 외부 스타일 시트라고 한다.

기본형
<link rel="stylesheet" href="외부 스타일 파일 경로">

인라인 스타일

간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다. 이런 방법을 인라인 스타일이라고 한다.

<h1>블루베리와 항산화 효능</h1>
<p style="color:blue;"> 블루베리는 항상화제인... </p> 
/*대상에 스타일을 직접 지정*/

주요 셀렉터

전체 셀렉터 - 모든 요소에 스타일 적용하기

* { 속성 : 속성 값; 속성 : 속성 값; ..}

전체 셀렉터는 말 그대로 스타일을 모든 요소에 적용할 때 사용한다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용한다. 기호는 *을 사용한다.

전체 셀렉터는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다. 예를 들어 웹 문서를 브라우저에 띄울 때 브라우저 창에 바짝 붙지 않도록 문서 내용 바깥 쪽에는 ‘마진’을 두고 내용 안쪽에는 ‘패딩’이라는 여백을 둔다. 이러한 여백 때문에 디자인이 깔끔하지 않을 경우 전체 셀렉터를 이용해 여백을 0으로 지정할 수 있다.

태그 셀렉터 - 특정 태그를 사용한 요소에 스타일 적용하기

태그 셀렉터는 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. 예를 들어 p셀력터를 정의하면 웹 문서의 모든 요소에 스타일이 적용된다.

<!doctype html>
<html lang="ko">
    <head>
        <title>블루베리</title>
        <style>
            h2 {
                color: blue;
            }
            p {
                font-size: 12px;
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <h1>
            블루베리에 관한 연구
        </h1>
        <h2>블루베리와 효능</h2>
        <p>블루베리는...</p>
        <h2>블루베리와 노화</h2>
        <p>USDA..발견했음.</p>
    </body>
</html>

클래스 셀렉터 - 특정 부분에 스타일 적용

태그 셀렉터를 이용하면 그 태그가 사용된 모든 요소에 적용된다. 그런데 같은 태그라도 어떤 곳에는 다른 스타일을 사용하고 싶다면 어떻게 해야할까? 이럴때 특정 부분에만 스타일을 적용할 때 사용하는 것이 클래스 셀력터이다.

클래스 셀렉터는 태그 대신 클래스 이름을 사용하는데 클래스 이름은 기억하기 쉬운 이름으로 지정하는 것이 좋다. 또한 클래스 이름 앞에는 반드시 마침표(.)를 붙여야 한다.

  • 글자를 파란색으로 지정하는 .bluetext라는 클래스 스타일
.bluetext {
color:blue;
}
<h2 class="bluetext">와우</h2>

이렇게 지정해두면 클래스 셀렉터를 class="bluetext"처럼 어느 태그에서나 사용할 수 있다.

한번에 둘 이상의 클래스 스타일을 적용할 수도 있다. 이 경우는 공백으로 구분해서 두개의 스타일을 나란히 적는다.

<style>
    .browntext {
        color: brown;
    }
    .boldtext {
        font-weight: bold;
    }
</style>
<h2 class="bluetext">와우</h2>
<p>사람에게 구체적으로 <span class="browntext boldtext">도움을 줄거야</span><br>
</p>

id 셀릭터 - 특정 부분에 스타일 적용하기

id셀렉터도 클래스 셀릭터와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용한다. 마침표(.) 대신 # 기호를 사용하다는 점만 제외하면 클래스 셀렉터와 사용법이 같다.

클래스 셀렉터와 가장 큰 차이점은 클랙스 셀렉터는 문서 안에서 여러번 적용할 수 있는 스타일인 반면 id셀렉터는 문서 안에서 한 번만 적용할 수 있다는 점이다.

id 셀렉터는 중복해서 사용할 수 없기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스키립트 프로그램에서 웹 요소들을 구별하기 위해 자주 사용된다.

<style>
    #container {
        width: 600px; /*너비*/
        padding: 15px; /*테두리와 내용 사이 여백*/
        border: 1px dotted gray; /*테두리 스타일*/
    }
</style>
<div id="container">
    <h1>회사 소개</h1>
</div>

그룹 셀렉터 - 둘 이상 요소에 같은 스타일 적용하기

셀렉터로 스타일을 정의하다 보면 여러 셀렉터에 같은 스타일이 사용되는 경우가 있다. 이럴 때 쉼표(,)로 구변해 셀렉터를 나열한 후 스타일은 한번만 정의하면 소스가 간단해진다.

변경 전
h1{
	text-align:center;
}
h2{
	text-align:center;
}

변경 후
h1, h2 {
	text-align:center;
}

캐스케이딩 스타일 시트(CSS)

캐스케이딩(Cascading)의 의미

캐스케이딩은 위에서 아래로 흐르는 스타일 시트라는 뜻으로, 셀렉터에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻한다.

예를 들어 텍스트 단락의 글자 색은 문서 전체의 글자 색을 정해 놓은 스타일 규칙을 따를 수 있고 브라우저에서 기본적으로 정한 색을 따를 수도 있고 웹 제작자가 정한 p셀렉터의 색을 따를 수 있다. 만약 스타일이 동시에 적용된다면 텍스트 단락의 글자 색은 어느 스타일 규칙을 따라야 할까?

이렇게 스타일 간의 충돌을 막기 위한 방법이 캐스캐이딩이다.

캐스캐이딩의 두가지 원칙
  1. 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다.
  2. 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.

스타일 우선 순위

스타일 우선순위는 캐스케이딩에서 가장 중요하다. 이 때 우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말한다. 아래 순서는 가장 중요한 순서부터 차례로 나열한 것이다.

중요도(importance)

  1. 사용자 스타일 시트
    • 사용자 스타일 시트란 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트를 말한다. 이 스타일 시트는 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수 없다.
  2. 제작자가 만든 스타일 중 !importance가 붙은 스타일
    • 제작자 스타일 시트는 사이트를 제작하며 만든 스타일 시트를 말한다. 스타일을 정의할 때 다른 어느 스타일보다 최우선으로 적용해야 할 스타일에는 !importance를 붙여 우선도를 높일 수 있다.
  3. 제작자가 만든 일반 스타일
    • 사이트를 제작하며 만든 스타일들이다.
  4. 기본적인 브라우저 스타일 시트
    • 브라우저마다 기본적으로 지정하고 있는 스타일이다.

적용 범위가 어디까지인가?

하나의 요소에 여러 스타일이 충돌한다면 스타일 적용 범위에 따라 우선순위를 정할 수도 있다. 스타일 적용 범위가 좁을수록 즉, 정확히 필요한 요소에만 적용할 스타일일수록 우선 순위가 높아진다.

  1. 인라인 스타일
    • 태그 안에 style속성을 사용해 해당 태그에만 스타일을 적용
  2. id 스타일
    • 지정한 부분에만 적용하는 스타일이지만 한 문서 안에 한 번만 적용할 수 있다.(셀렉터 앞에 #사용)
  3. 클래스 스타일
    • 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에 여러 번 적용할 수 있다.(셀렉터 앞에 .사용)
  4. 태그 스타일
    • 웹 문서에 사용된 특정 태그에 똑같이 적용되는 스타일을 뜻한다.

소스에서의 순서(source order)

스타일 시트에서 중요도와 적용 범위가 같다면 스타일 우선순위를 정하는 것은 소스의 순서이다. 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

중요도 예제
<style>
    body{
        color: blue;
    }
    h2 {
        color: brown !important;
    }
</style>
<body>
    <div id="container">
        <h2 style="color: green;">미션!</h2>
        <p>열심히 사는 사람<br>
        나는 잘하고싶다.<br>
        <p style="color: red; font-style: italic;">질문을 해보자!</p>
    
    </div>
</body>

스타일 상속

웹 문서에서 사용하는 여러 태그들은 서로 포함관계가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다. 스타일 시트에서는 자식요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 스타일 상속이라고 한다.

<style>
    body {
        color: blue;
    }
    h2 {
        font-size: 20px;
        color: brown;
    }
</style>
<body>
    <h1>CSS</h1>
    <h2>웹 문서의 디자인과 내용을 분리한다.</h2>
	<p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어있다.</p>
</body>

위 예제에서 <body>태그 안 자식 요소인 <h1>,<h2>,<p>태그에 body태그 스타일이 적용된다. 하지만 <h2>태그만 따로 h2태그 스타일이 지정된다.

이렇게 상속을 이용하면 웹 문서의 모든 텍스트에 같은 글꼴을 사용하려고 할 때 각 요소마다 글꼴을 지정하지 않고 <body>태그에 글꼴 스타일을 작성하면 body태그 이하의 자식 요소에 같은 글꼴이 적용된다.

주의해야 할 점은 부모 요소에 배경 이미지나 배경 색이 있다면 자식 요소에 상속되지 않는다.

CSS3와 CSS모듈

CSS3이란?

HTML5가 개발되면서 CSS3기술도 함께 개발되고 있다. CSS3은 이전 CSS2나 CSS1에서는 볼 수 없던 정교하고 화려한 화면을 구성할 수 있고 애니메이션까지 지원한다.

CSS2규약 안에는 스타일과 관련된 것이 한꺼번에 담겨 있어 덩치가 크고 복잡해 업데이트하기 쉽지 않다는 단점이 있다. 그래서 CSS3부터는 배경이나 글꼴, 박스 모델 등 수십개 기능을 주제별로 규약을 따로 만들었다. 이것을 CSS모듈이라고 부른다.

CSS3는 개발 중이기 때문에 한번에 표준 규약이 결정되지 않았다. 따라서 규약을 확인하려면 https://www.w3.org/Style/CSS/ 에서 확인해야 한다.

CSS3와 브라우저 접두사(prefix)

CSS3은 모던 브라우저를 모두 지원하기 위해 계속 개발되고 있다. 하지만 아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분한다.

주로 사용하는 브라우저 접두사

접두사 설명
-webkit- 웹키트 방식 브라우저용(사파리, 크롬 등)
-moz- 게코 방식 브라우저용(모질라, 파이어폭스 등)
-o- 오페라 브라우저
-ms- 마이크로소프트 인터넷 익스플로러

접두사를 사용하는 방법은 스타일 시트를 지저분하게 만들고 디자인을 일관성 없게 할 수 있지만 모든 브라우저에서 똑같은 결과를 만들어 내려면 현재로서는 최선의 방법이다. 하지만 CSS3가 완성된다면 더이상 쓸 일이 없을 것이다.

태그: ,

카테고리: ,

업데이트:

댓글남기기

참고