기초적인 CSS 관련 내용을 기록해두려고 합니다.
HTML 글 처럼 기초적인 내용을 기록해 두었다가 사전처럼 간단하게 이용할 때 사용할 수 있었으면 좋겠습니다.
CSS는 HTML을 꾸며주는 역할입니다.
따라서 꾸밀 대상이 되는 요소와 스타일로 이루어져 있습니다.
h1은 선택자(selector), color, font-size 는 속성(property)입니다.
h1 { color: yellow; font-size:2em; }
CSS 적용 방식
<div style="color:red;"> 내용 </div> // inline
<style> div {color: red;} </style> // internal
div {color: red;} //CSS 파일에 div의 스타일 지정
<link rel="stylesheet" href="css/style.css"> // 링크를 걸어 css 연결
1. inline : 직접 스타일 요소를 입력합니다. 여러 개에 스타일을 바꾸려면 일일이 입력해야 한다는 단점이 있습니다.
2. internal : head 태그 내부에 style 태그 내부에 입력합니다. 하나의 태그가 모두 통일 되기 때문에 같은 태그이면서 다른 스타일을 구현할 수 없습니다.
3. external : head 태그 내부에 입력합니다. css 파일을 만들어 link로 css 파일의 경로를 연결시켜줍니다. 가장 자주 사용 되는 방법이라고 할 수 있습니다.
선택자
class 선택자
.foo { font-size: 30px; } //style 태그 내부 코드
<p class="foo"> ... </p> // Body 내부 코드
.className {속성} 으로 style 태그 내부에 생성하여 class 생성자를 만들 수 있습니다.
태그 내부에 class = "className" 으로 태그에 클래스 선택자를 적용시킬 수 있습니다.
여러 개의 class 선택자를 적용 시키려면 class = "Name1 Name2" 처럼 공백으로 구분하면 Name1, Name2 class 선택자가 모두 적용됩니다.
ID 선택자
#bar { background-color: yellow; }
<p id="bar"> ... </p>
class 선택자와 거의 동일 하며 . 대신 # 을 써주면 ID 선택자를 만들 수 있습니다.
또한 태그 내부에 class 대신에 id = "Name" 으로 적용 할 수 있습니다.
Class 선택자와 ID 선택자의 차이점
1. ID 는 파일에서 유일해야 한다. (ID 는 단 하나에만 적용가능)
2. 구체성이 다름.(구체성은 이 후에 공부)
선택자의 조합
/* 요소와 class의 조합 */
p.bar { ... }
/* 다중 class */
.foo.bar { ... }
/* id와 class의 조합 */
#foo.bar { ... }
속성 선택자
- 단순 속성으로 선택
p[class] { color: silver; }
p[class][id] { text-decoration: underline; }
대괄호 안의 내용이 있어야지 중괄호 규칙이 적용됩니다.
첫 번째는 <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용됩니다.
두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용됩니다.
- 정확한 속성 값으로 선택
p[class="foo"] { color: silver; } p[id="title"] { text-decoration: underline; }
정확한 속성이 있어야 적용 됩니다.
- 부분 속성 값으로 선택
p[class~="color"] { font-style: italic; } /* "공백으로 구분된" color가 포함되는 요소*/ p[class^="color"] { font-style: italic; } /* color로 시작하는 요소 ,공백 구분 X*/ p[class$="color"] { font-style: italic; } /* color로 끝나는 요소 ,공백 구분 X*/ p[class*="color"] { font-style: italic; } /* color가 포함되는 요소 ,공백 구분 X*/
자손 , 자식, 형제 선택자
div span { color: red; } // 자손 선택자
div > h1 { color: red; } // 자식 선택자
div + p { color: red; } // 인접 형제 선택자
body > div table + ul { ... }
/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */
자손 선택자는 공백으로 구분
자식 선택자는 > 으로 구분
인접 형제 선택자는 + 로 구분
이 세가지 선택자를 복합적으로 사용할 수 있고 결국 제일 끝에 있는 요소에 적용이 됩니다.(마지막 주석 참고!)
가상 선택자
가상 선택자는 조건에 의해 적용되는 선택자 입니다. 직접 선택자를 적용해 주지 않습니다.(조건에 의해 적용)
li:first-child { color: red; } // li의 첫 번째 자손에 적용시킴
a:link { color: blue; } // 하이퍼 링크이지만 아직 방문하지 않은 앵커
a:focus { background-color: yellow; } //현재 초점을 올려둔 앵커
위의 예시 이 외에도 다양한 가상 선택자 들이 있습니다 .
아래의 링크를 통해서 확인할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
구체성
구체성 이란 선택자의 어떤 규칙이 우선적으로 적용되어야 하는가? 에 대한 규칙입니다. 주로 같은 요소를 선택하는 서로 다른 선택자들이 있을 때 적용됩니다.
구체성의 규칙
- 1, 0, 0, 0 : 인라인 스타일
- 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
- 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
- 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
- 전체 선택자는 0, 0, 0, 0을 가진다.
- 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
h1 { ... } /* 0,0,0,1 */
body h1 { ... } /* 0,0,0,2 */
.grape { ... } /* 0,0,1,0 */
*.bright { ... } /* 0,0,1,0 */
p.bright em.dark { ... } /* 0,0,2,2 */
#page { ... } /* 0,1,0,0 */
div#page { ... } /* 0,1,0,1 */
p#page { color: red !important; } /* 구체성 값은 없지만 무조건 우선권을 갖는다.
좌측 부분이 클수록 높은 구체성을 갖습니다.
상속
상속이란 부모의 속성을 자식 요소가 상속받는 것을 말합니다.
그렇다고 모든 속성이 상속되는 것은 아닙니다. 박스모델 속성들은 상속되지 않습니다.
일반적으로 생각해보면 이해할 수 있습니다.
또한 상속된 스타일은 아무런 구체성을 갖고있지 않습니다.
캐스캐이딩(cascading)
캐스캐이딩이란 구체성이 같은 규칙이 동일한 요소에 적용될 때 의 규칙입니다.
1. 중요도와 출처
- important가 무조건 우선한다.
- 출처는 사용자 !important 스타일>제작자 !important 스타일>제작자 스타일>사용자 스타일>브라우저 스타일
2. 구체성 : 구체성에 따라 적용
3. 선언 순서 : 선언 순서에 따라 적용
이상입니다.
마지막으로 아래 링크는 CSS속성, 브라우저 지원 버전, CSS 버전 등 다양한 정보를 참고하며 사용할 수 있는 사이트 입니다.
'프론트 엔드' 카테고리의 다른 글
Javascript의 적용과 DOM (2) | 2021.08.10 |
---|---|
html (0) | 2021.07.18 |