📚강의록📚/유노코딩)CSS
CSS 기초 01
과부하가즈아
2023. 4. 14. 14:35
CSS(Cascading Style Sheets)
- 계단식으로 스타일을 정의하는 문서
- CSS는 웹문서를 꾸며주기 위해 사용하는 언어이다.
- CSS코드(문서)는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는것이므로 HTML 문서가 없다면 의미가 없다. (HTML문서와 함께 사용되지 않는 CSS문서는 단순한 텍스트에 불과하며, 웹브라우저를 통해 결과물을 확인하기 위해서는 반드시 HTML 문서 작성이 선행되어야 한다.)
- CSS코드는 CSS파일에 작성한다 -> .css
CSS기본문법
선택자{
ㅣ 속성명: 속성값;
}- 선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보
- { } / 중괄호 : 선택한 요소에 적용할 스타일을 정의하는 영역
- 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
- 속성값 : 어떻게 정의하고 싶은지에 대한 정보
주석
선택자{
/* 주석처리할 내용 */
}
html문서에 css문서를 더하는 방법
1. 인라인 스타일 (태그에 직접 기술하기)
태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식으로 선택자는 필요하지 않다. (빠르고 간단하지만 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.)
<p style="color: blue;">
글자를 파랗게 만들어줘!
</p>
▶내용실습◀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
</head>
<body>
<p style="color: blue;">
HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
</p>
</body>
</html>
2. 스타일 태그 (스타일시트를 위한 태그를 추가하여 기술하기)
html 문서에 style태그를 추가하여 그 안에 css코드를 작성하는 방식
<head>
<style>
p{ color: bule; }
</style>
</head>3. 문서 간의 연결 (스타일시트 문서를 따로 작성하여 html문서와 연결하기)
확장자가 .css 인 스타일시트 파일을 생성해 그 안에 css코드를 작성하고, html문서에 이를 연결하는 방식이다.
(이때 link태그를 사용 / 단일태그 / link태그는 html문서의 head태그 내부에 사용)
<link href="./style.css" rel="stylesheet">- href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel : 현재 문서(html)와 외부소스의 연관 관계를 기술하는 속성
▶내용실습◀
/* style.css 라는 css코드만을 담은 파일을 하나 생성 */
p{
color: red;
}<!-- html문서에 연결 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<p>
HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
</p>
</body>
</html>