2. CSS -1

웹 문서에 디자인 입히기

• 스타일 : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들

왜 스타일을 사용하는가?

• HTML로는 웹 사이트 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성함
• 스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.
• 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 (반응형 웹 디자인)

스타일 형식

선택자 { 속성 1 : 속성값 1 ; 속성 2 : 속성값 2}

스타일 시트

• 스타일을 관리하기 쉽도록 한 군데 모아놓은 것

1. 브라우저 기본 스타일

• 브라우저에서 기본으로 적용하는 스타일
• 웹 문서에서 아무 스타일도 적용하지 않고 HTML만 사용해도 그 기능에 따라 크기에 맞게 보여줌

2. 인라인 스타일

• 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
• 스타일을 적용하고 싶은 태그에 style 속성을 사용해 <p style = “속성 : 속성 값; >” 형태로 스타일 적용

3. 내부 스타일 시트

• 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
• 모든 스타일 정보는 태그와 태그 안에서 정의
• 태그 사이에 작성

4. 외부 스타일 시트

• 여러 웹 문서에서 사용할 스타일을 별도 파일로 지정해 놓고 필요할 때마다 파일에서 가져와 사용
• <style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일 연결

CSS 기본 선택자

전체 선택자 *

• 페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용
• 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용
• * {속성 : 값; 속성 : 값 ….}

<style> 
    *{
        margin : 0;
    }
</style>

태그 선택자

• 문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용됨
• 태그명 {스타일 규칙}

<style>
    p{
        font-style : italic;
    }
</style>

<div>
    <h1>레드향</h1>
    <p>껍질이 붉다</p>
    <p>귤과 한라봉의 교배체</p>
    <p>비타민이 풍부</p>
</div>

출력 결과

class 선택자

• 요소의 특정 부분에만 스타일 적용
• 마침표(.) 다음에 클래스 이름 지정
• 문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의
• 클래스를 적용할 요소에게 class = “클래스명” 속성을 적용해 주면 스타일이 적용된다.
• . 클래스명 {스타일 규칙}

<style>
    p{
        font-style : italic;
    }
    .accent{
        border: 1px solid #000;/*테두리*/
        padding: 5px /*테두리와 내용 사이의 여백*/
    }
    .bg{
        background-color: #ddd; /*배경색*/
    }
</style>

<div>
    <h1 class = "accent bg">레드향</h1>
    <p class = "accent bg">껍질이 붉다</p>
    <p>귤과 한라봉의 교배체</p>
    <p>비타민이 풍부</p>
</div>

출력 결과

id 선택자

• 요소의 특정 부분에만 스타일 적용
• 파운드(#) 다음에 id 이름 지정
• 문서 안에서 한 번만 사용한다면 id 선택자로 정의
• #아이디명 {스타일 규칙}

<style>
    #container{
        width : 500px; /*너비*/ 
        margin : 10px auto; /*중앙배치*/
        padding : 10px; /*테두리와 내용 사이 여백 */
        border : 1px solid #000; /*테두리 굵기와 색깔*/
    }
</style>

<div id = container>
    <h1>레드향</h1>
    <p>껍질이 붉다</p>
    <p>귤과 한라봉의 교배체</p>
    <p>비타민이 풍부</p>
</div>

출력 결과

그룹 선택자

• 같은 스타일을 사용하는 선택자를 한꺼번에 정의
• 쉼표(,)로 구분해 여러 선택자를 나열
• 선택자 1 , 선택자 2 {스타일 규칙}

<style>
    h1, p {
        text-align : center;
    }
</style>

• CSS : Cascding Style Sheet
• Cascading : 위에서 아래로 흐른다는 뜻을 가지며 계단식으로 적용된다는 의미로 사용된다.
• 선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정함

스타일 충돌을 막는(캐스캐이딩)의 원칙

원칙 1. Style 우선순위

• 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용

1. 얼마나 중요한가에 따라

2. 얼마나 한정 지을 수 있는가에 따라

3. 소스 순서에 따라

• 중요도와 명시도가 같다면 소스 순서에 따라 결정
• 소스에서 나중에 온 스타일이 먼저 온스타일을 덮어씀

원칙 2. Style 상속

- 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달

• 스타일 시트에서 ‘캐스캐이딩’은 가장 기본적인 개념이기 때문에 일반적으로 ‘스타일 시트’는 ‘CSS(캐스캐이딩 스타일 시트)’와 같은 의미로 사용됨
• 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨
• 상속을 이용하면 스타일 시트를 효과적으로 만들 수 있다.
• 주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니라는 점(예, 글자 색은 상속되지만 배경 색은 상속되지 않음)