1. CSS의 스타일 형식
1) CSS의 스타일 형식
선택자 { 속성1: 속성값1; 속성2: 속성값2;}- 선택자 : 스타일을 어느 태그에 적용할 것인지 알려준다.
- 중괄호 : { } 사이에는 스타일 정보를 넣는다.
- 세미클론 : ;으로 구분하여 스타일 규칙을 여러 개 지정한다.
-> 속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 한다.
2. 스타일 시트
- 스타일 시트 : 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽게 한군데 묶어 놓은 것을 말한다.
- 스타일 시트는 브라우저 기본 스타일과 사용자 스타일로 나눌 수 있다.
- 사용자 스타일은 다시 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트로 나누어 진다.
1) 브라우저 기본 스타일 : 웹 브라우저에 기본으로 만들어져 있는 스타일 시트
2) 사용자 스타일 : 사이트 제작자가 만드는 스타일 시트
- 인라인 스타일 : 간단한 스타일 정보를 적용하는 스타일 시트
- 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 적용할 대상에 직접 표시한다.
<body>
<h1> 인라인 스타일 </h1>
<p style="color: blue;"> 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 적용할 대상에 직접 표시한다. </p>
<p> 이런 방법을 인라인 스타일이라고 한다. </p>
</body>- 내부 스타일 시트 : 스타일을 여러 곳에 적용할 때 쓰는 스타일 시트
- 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것이다.
- 스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정해야 하므로 모든 스타일 정보는 head 태그 안에서 정의하고 style 태그 사이에 작성한다.
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
padding: 10px;
background-color: bisque;
color: aquamarine;
}
</style>
</head>
<body>
<h1> 내부 스타일 시트 </h1>
<p> 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것이다. </p>
<p> 적용할 태그의 스타일을 내부 스타일 시트에 작성한다. </p>
</body>- 외부 스타일 시트 : 스타일 정보를 따로 저장해 놓은 스타일 시트
- 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하는 것이다.
- style 태그를 사용하지 않고 웹 문서에 연결해야 스타일이 문서에 적용되어야 하기 때문에 link 태그를 사용하여 외부 스타일 시트를 연결한다.
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">3. CSS의 기본 선택자
1) 전체 선택자 : 스타일을 문서의 전체 요소에 적용할 때 사용하는데 *를 사용하여 모든 하위 요소에 스타일 한꺼번에 적용한다.
기본형 * { 속성: 값; ... }- 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용한다.
ex) 마진과 패딩 때문에 디자인이 깔끔하지 않을 경우 전체 선택자를 이용하여 웹 문서 전체에 마진과 패딩 여백을 0으로 지정한다.
2) 타입 선택자 : 특정 태그를 사용한 모든 요소에 스타일을 적용할때 사용한다.
-> 타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용된다.
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h1> 타입 선택자 </h1>
<p> 특정 요소에 스타일을 적용하는 타입 선택자 </p>
<p> 이렇게 하면 p 요소의 스타일은 한 번만 정의하였지만, </p>
<p> 웹 문서에 있는 모든 p 요소에 스타일을 적용한다. </p>
</body>3) 클래스 선택자 : 특정 부분에 스타일을 적용한다.
-> 같은 태그라도 일부는 다른 스타일을 적용하고 싶을 때 사용한다.
- 클래스 이름을 사용해서 다른 선택자와 구별하는데 이때 클래스 이름 앞에 . 을 반드시 붙여야 한다.
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
font-style: italic;
}
.accent {
border: 1px solid blue;
padding: 5px;
}
.bg {
background-color: violet;
}
</style>
</head>
<body>
<h1 class = "accent bg"> 클래스 선택자 </h1>
<p> 특정 부분에 스타일을 적용하는 클래스 선택자 </p>
<p> 같은 태그라도 일부는 다른 스타일을 사용하고 싶다면 <span class="accent"> 클래스 선택자 </span> 를 사용한다. </p>
<p> 클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데 이때 클래스 이름 앞에 . 을 반드시 붙여야 한다. </p>
<p> 클래스 이름은 사용자가 기억하기 쉽게 임의로 지정하면 된다. </p>
</body>4) id 선택자 : 특정 부분에 스타일을 한 번만 적용할 수 있다.
클래스 선택자는 문서에서 여러 번 적용 but id 선택자는 문서에서 한 번만 적용
- . 대신 #를 사용하여 웹 문서의 특정 부분을 선택해서 스타일을 지정한다.
5) 그룹 선택자 : 같은 스타일 규칙을 사용하는 요소들을 묶어준다.
- 여러 선택자에서 같은 스타일 규칙을 사용하는 경우 , 로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한번만 정의한다.
선택자1, 선택자2 {스타일 규칙}4. 캐스케이딩 스타일 시트
1) 캐스케이딩
-
캐스케이딩 : CSS의 'C'의 줄임말로 스타일 시트에서 우선 순위가 위에서 아래로 계단식으로 적용된다는 의미이다.
-> CSS는 우선 순위가 있는 스타일 시트이다.
-> CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선 순위에 따라 적용할 스타일을 결정한다.
캐스케이딩은 스타일끼리 충돌하지 않도록 막아 주는 개념으로 2가지 방법이 있다.
- 스타일 우선 순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선 순위가 결정되고, 우선 순위에 따라 위에서 아래로 스타일을 적용한다.
- 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
2) 스타일 우선 순위
-
웹 브라우저의 내용을 표시할 때는 3가지 스타일을 함께 사용한다.
-> 컴퓨터 사용자가 지정한 스타일과 웹 문서를 제작한 제작자의 스타일, 웹 브라우저가 기본으로 정해 놓은 스타일_
- 중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선 순위를 정할 수 있다.
- 스타일 적용 범위가 좁을수록, 정확히 필요한 요소에만 적용할 스타일일수록 우선 순위가 높아진다.
but 여기서 스타일 규칙에 !important를 붙이면 그 스타일으 다른 스타일보다 우선 순위가 높아진다.
- 중요도와 적용 범위가 같다면 스타일을 정의한 소스 순서로 우선 순위가 결정된다.
3) 스타일 상속
- 스타일 상속은 스타일 시트의 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는 것을 말한다.
