css 기본 문법 및 사용 방법
선택자{
속성명: 속성값;
}
선택자: 어떤 요소에 스타일을 적용할지에 대한 정보
{}:선택한 요소에 적용할 스타일을 정의 하는 영역
속성명:어떤 스타일을 정의하고 싶은지에 대한 정보(색상,크기)
속성값: 어떻게 정의하고 싶은지에 대한 정보
/* ~~~~ */ : 사이의 ~에 들어가는 내용을 주석처리
인라인 스타일 - 태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식.
웹 콘텐츠와 스타일 시트는 서로 분리해서 관리해야 유지보수 하기 편하기 때문에 인라인 스타일은 추천하지 않는다.
<style></style> 태그 안에 CSS코드를 작성할수 있다.
<style>태그는 html이지만 안에 코드는 CSS코드이다. 주로 <head>안에 위치한다.
문서간의 연결 - 확장자가 .css인 스타일시트 파일을 생성해 css코드를 안에 작성하고 html문서에 연결해줄수있다.
ex) <link href="./style.css" rel="stylesheet">
hred : 연결하고자 하는 외부 소스의 url을 기술
rel : 현재 문서와 외부 소스의 연관 관계를 기술하는 속성
<link>는 head 태그 안에서 쓰여야한다.
실습
style 태그
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>
내용 : 이름과 색이 바뀌는 내용
</p>
</body>
</html>
링크 연결
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>
내용 : 이름과 색이 바뀌는 내용
</p>
</body>
</html>
style.css안의 코드
p{
color: red;
}
잃어버린 한쪽 에어팟