한 줄 요약
## CSS란?
-CSS는 Cascading Style Sheets를 의미한다.
-계단식으로 스타일을 정의하는 문서
-CSS는 HTML문서에 스타일을 더해준다.
-HTML 문서는 태그가 태그를 포함하는 계단식 구조를 갖고 있다.
-HTML과 CSS를 더해서 웹브라우저로 실행하게되면 웹브라우저는 문서에 적혀있는대로
화면을 구성하고 사용자에게 보여준다 이 과정을 렌더링이라고 한다.
-CSS문서는 자체적는 독립적으로 존재할 수 있지만 그 목적이 구조화된 HTML 문서의 스타일을 정리하는데 있으므로
HTML문서가 없는 CSS문서는 사실상 의미가 없다.
-HTML : 웹문서의 콘텐츠를 구성하는 언어
-CSS : 웹문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치등...)
-HTML과 함께 사용되지 않는 CSS는 단순 텍스트일 뿐이며
웹브라우저를 통해 결과물을 확인하기 위해서 반드시 HTML 문서 작성이 선행되어야 한다.
# CSS 기본 문법
선택자{
속성명: 속성값;
속성명: 속성값;
속성명: 속성값;
}
-선택자 : 어떤 요소에 스타일을 적용할지에 대한 정보
-{ } : 선택한 요서에 적용할 스타일을 정의하는 영역
-속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(생삭, 너비, 높이 등...)
-속성값 : 어떻게 정의하고 싶은지에 대한 정보
Example
p{
color: red;
}
-선택자 : p태그에 스타일을 적용
-{ } : 중괄호 안의 정보들을 p태그에 정의하겠다.
-속성명 : p태그에 색상을 변경하겠다.
-속성값 : p태그를 red색으로 변경하겠다.
-CSS에서 주석처리는 /* 주석처리 */를 사용한다.
# HTML에 CSS입히기
-HTML 문서에 CSS문서를 적용하고자 할때에는 다음과 같은 방식을 사용할 수 있다.
.인라인 스타일 : 태그에 직접 기술하기
.스타일 태그 : HTML문서에 스타일 시트를 위한 태그를 추가하여 기술하기
.문서간 연결 : 스타일 시트 문서를 따로 작성하여 HTML 문서와 연결하기
# 인라인 스타일
-태그에 style 속성을 추가하여 요소에 직접 스타일을 정의하는 방식
따라서 선택자는 필요가 없다.
-웹 콘텐츠와 스타일 시트를 분리하기위해서는 사용하지 않는 편이 좋다.
index.html
<p style="color : blue;">
이 글은 파란색입니다.
</p>
<body>
<h1 style="color: coral;">CSS를 공부합시다.</h1>
<p style="color: blue;">대통령후보자가 1인일 때에는 그 득표수가 선거권자 총수의 선별될 수 없다.</p>
</body>
# 스타일 태그
-HTML문서에 <style></style> 태그를 추가하여 그 안에 CSS 코드를 작성하는 방식
index.html
<head>
<style>
p{
color: red;
}
</style>
</head>
<head>
<title>CSS를 공부합시다.</title>
<style>
p{
color: navy;
font-size: 30px;
}
h1{
color:blue;
font-size: 50px;
}
</style>
</head>
# 문서간 연결(이걸 중점적으로 사용)
-확장지가 .css인 스타일 시트 파일을 생성해 그안에 CSS 코드를 작성하고 HTML문서에 이를 연결할 수 있다.
이때 <link> 태그를 사용한다.
-<link>태그는 HTML문서의 <head></head> 태그 내부에서 작성해야 한다.
<link href="파일 경로" rel="stylesheet">
# href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
# rel : 현재 HTML 문서와 외부 소스의 연관 관계를 기술하는 속성
1. 확장자명 css 파일 생성
2. css 파일에서 코드 작성
p{
color: coral;
font-size: 45px;
}
p1 {
color: blue;
font-size: 20px;
}
3. head란에 link 코드를 작성해서 css 파일과 연결시켜준다.
<head>
<title>CSS를 공부합시다.</title>
<link href="style.css" rel="stylesheet">
</head><body>
<h1>CSS를 공부합시다.</h1>
<p1>대통령후보자가 1인일 때에는 그 득표수가 선거권자 총수의 선별될 수 없다.</p1>
<p>모든 국민은 행복의 권리가 있다. 자유롭게 살 권리가 있다.</p>
<p>외국인은 환영한다. 국제법에 의거하여 모두를 환영해준다.</p>
</body>
'CSS↗' 카테고리의 다른 글
| CSS 요소의 배경 설정(background) (0) | 2024.04.08 |
|---|---|
| CSS padding, margin / 박스 크기 계산 (0) | 2024.04.08 |
| CSS 목록 스타일 / 블럭, 인라인 요소 / 박스 모델(Border) (0) | 2024.04.08 |
| CSS 텍스트 관련 속성 (0) | 2024.04.05 |
| CSS 선택자 1 (0) | 2024.04.05 |