Cascading Style Sheets
Cascading 연속적인 혹은 종속되는
Style Sheets 스타일이 정의된 문서 혹은 코드
HTML 하나로 문서의 뼈대와 꾸미기를 동시해 했던 초기의 웹과는 다르게 CSS를 이용하여 HTML(내용)과 CSS(스타일)을 분리하여 각각의 역할에 집중할 수 있다.
css 구성 요소
div { color:red; }
선택자 { 속성명: 속성값; }| 구성 요소 | 의미 |
|---|---|
| 선택자(selector) | div 스타일을 적용할 대상 |
| 속성명(property) | color 속성의 이름 |
| 속성값(value) | red 속성에 적용할 값 |
default css
HTML 코드를 작성하고 CSS 코드를 작성하지 않아도 CSS는 이미 적용이 되어있다.
브라우저가 우리의 코드를 화면에 보여줄 때 CSS 코드가 있는지 물어본 뒤에 있다면 해당 코드를 적용하고 그렇지 않다면 브라우저가 이미 알고 있는 기본 CSS 코드를 적용하기 때문
Cascading Style Sheets을 다시 살펴보면 정의된 CSS 코드(Style Sheets)가 있다면 해당 코드를 적용하고 그렇지 않다면 다음으로 넘어가 기본적인 브라우저의 CSS 코드(Style Sheets)를 정의하는 순서를 가지고 있다고 볼 수 있다.
순서
- Author style: 개발자에 의한 CSS 코드를 의미함
- User Style: 사용자가 지정한 Style을 의미함
- Browser: 브라우저가 이미 가지고 있는 기본적인 Style을 의미함
default css unset
만약 브라우저가 가지고 있는 default 값이 마음에 들지 않는다면 하나부터 열까지 모두 스스로 CSS를 이용해서 만들 수 있다.
selector { all: unset; }위의 코드를 이용하면 모든 default 값이 없어지며 단순한 text 형식으로 나오기 때문에 나만의 CSS를 만들 수 있다.
CSS 적용
example 인라인 | inline style
- 인라인 | inline style
html 태그 안에 style 속성을 이용하는 방법
<p style="color: red;">인라인</p> - 내부 | internal style
html 문서 내부에(<head>내부)<style>을 이용하여 기술하는 방법
<head>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p>내부</p>
</body>*외부 | external style
html 문서와는 별개의 파일로 외부에 따로 style 파일을 만들어 지정
<!-- index.html -->
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>외부</p>
</body>/* style.css */
p {
color: red;
}내부와 외부의 방법은 html과 css의 역할 분담을 할 수 있다는 장점을 사용하지 못하기 때문에 CSS 파일을 따로 분리하여 html 문서에 연결(link)해주는 방법을 추천
CSS 선택자
어떤 태그에게 어떤 스타일을 적용할 것인지 알려주는 문법을 선택자라고 함
Universal selector | *
모든 태그에 해당 속성과 값을 적용합니다.
* {
padding: 0;
margin:0
}위의 경우처럼 패딩과 마진을 리셋시키는 용도 및 꼭 필요한 속성 값만 넣는게 좋다.
혹은 reset css를 검색해서 사용하는것도 방법
ID selector | #
고유의 해당 아이디를 가진 태그에 속성과 값을 적용합니다.
#id선택자 {
color: "red";
속성: "값";
}CLASS selector | .
해당 클래스를 가진 모든 태그에 지정한 속성 및 값을 적용합니다.
.class선택자 {
color: "red";
속성: "값";
}
TAG selector | tag
해당하는 모든 태그에 지정한 속성 및 지정한 값을 적용합니다.
h1 {
color: "red";
속성: "값";
}가상 클래스 선택자 | Pseudo-class
선택자 뒤에:가상 이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다.
가상 클래스를 사용하면 코드를 보다 효율적으로 사용할 수 있음
| 선택자 | 사용법 |
|---|---|
| :link | 방문한 적이 없는 링크 |
| :visited | 방문한 적이 있는 링크 |
| :hover | 마우스를 올려놨을 때 |
| :active | 마우스를 클릭했을 때 |
| :focus | 포커스 되었을 때 (input 태그 등) tab 키 활용 가능 - 가장 뒤에 놓는 것이 좋음 |
| :first | 첫 번째 요소 |
| :last | 마지막 요소 |
| :first-child | 첫 번째 자식 |
| :last-child | 마지막 자식 |
| :nth-child(2n+1) | 홀수 번째 자식 |
| :nth-child(n) | n번째 순서 |
| 등등... | 많은 가상 클래스 선택자가 있다. |
선택자 활용
선택자들은 html이 tree 구조를 가지고 있기 때문에 부모와 자식이 존재하는데
부모 및 자식 태그를 이용하여 속성 및 값을 지정할 수 있다.
선택자1 선택자2 {
color: "red";
}위와 같이 태그 이름 사이에 공백을 넣은 선택자는 부모 태그 하위에 있는 태그에 해당 속성과 값을 적용
선택자1 > 선택자2 {
color: "red";
}위와 같이 > 를 사용하여 직계 자식에게만 속성 및 값을 적용해줄 수도 있다.
#id.class {
color: "red";
}선택자 사이에 공백이 제거되는 경우 여러 선택자를 동시에 만족하는 태그에 스타일을 적용할 수 있다.
- AND 연산
#id, .class {
color: "red";
}쉼표 , 를 이용하여 두 개의 선택자 중 하나라도 만족 시 적용되는 조건을 만들 수도 있다.
- OR 연산
그 밖에 +, ~ 등 많은 선택자를 사용할 수 있다. 아래 사이트를 이용해서 css를 연습해볼 수 있다.
css 선택자 연습 게임
css 연습 게임
선택자의 우선순위
선택자가 중복이 되어 속성과 값이 다중으로 나올 경우를 대비해 CSS 선택자는 우선순위를 제공한다.
| 순위 | 선택자 |
|---|---|
| 1 important | !important를 부여 받은 선택자 |
| 2 style attribute | html 태그 안에 직접 style 속성을 이용하는 방법 |
| 3 id | id 선택자 |
| 4 class | class 선택자 |
| 5 tag | 태그 선택자 |
6 * | 전체 선택자 |
part2에서 계속
