비전공자 개발일기

CSS 본문

HTML _CSS

CSS

HiroDaegu 2021. 7. 26. 00:04
728x90
SMALL
선택자 {
속성1: 값1;
속성2: 값2;
/* 주석 */
...
}
  • 선택자: 스타일을 적용할 대상
  • 속성: 스타일의 종류
  • 값: 스타일의 값

선언 방식

  • 내장 방식: <style></style>의 내용으로 스타일을 작성(HTML)
<!DOCTYPE html>
<html>
<head>
	<title></title>
    <style>
	div {
    	background-color: red;
    }
    </style>     // <style>의 위치는 <head> , <body> 관계 없음
</head>
<body>
	<div></div>
</body>
</html>
  • 인라인방식: 요소의 style 속성에 직접 스타일을 작성(선택자 없음, HTML)
<div style = "background-color:red; margin: 20px;"></div>
  • 링크방식:<link />로 외부 css문서를 가져와서 연결하는 방식(병렬 방식)
<link href="css/styles.css" rel="stylesheet" />
  • @import방식: css의 @import규칙으로 css문서 안에서 또 다른 css 문서를 가져와서 연결하는 방식(직렬 방식)
@import url("")
div {
	....
}

CSS 선택자

  • 기본선택자
    1. 전체 선택자: 모든 요소를 선택(*)
    2. 태그 선택자: 태그를 선택  (태그명)
    3. 클래스 선택자: (.class명)
    4. 아이디 선택자: (#아이디명)
  • 복합선택자
    1. 일치 선택자: 동시에 만족하는 요소 선택( ex) 태그명.클래스명)
    2. 자식 선택자: 자식 요소 선택 ( ex) 태그명>.클래스명)
    3. 하위(후손)선택자: 하위 요소 선택 ( ex) 태그명　.클래스명)　:띄어쓰기
    4. 인접 형제 선택자: 선택자의 다음 형제 요소 하나를 선택 ( ex) .클래스명+태그명)
    5. 일반 형제 선택자: 선택자의 다음 형제 요소 모두를 선택 ( ex) .클래스명~태그명)
  • 가상클래스선택자
    1. hover : 마우스 커서가 올라가 있는 동안 선택 
    2. active: 마우스를 클릭하고 있는 동안 선택
    3. focus: 포커스하면 선택(HTML 대화형 컨텐츠<input, a, button, label, select ... {예외} tabindex도 가능>)
    4. first-child: 선택자가 형제 요소 중 첫째라면 선택
    5. last-child: 선택자가 형제 요소 중 막내라면 선택
    6. nth-child(n, 2n, 2n+1, n+2 ... ): 선택자가 형제 요소 중 n(짝수, 홀수, 두번째 이후)번째라면 선택(n = 0, 1, 2 ...)
    7. 부정선택자: 선택자가 아닌 요소 선택
// 예시
a:hover{
...
}

a:active{
...
}

input:focus{
...
}

.class명 태그명:first-child{
...
}

.class명 태그명:last-child{
...
}

.class명 *:nth-child(2){
...
}

.class명 *:not(태그명){
...
}
  • 가상요소
    1. before: 선택자 요소의 내부 앞에 내용을 삽입(인라인요소)
    2. after: 선택자 요소의 내부 뒤에 내용을 삽입(인라인요소)
.class명::before {
	content: " ";   
}

.class명::after {
	content: " ";
}

// ::before { content: " ";}, ::after { content: " ";}
  • 속성
    1. [속성]: 속성을 포함한 요소 선택
    2. [속성 = 값]: 속성을 포함하고 속성이 값인 요소를 선택
[disabled] {
...
}

[type = "password"] {
...
}

스타일 상속

조상(부모)요소로 부터 적용된 속성이 하위(자식)요소에게도 적용이 되는것

ex) font-style(글자 기울기), font-weight(글자 두께), font-size(글자 크기), line-height(줄 높이), font-family(글자체), font-color(글자 색), text-align(정렬) 등 

 

강제 상속

부모 - 자식 관계일 경우인데 스타일 상속이 안될 때 강제로 상속시키기 위해 사용 => 「자식의 속성: inherit」

 

선택자 우선 순위

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언이 CSS 속성을 우선 적용할지 결정하는 방법

  1. 점수가 높으면 우선 순위
  2. 점수가 같으면 가장 마지막에 해석된 선언이 우선순위
1순위 !important 99999999999999점
2순위 인라인방식선언
<div style = "background-color:red;"></div>		 1000점
3순위 아이티선택자(#아이디명) 100점
4순위 클래스선택자(.클래스명) 10점
5순위 태그 선택자(태그명) 1점
6순위 전체 선택자( * ) 0점
7순위 상속 -

※ !important, 인라인방식선언의 경우 자주 사용하지 않는 것을 권장(스타일 수정의 어려움)

728x90
LIST

'HTML _CSS' 카테고리의 다른 글

CSS - SCSS  (0) 2021.08.01
CSS - BootStrap  (0) 2021.07.31
CSS  (0) 2021.07.27
HTML  (0) 2021.07.25
HTML_CSS_BASIC  (0) 2021.07.19
'HTML _CSS' Related Articles more