HTML,CSS,JS

CSS - 스타일 시트, 선택자, 캐스케이딩

망재이 2023. 1. 3. 21:25

1. 스타일 형식 알아보기

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

- 중괄호 { } 사이에 스타일 규칙 나열

- 규칙이 여러 개일 경우 세미콜론(;)으로 구분

p {
    text-align:center;
    color:blue;
}

p { text-align:center; color:blue; } /* 한줄로도 표현가능 */

 

2. 스타일과 스타일 시트

- 브라우저 기본 스타일

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

- 인라인 스타일

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

- 내부 스타일 시트

  • 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
  • 모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의
  • <style> </style> 태그 사이에 작성
<head>
	<style>
		p {
			속성: 속성 값
		}
	</style>
</head>

- 외부 스타일 시트

  • 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할 때마다 파일에서 가져와 사용
  • <style> 태그 없이 <link> 태그만 사용해 미리 만들어놓은 외부 스타일 시트 파일 연결
  • href="파일명.css" 위치 지정 주의! 같은 통로에 넣어주기
<link rel="stylesheet" href="myprofile.css" type="text/css"/>

 

3. CSS 기본 선택자

- 전체 선택자

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

- 타입 선택자 = 유형 선택자

  • 문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용됨
  • 태그명 { 스타일 규칙 }
<style>
      p {
        font-style: italic;
      }
</style>

- class 선택자

  • 요소의 특정 부분에만 스타일 적용
  • 마침표(.) 다음에 클래스 이름 지정
  • 문서 안에서 여러 번 반복해서 스타일링 지정 가능
  • .클래스명 { 스타일 규칙 }
.name {
    text-align: center;
    padding-top:60px;
}

- id 선택자

  • 요소의 특정 부분에만 스타일 적용
  • 파운드(#) 다음에 id이름 지정
  • 문서 안에서 한번만 사용가능
  • #아이디명 { 스타일 규칙 }
#name {
    text-align: center;
    padding-top:60px;
}

- 그룹 선택자

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

--> 중복을 한번에 정렬하기

h1, p {
    text-align: center;
}

 

4. 캐스케이딩

- 캐스케이딩 : 계단식으로 적용된다는 의미로 사용. 우선순위에 따라 스타일 결정.

- 얼마나 중요한가에 따라 : 사용자 스타일 ( 시스템에서 만든 스타일. css style ) --> 제작자 스타일 ( 웹 사이트를 만들 때 제작자가 만든

                                        스타일 ) --> 브라우저 스타일 ( 브라우저의 기본 스타일 )

- 범위 한정 : !important ( 어떤 스타일보다 우선 적용되는 스타일 ) --> 인라인 스타일 ( 해당 태그에만 적용되는 스타일 ) --> id스타일

                    ( 특정 부분에만 적용되는 스타일. 문서 안에서 한번만 사용 ) --> 클래스 스타일 ( 특정 부분에만 적용되는 스타일. 문서 안에

                    서 여러 번 사용됨 ) --> 타입 스타일 ( 특정 태그에만 적용되는 스타일. 문서 안의 같은 태그에 모두 적용됨 )

 

728x90