스타일 기본형식
div { text-align : center; }
- div : 선택자
- text-align : style속성
- center : 속성값
CSS 적용
내부 스타일시트
<style> </style>내부에 스타일 정보를 저장하는 방법
<style>
div { text-align : center; }
</style>외부 스타일시트
<link>태그를 이용하여 css파일을 불러와서 스타일을 적용하는 방법
<link href=“css파일경로” rel=“stylesheet” type=“text/css”>인라인 스타일시트
태그 내부에 스타일 정보를 지정하는 방법
<p style=“color: black”>전체선택자
<html>에 있는 모든 태그에 적용되는 스타일
body태그에 있는 요소뿐만 아니라 html, head에도 적용된다.
* { 설정내용; }태그선택자
특정 태그에 적용되는 스타일
태그명 { 설정내용; }아이디선택자, 클래스선택자
아이디 선택자
태그 속성 id를 설정하고 id값을 선택자로 하는 것 (#)클래스 선택자
태그 속성 class를 설정하고 class값을 선택자로 하는 것(.)
/* 아이디 선택자 */
#아이디명 { 설정내용; }
/* 클래스 선택자 */
.클래스명 { 설정내용; }클래스 선택자는 중복이 허용되고 id선택자는 중복이 허용되지 않음.
코드상에서의 에러는 없지만 javascript의 DOM에서 id값으로 페이지 요소를 가져오기 때문에 중복을 허용하지 않음.
후손선택자, 자손선택자
후손과 자손
/* 후손 선택자 */
선택자 후손선택자 { 설정내용; }
/* 자손 선택자 */
선택자>자손선택자 { 설정내용; }동위선택자
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용
선택자a+선택자b: 동위선택자a의 바로 뒤에 있는 한개의 선택자만 선택선택자a~선택자b: 위 선택자a의 뒤에 있는 선택자b 모두선택
반응선택자
사용자의 움직임에 따라 달라지는 선택자
선택자:active: 사용자 클릭한 태그 선택선택자:hover: 사용가의 마우스가 올라가 있는 태그 선택
선택자 :active { 설정내용; }
선택자 :hover { 설정내용; }일반구조선택자
특정한 위치에 있는 태그 선택(위치로 구분)
:first-child: 형제 관계 태그 중 첫 번째 태그 선택:last-child: 형제 관계 태그 중 마지막 태그 선택:nth-child: 형제 관계 태그 중 앞에서 수열 번째 태그 선택:nth-last-child: 형제 관계 태그 중 뒤에서 수열 번째 태그 선택
형태구조선택자
특정한 위치에 있는 태그 선택(태그 별로 구분)
:first-of-type: 형제 관계 태그 중 첫 번째 태그 선택:last-of-type: 형제 관계 태그 중 마지막 태그 선택:nth-of-type: 형제 관계 태그 중 앞에서 수열 번째 태그 선택:nth-last-of-type: 형제 관계 태그 중 뒤에서 수열 번째 태그 선택
문자선택자
태그 내부에서 특정 조건의 문자를 선택하는 선택자
선택자::first-letter: 첫 번째 글자를 선택선택자::first-line: 첫 번째 줄을 선택선택자::after: 태그 뒤에 위치하는 공간을 선택선택자::before: 태그 앞에 위치하는 공간을 선택선택자::selection: 사용자가 드래그한 글자 선택
부정 선택자
지금까지의 선택자에 대해 반대로 적용하는 선택자
선택자에는 다른 부정선택자나 가상요소를 넣을 수 없음
요소:not(선택자): 선택자를 반대로 적용하여 선택
CSS 우선순위
태그 스타일 -> class 스타일 -> id 스타일 -> 인라인 스타일 -> !important
우측으로 갈수록 우선순위가 높다.
blog 👉🏻 https://kimnamsun.github.io/