[CSS] CSS 기초
Updated:
개요
CSS에 대한 기본적인 내용과 사용 방법들을 정리한다.
CSS 기초
CSS는 Cascading StyleSheets의 약자로 HTML 태그에 스타일을 지정할 때 사용하는 언어이다.
CSS 방법에는 크게 세가지로 나뉜다.
- 내부 스타일 시트
- 외부 스타일 시트
- 인라인 스타일
내부 스타일 시트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS(Cascading Style Sheets)</title>
<style>
p{color:blue;}
</style>
<body>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</body>
</head>
</html>
외부 스타일 시트
- 별도의 css파일을 만들고 그 파일과 연결해서 사용하는 방법
다음은 순서대로 html과 css 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS(Cascading Style Sheets)</title>
<!--link를 통해 css파일을 연결할 수 있다.-->
<link href="style.css" rel="stylesheet">
<body>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</body>
</head>
</html>
p{color:red;}
인라인 스타일 방법
- 태그의 스타일 속성으로 css를 작성하는 것.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS(Cascading Style Sheets)</title>
<!--link를 통해 css파일을 연결할 수 있다.-->
<link href="style.css" rel="stylesheet">
<body>
<p style="color:green;">Lorem, ipsum dolor sit.</p>
</body>
</head>
</html>
CSS 기본 문법
- CSS는 선택자{속성: 속성값;}으로 구성된다.
- 선택자는 스타일링하고 싶은 HTML 태그를 선택하는 영역을 의미한다.
- 선언부는 스타일링하고 싶은 속성과 속성값을 작성하는 영역이다. 중괄호부분이 선언부라고 할 수 있겠다.
p{color:blue;}
- p란 선택자가 되고 color는 속성이고 blue는 속성값이다.
- 중괄호 영역 전체는 선언부가 된다.
추가적으로 속성과 속성값은 세미콜론으로 구분하여 여러개를 사용할 수 있다.
p {
color:blue;
font-size:16px;
}
color 속성과 색상 단위(unit)
- 화면에 출력되는 텍스트는 기본적으로 검은색이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS color, unit</title>
<style>
h1{color:red;}
</style>
</head>
<body>
<h1>css color property</h1>
<p>css color unit</p>
</body>
</html>
css에서 색깔을 표현하는 방법은 세가지가 있다.
키워드(keyword)
- 키워드 방법은 색상의 영문 이름을 값의 키워드로 사용하는 방법 (red, green, yellow 등)
RGB
- rgb(R,G,B)에서 RGB에 0~255에 해당하는 값을 적는다.
- 예) rgb(0,0,255)
- 한편 rgba라고 쓰면 알파값을 사용할 수 있다. 알파값은 투명도를 의미한다. 0부터 1까지 소수점 단위로 적을 수 있다.
- 예) rgba(100,100,255,0.5)
HEX (16진수)
- #RRGGBB로 사용. 각각 0이 최저치고 f가 최고치이다.
- 연속되는 것은 한번만 적을 수 있다.
- 예) #00f와 #0000ff는 같다.
font-size 속성과 크기 단위(units)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Size, units</title>
<style>
h1{font-size:16px;}
p{font-size:32px;}
</style>
</head>
<body>
<h1>font size</h1>
<p>폰트 크기를 변경하려면 css의 font-size 속성을 사용하면 됩니다.</p>
</body>
</html>
크기 단위는 여러가지가 있는데 다음과 같다.
px (pixel, 픽셀)
- 고정적인 크기 단위를 보고싶을 때 사용하는 단위이며 기본적인 단위다. 해상도와 관련있다.
rem
- rem 단위는 html 태그의 폰트 크기를 기준으로 배수에 해당하는 크기를 가지게 하기 위해서 이용하는 단위이다.
- html 태그의 폰트 크기와 연관되어 있으므로 html 태그의 font 크기만 변경해도 rem으로 구성된 단위가 수정된다.
- 따라서 반응형 웹에서 자주 사용된다.
em
- rem과 비슷하지만 기준 크기가 부모태그이다. 부모 태그의 배수에 해당하는 크기를 가지게 하기 위해서 이용하는 단위이다.
vw
- viewport width의 약자로 화면의 가로 크기와 관련 있는 단위이다. 1vw는 화면 가로 크기의 1/100이다.
vh
- vw와 비슷하게 1vh는 화면 세로 크기의 1/100이다.
텍스트 관련 CSS 속성
font-size
- px, em, rm을 주로 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font-Size</title>
<style>
h1{font-size:16px;}
</style>
</head>
<body>
<h1>font-size</h1>
<p>텍스트(=글자) 크기를 조정하기 위해서 사용하는 CSS 속성입니다.</p>
</body>
</html>
color
- 색상 표현 값을 적어준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color</title>
<style>
h1{color:red;}
</style>
</head>
<body>
<h1>color</h1>
<p>텍스트(=글자) 색상을 조정하기 위해서 사용하는 CSS 속성입니다.</p>
</body>
</html>
font-family
- 글꼴을 지정할 때 사용한다.
- [글꼴], [글꼴유형]; 형태로 표현되는데 여기서 글꼴유형은 generic-family라고 한다.
- generic-family에는 serif, sans-serif, cursive, fantasy, monospace 등이 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font-family</title>
<!-- Times new roman, times 등은 우선순위-->
<style>
h1{font-family: 'Times New Roman', Times, serif;}
</style>
</head>
<body>
<h1>font-family</h1>
<p>텍스트(=글자) 글꼴을 조정하기 위해서 사용하는 CSS 속성입니다.</p>
</body>
</html>
font-weight
- 굵기 단위를 지정할 때 사용한다.
- 굵기 단위에는 normal, bold, bolder , lighter, 100~900으로 지정을 할 수 있다.
- 폰트마다 지원하는 굵기가 다르다는 점에 주의하자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font-weight</title>
<style>
h1{font-weight:bold;}
</style>
</head>
<body>
<h1>font-weight</h1>
<p>텍스트(=글자) 두께를 조정하기 위해서 사용하는 CSS 속성입니다.</p>
</body>
</html>
line-height
- 글자의 줄 높이를 지정한다.
- 1.5로 하면 배수, 20px 등 고정 단위로 지정할 수도 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>line-weight</title>
<style>
p{
font-size:20px;
line-weight:1.5;
}
</style>
</head>
<body>
<h1>font-weight</h1>
<p>텍스트(=글자) 높이를 변경하기 위해서 사용하는 CSS 속성입니다.</p>
</body>
</html>
Leave a comment