728x90
1. CSS 란?
css는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다.
C -> Cascading
S -> Style
S -> Sheets
마치 html로 콘크리트를 쌓아올렸다면, css는 그 외관을 꾸미는 것이라고 할 수 있습니다.
2. CSS 적용방법
- 인라인 스타일
<span style="font-size: 20px;">CSS의 인라인스타일입니다.</span>
- 내부 스타일 시트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
color: blue;
}
</style>
</head>
<body>
</body>
</html>
- 외부 스타일 시트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
span {
display: block;
}
- 스타일 적용 순서
인라인 스타일 -> 내부 스타일 시트, 외부 스타일 시트 -> 웹 브라우저 기본 스타일
3. CSS 기본 문법
- 선택자
선택자는 스타일을 적용시킬 html의 태그, 클래스, id 등의 위치를 가리킵니다.
- 속성(Property)
선택자의 어떻게, 어떤 것을 바꿀지 나타냅니다.
- 속성값
선택자를 얼마나 바꿀지 나타냅니다.
4. 색 표현 방법
- 색 이름
span {
color: Black;
background-color: White;
}
- RGB, RGBA
span {
color: rgb(0,0,0); /*검은색*/
background-color: rgb(255,255,255); /*흰색*/
}
/*********************************************/
span {
color: rgba(0,0,0,1); /*불투명,검은색*/
background-color: rgb(255,255,255,0); /*투명,흰색*/
}
RGB는 rgb(빨간색, 초록색, 파란색) 의 구조로 이루어져있습니다.
RGBA는 rgba(빨간색, 초록색, 파란색, 투명도)의 구조로 이루어져있습니다.
- HEX
span {
color: #FF5A92;
}
hexadecimal, 즉 16진법을 활용한 값 표현법 입니다.
숫자는 0~9, 이어서 알파벳 A~F까지를 이용해서 값을 표현합니다.
0~255까지의 값이 있습니다.
두자리씩 R, G, B 값을 가집니다.
5.값 표현 방법
- 픽셀
px이라는 단위를 사용합니다.
픽셀은 디지털에서 디스플레이에서 나타나는 작은 점을 말합니다.
- 퍼센트
% 는 상대적 단위입니다.
자신의 부모 요소를 기준으로 비율로 크기를 조절합니다.
- em, rem
em: 같은 요소의 크기나, 상위 요소의 크기를 기준으로 삼습니다.
rem: 최상위 요소의 크기를 기준으로 삼습니다. 만약 최상위 요소가 더 없다면 브라우저의 기본 값을 기준으로 삼습니다.
728x90
'🦴HTML & CSS > style.css' 카테고리의 다른 글
[CSS]_프론트엔드의 꽃 @keyframes (0) | 2023.08.09 |
---|---|
[CSS]_프론트엔드의 꽃 :hover (0) | 2023.08.09 |
[CSS]_프론트엔드의 꽃 3 (0) | 2023.07.22 |
[CSS]_프론트엔드의 꽃 2 (0) | 2023.07.22 |