기본 스타일 시트
기존 hn 태그 사용 시 단순히 태그만 사용했는데 웹브라우저에는 텍스트가 다양한 크기와 굵기로 표시되었음
HTML 태그는 태그 자체에 꾸밈을 담당한느 역할이나 기능이 없음
-> 웹브라우저 자체에 기본 스타일 시트가 내장되어있기 때문
기본 스타일 시트 : 웹 브라우저에 기본으로 내장되어 웹 브라우저에 표시되는 요소들의 글꼴이나 크기, 색상, 굵기, 문단 설정과 같은 스타일이 미리 정의된 파일 또는 문서 양식을 말함
적용 우선순위와 개별성
hn과 같이 몇 개의 태그는 이미 스타일이 적용된 상태로 표시
사용자가 별도의 스타일 속성을 정의하는 경우
h1{
font-size:16px;
font-weight:normal;
}위 경우 해당 스타일이 적용 됨
-> 기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우선 적용됨을 의미
p{color:red;}
p{color:blue;}
p{color:orange;}하나의 p태그에 여러 스타일을 사용하는 경우
-> 위 경우 orange 값이 적용 됨
기본 스타일 시트보다 사용자가 정의한 스타일 속성이 우선 적용됨
같은 태그 요소의 선택자가 여럿일때 한 속성만 적용되는 이유
-> CSS는 단계적으로 적용되는 스타일을 뜻하는 언어
-> 마지막에 영향을 주는 하나의 스타일만 적용
-> 어떤 스타일이 마지막에 영향을 주는지는 CSS 개별성 규칙에 따름
-> 개별적 규칙에 따라 점수가 부여됨
| 선택자 | 예 | 점수 |
|---|---|---|
| 전체 선택자 | * | 0 |
| 태그 선택자 | div, p, h1 | 1 |
| 가상 요소 선택자 | ::before, ::after | 1 |
| 클래스 선택자 | .box, .title | 10 |
| 가상 클래스 선택자 | :hover, :visited, :link | 10 |
| 아이디 선택자 | #title, #main | 100 |
| 인라인 스타일 | style = "color:red" | 1,000 |
위와 같이 개별 점수를 매겨 계산하게 됨
-> 그림처럼 선택자를 분류해서 개수를 세고 점수를 곱해 합을 구하면 됨
ex)
<style>
.title{color:blue} 0,0,1,0
h1{color:red} 0,0,0,1
</style>
<body>
<h1 class="title">h1</h1>
</body>개별성 규칙은 선택자 문법에서 각 선택자가 몇번 사용됐는지에 따라 점수를 계산
<style>
nav > h2{} 0,0,0,2
nav .title{} 0,0,1,1
#main .sub{} 0,1,1,0
a:hover{} 0,0,1,1
a:hover span::first-letter{} 0,0,1,3
</style>!important는 10000점
-> 다른 선택자를 모두 압도하고 이 스타일이 우선 적용
<style>
p{
color:blue !important; /* 1,0,0,0,0 */
}
#main #sub .title { /* 0,2,1,0 */
color:red;
}
</style>
<body>
<div id="main">
<div id = "sub">
<!-- 1,0,0,0 -->
<p class = "title" style = "color:green">important </p>
</div>
</div>
</body>실무에서 일일히 개별성 규칙 점수를 계산하는 것은 어렵
-> 최대한 자세하게 적을수록 점수가 높다고 생각하자
ex)
<div id ="main">
<div class="sub">
<p>lorem</p>
</div>
</div>p{} < .sub p{} < #main .sub p{}
상속
<style>
div{
color:red;
}
</style>
<body>
<div>
<p> inherit</p>
</div>
</body>위 경우 p 태그에 적용한 스타일이 아닌데도 텍스트에 스타일이 적용됨
p 태그에는 color 속성이 없지만, p 태그의 부모인 div 태그는 color 속성이 있음
-> p 태그는 부모인 div 태그의 스타일을 그대로 물려받음
css 의 속성은 상속되지만 모든 속성이 전부 상속되지는 않음
단위
절대 단위와 상대 단위로 나뉨
절대 단위 : 어떤 환경이라도 동일한 크기로 보이는 단위
상대 단위: 부모 요소 또는 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위
절대 단위
px(pixel) : CSS에서 사용할 수 있는 크기 단위중 가장 기본
-> 모니터의 화면을 구성하는 사각형 1개의 크기를 의미
상대 단위
| 단위 | 설명 |
|---|---|
| % | 해당 속성의 상위 요소 속성값에 상대적인 크기를 가짐 |
| em | 부모 요소의 텍스트 크기에 상대적인 크기를 가짐 |
| rem | html 태그의 텍스트 크기에 상대적인 크기를 가짐 |
| vw | 뷰포트의 너비를 기준으로 상대적인 크기를 가짐 |
| vh | 뷰포트의 높이를 기준으로 상대적인 크기를 가짐 |
% 단위는 부모 요소의 속성값에 따라 상대적인 크기를 가짐
-> 어떤 속성을 사용했는지에 따라 기준이 다르게 잡힘
ex)
.parent{
font-size:16px;
}
.child{
font-size:80%; /* 16px * 0.8 = 12.8*/
}
.child-to-child{
font-size:80%; /* 16px * 0.8 * 0.8 = 10.24px */
}em 단위는 부모 요소의 텍스트 크기(font-size)를 기준으로 상대적인 크기
-> %는 사용되는 속성에 따라 기준이 달라지지만, em 단위는 오로지 텍스트 크기를 기준
.parent{
font-size : 16px;
}
.child{
font-size:2em; /* 16px * 2em = 32px */
}
.child-to-child{
font-size:2em; /* 32px * 2em = 64px */
}rem 단위는 html 태그의 텍스트 크기에 대한 상대적인 값
-> 1 rem 은 html 태그의 텍스트 크기의 1배
html{
font-size:1rem;
}
.parent{
font-size:1rem; /* 16px * 1rem = 16px */
}
.child{
font-size:2rem; /* 16px * 2rem = 32px */
}vw 단위는 뷰포트(웹페이지가 표시되는 영역) 너비를 기준으로 상대적인 크기를 가짐
-> ex) 웹이나 모바일에서 웹 브라우저 창의 너비
1vw == viewport 너비의 1/100
/* 기준 뷰포트 너비 900px */
.parent{
font-size:1vw; /* 900px * 1/100 = 9px */
}
.child{
font-size:2vw; /* 900px * 2/100 = 18px */
}vh 단위는 뷰포트 높이를 기준으로 상대적인 크기
-> 1vh는 뷰포트 높이의 1/100 크기를 의미
/* 기준 뷰포트 높이 400px */
.parent{
font-size:1vh; 400px * 1/100 = 4px
}
.child{
font-size:2vh; 400px * 2/100 = 8px
}색상 표기법
키워드 표기법
색상의 영문명을 속성값으로 사용한느 방법
RGB 표기법
RGB에 추가로 색의 투명도를 나타내는 알파 값을 사용 가능
rgb(red, green, blue)
rgba(red, green, blue, alpha)이 두 형식은 256개 숫자(0~255)로 표시
-> 가장 낮은 색값 0, 높은 색 값 255
-> 알파값은 0부터 1 사이의 소수점으로 표시(0 생략 가능)
ex)
h1{
color:rgb(255,0,0); /* 빨간색 */
}
h2{
color:rgba(0,255,0,.5); /* 초록색 */
}HEX 표기법
RGB에 해당하는 값을 각각 16진수로 변환해 OO~ff로 나타내는 표기법
ex) #RRGGBB
00이 가장 낮은 값, ff가 가장 높은 값
#ffOOOO은 빨간색
#OOffOO은 초록색
