-
[CSS] 스타일 시트 종류/ CSS 기본 선택자 / 스타일 우선순위html, css, js 2023. 2. 12. 01:55
- CSS 스타일 형식
선택자 { 속성1 : 속성값1; 속성2: 속성값2;}맨 앞 선택자는 스타일을 어느 태그에 적용할 것인지를 알려주는 것이고, 중괄호 사이에는 스타일 정보를 넣는다.
속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며, 세미콜론으로 구분해서 스타일 규칙을 여러개 지정할수있다.
CSS 주석 표시
/* */HTML주석은? <!-- -->
#스타일 시트 종류
웹 문서 안에서는 스타일 규칙을 여러개 사용한다.
브라우저 기본 스타일
CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할때는 기본 스타일을 사용하는데 이것을 브라우저 기본스타일이라고한다. 예)HTML의 p태그 h1태그 등
인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.
<p style="color: blue;"> 껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
<!DOCTYPE html> <html lang="ko> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <style> h1{ padding: 10px; background-clolr: #222; color: #fff; } </style> <body> </body> </html>외부 스타일 시트
- 웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없다.
- 대부분 디자인에 일관성이 있도록 같은 스타일을 여러 웹 문서에 적용한다. 그때마다 웹 문서를 똑같은 내부 스타일 시트로 만든다면 서버 공간 및 시간을 낭비하게 된다. 따라서 사이트를 제작할때는 여러 웹 문서에 사용할 스타일을 별도 파일로 저장해놓고 필요할때마다 가져와서 사용하는 것이 일반적임.
- 이렇게 따로 저장해놓은 스타일 정보를 외부스타일 시트라고 하고 .css 확장자를 사용한다.
<link>태그
- 외부 스타일 시트는 웹 문서에 연결해야 스타일이 문서에 적용된다. 외부 스타일 시트를 연결할때 사용하는 태그는 <link>태그
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
#CSS기본 선택자 알아보기
/전체선택자
전체 선택자란 문서의 모든 요소에 스타일을 적용할때 사용한다.
웹 브라우저에서 기본 스타일을 초기화할때 자주 사용한다.
* { 속성: 값; ... }/타입 선택자
특정 태그를 사용하는 모든 요소에 스타일을 적용한다.
타입 선택자는 태그 선택자, 요소 선택자라고도 불린다.
태그명 {스타일 규칙} p { font-style : italic; } /* p태그를 쓰는 모든 요소에 이태릭체 스타일이 적용된다 *//클래스 선택자
같은 태그라도 일부는 다른 스타일을 적용하고 싶다면, 즉 특정 부분만 선택해서 스타일을 적용할수있다.
클래스 선택자는 클래스이름을 사용해서 다른 선택자와 구별하는데, 이때 클래스 이름 앞에 마침표를 반드시 붙여야한다.
.클래스명 {스타일 규칙}- 클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 하는데, 클래스 스타일을 적용할때는 태그 안에 class="클래스명"처럼 class속성을 사용해 지정한다.
- 또한 요소 하나에 클래스 스타일을 2개 이상 적용할수있다. 이떄에는 공백으로 구분해서 스타일 이름을 적으면 된다. 예제를 통해알아보자
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <style> p{/*타입 선택자*/ font-style: italic; /*이탈릭체*/ } .accent{ /*클래스 선택자*/ border: 1px solid #000; /*테두리*/ padding: 5px; /*테두리와 내용 사이 여백*/ } .bg{ background-color: #ddd; /*배경색*/ } </style> <body> <div> <h1 class="accent bg">레드 향</h1> <!--accent와 bg클래스 선택자로 스타일 두개 적용--> <p>껍질에 붉은 빛이 돌아<span class="accent">레드향</span></p> <!--레드향 부분에만 accent스타일 적용--> <p>레드향은 할라봉과 귤을 교배</p> </body> </html>
/id 선택자
클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할때 사용함.
id선택자는 id이름을 통해 다른 선택자와 구분하는데. 반드시 id선택자 앞에 #를 붙여야함
id스타일을 웹 요소에 적용할때는 id="아이디명"으로 사용
#아이디명 { 스타일 규칙}<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> <style> #container{ width: 500px; margin: 10px auto; padding: 10px; border: 1px solid #000 } </style> <body> <div id="container"> <h1>레드 향</h1> </div> </body> </html>클래스 선택자와 id선택자의 가장 큰 차이는,
클래스 선택자는 같은 클래스 선택자를 문서에서 여러번 적용할 수 있는 반면
id선택자는 문서에서 한번만 적용할수있다는 것이다. 즉 같은 id선택자로 중복해서 스타일을 적용할수없다.
그렇기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구분할때 사용된다.
/그룹 선택자
여러 선택자에서 같은 스타일 규칙을 사용하는 경우가 있다. 이럴때는 쉼표로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한번만 정의하면 된다.
h1과 p 타입선택자 둘다 text-align이란 스타일 규칙을 동일하게 쓴다, 그러므로 그룹선택자로 만들어 한번만 정의한다.
h1, p { text-align: center;}
#cascading style sheet (CSS) 스타일 우선순위
캐스케이딩 : 우선순위가 위에서 아래로, 계단식으로 적용된다는 의미로 쓰임
CSS는 우선순위가 있는 스타일 시트 이다. 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할때 우선순위에 따라 적용할 스타일을 결정한다.
스타일이 충돌하지 않게 하는 방법으로는 2가지 방법이있다.
1. 스타일 우선순위
캐스케이딩에서 가장 중요하다. 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용한다. 우선순위는 다음 3가지 개념에 따라 지정된다.
● 얼마나 중요한가?
- 사용자가 지정한 스타일 -> 제작자가 지정한 스타일 -> 브라우저 기본 스타일 순으로, 사용자가 지정한스타일이 가장 우선순위가 높다.
1. 사용자 스타일 -> 2. 제작자 스타일 -> 3.브라우저 기본 스타일
● 적용 범위는 어디까지인가?
- 스타일 적용 범위가 좁을수록, 즉 필요한 요소에만 적용할수록 우선순위가 높아진다. 단 여기에서 스타일규칙에 !important를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아진다.
1. !important -> 2. 인라인 스타일 -> 3. id스타일 ->4. 클래스 스타일 ->5. 타입 스타일
● 소스 코드의 작성 순서는 어떠한가?
- 스타일 시트에서 중요도와 적용범위가 같다면 그다음은 스타일을 정의한 소스 순서로 우선순위가 정해진다. 소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.
<style> p{ color:black; } p{ color: blue; }위와 같이 스타일이 지정된 경우 나중에 작성한 p태그에 스타일인 blue가 우선순위가 높다.
2. 스타일 상속
웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있다. 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식요소로 전달되는데, 이것을 스타일 상속이라고 한다.
예를 들어 <body> 태그는 웹 문서에 사용한 모든 태그의 부모 요소이다. 그래서 <body>태그 스타일에서 글자색이나 글꼴 색을 지정하면 그스타일은 웹 문서 전체에 적용할수있다.
'html, css, js' 카테고리의 다른 글
[CSS] 스타일 속성 모음 (0) 2023.02.14 [CSS] 텍스트를 표현하는 다양한 스타일 (0) 2023.02.14 [HTML] form 태그 (0) 2023.02.10 [HTML] HTML 태그 모음 (0) 2023.02.09 [HTML] 웹 문서에, 내용 입력하는 태그들 (0) 2023.02.09