css 기본 문법
선택자 {
속성 : 속성값;
속성 : 속성값;
}
/* 예시 */
p {
text-align : center; /* 글자 정렬를 지정하는 속성. */
color : #e8e8e8; /* 글자의 색상을 지정하는 속성 */
}
/* 예시02 */
p {
/* ;로 구분만 잘 한다면 한줄로 작성해도 무방. */
text-align : center; color : #e8e8e8;
}
- 선택자란 HTML의 특정 요소를 선택하는 문법.
- CSS 스타일을 적용하는 방법은 크게 3가지로 분류.
style속성을 사용한 인라인 방식.<style>태그에 작성.<link>태그를 이용한 외부 리소스 연결.
1. style 속성을 사용한 인라인 방식.
<h1 style="color:red">CSS란?</h1>- HTML 태그의 style이라는 속성을 통해 CSS 적용.
- 가독성이나 재사용성 면에서 비효율적.
!important다음으로 우선 순위가 높기 때문에 주의.- JavaScript를 통해 CSS값을 적용하는 경우에 많이 사용.
2. <style> 태그에 작성.
<head>
<meta charset="UTF-8" />
<style>
p {
text-align: center;
color: tomato;
}
</style>
</head>- HTML의
<head>태그 안에<style>태그를 작성하여 CSS 적용. <head>태그의 코드가 길어지기 때문에 가독성이 낮음.
3. <link> 태그를 이용한 외부 리소스 연결.
/* main.css */
.box {
width:100px;
height:100px;
background-color: aqua;
}<!-- index.html -->
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./css/main.css" />
</head>.css확장자로 CSS 문서를 별도로 작성 후<link>태그를 통해 연결.- html 파일과 분리하여 관리하기 때문에 재사용성 및 수정 용이성 증가.
