CSS

민팽 2021. 9. 6. 23:13

스타일과 스타일 시트

스타일(style) : HTML 문서에서 글꼴, 색상, 배치 방법 등 겉면의 디자인적 요소들

스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 곳에 모아놓은 것

스타일을 사용하면 웹 문서의 내용과 관계없이 디자인만 독립적으로 변경할 수 있고 다양한 기기에 맞춰 유연하게 바뀌는 문서를 만들 수 있음.

스타일 형식

선택자 스타일 속성 속성 값

p { text-align: center }

- 내부 스타일 시트: <head>태그 내부에 <style>태그를 이용하여 스타일을 정의하는 것

- 외부 스타일 시트: 스타일을 별도의 파일로 두어 필요할 때마다 파일에서 가져와서 사용하는 것으로 <style>태그 없이 <link>태그만 사용하여 미리 만들어 놓은 외부 스타일 시트 파일 연결

<link rel="stylesheet" href="file_path">

- 인라인 스타일: 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 style="속성: 속성 값;" 형태로 직접 표시하는 방식

<p style="color:blue;">파란색 글씨</p>

주요 선택자

- 전체 선택자: 페이지의 모든 요소를 대상으로 스타일을 적용할 때 사용

*{
    margin:0;
    padding:0;
}

- 태그 선택자: 특정 태그를 사용한 모든 요소에 스타일을 적용할 때 사용

h2{
    color:blue;
}
p{
    font-size:12px;
    margin-left:20pc
}

- 클래스(class) 선택자: 특정 클래스명에 해당하는 모든 요소에 스타일을 적용할 때 사용( . 사용 )

.bluetext{
    color:blue;
}

/*bluetext 클래스에서 h2태그에만 파란글씨를 적용하고 싶을 때*/
h2.bluetext{
    color:blue;
}

- id 선택자: 문서 안에서 한번만 사용한다면 id 선택자로 정의하여 사용 (# 사용)

#bluetext{
    color:blue;
}

- 그룹 선택자: 같은 스타일을 사용하는 선택자를 한꺼번에 정의하는 것으로 쉼표로 구분해 여러 선택자를 나열

h1, h2{
    color:blue;
}

캐스캐이딩

- cascading: '위에서 아래로 흐른다'는 뜻

- 선택자에 여러 스타일이 적용될 때 스타일 충독을 막기 위해 cascading 원칙을 정의

cascading의 원칙

스타일 우선순위: 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 우선순위에 따라 위에서 아래로 스타일 적용
스타일 상속: 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달되는 것. 하지만 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아님.

일반적으로 스타일 적용 시 우선순위는 인라인 스타일 -> id 스타일 -> class 스타일 -> 태그 스타일 순으로 적용됨

즉, 스타일 충돌이 발생할 때 태그 스타일보다 인라인 스타일이 우선순위를 갖게 됨

또한 중요도와 명시도가 같다면 소스 순서에 따라 우선순위를 결정하게 됨 -> 나중에 나온 스타일이 먼저 온 스타일을 덮어 씀

부모 요소로부터 스타일 상속 시 자식 요소에서 다른 스타일을 사용하려 한다면 중요도나 명시도, 소스 순서 등에 따라 우선순위가 결정됨