CSS는 2가지 분류로 나뉜다
① selector 파트
: html에 작성해둔 elemet를 지정함
ex) h1, div, class-name, id-name
② property 파트
: property-name:value;로 css style을 지정
ex) backgroung-color : red;
Cascading Style Sheets
구조화된 문서를 어떻게 나타낼 것인가를 정의하는 시트언어
1) CSS 문법
선택자{선언블록안에 선언-> 속성명: 속성값;}
2) 주석처리
/* 주석주석 */
* HTML에서서는 <!-- --> 이걸로 함
3) css 종류
적용 순위
: 스타일 시트는 가장 후단에 오는 순서로 적용
: 인라인>내부 >외부
? 그럼 적용순위?
- 인라인 스타일(임베디드방식)
: </> 태그 안에 style을 넣어서 사용하는 것
인라인(inline) 요소 : span, a
- 내부 스타일 시트
: <head> 사이 안에 <style>로 사용
: 단 적용하고자 하는 곳에 class 또는 id 등을 부여해줘야함
- 외부 스타일 시트
: css 파일을 따로 만들어서 HTML에 적용
: <link rel=”stylesheet” href=”css 경로”
4) CSS 선택자
4-1. 태그선택자(HTML 요소 선택자)
- 해드 안에 스타일을 넣어서 적용하는 방법
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>lab02_selector.html</title>
<style>
p{
text-align: center;
color: royalblue;
font-weight: bold;
}
</style>
</head>
4-2. 아이디 선택자
id=> 자바스크립트에서 많이 사용
id vs class
- id(#) : 내부에서 중복이 될 수 없는 값
- class(.) : 내부에서 중복도 가능하고 단일로도 사용가능
4-3. 클래스 선택자
<!-- class는 스타일 시트 상 위에 있을 수록 먼저 적용 (최종적으로는 맨 아래쪽으로 덮임) -->
/*3. 클래스 선택자*/
.font40{
font-size: 40px;
color: orchid;
}
.font50{
font-size: 50px;
color: springgreen;
}
.right{
text-align: right;
}
스타일 태그에서 클래스명을 지정 후에 적용 하고 싶은 태그에 클래스 명을 나열한다.
<h2>3. 클래스 선택자</h2>
<p>클래스는 여러 요소를 대상으로, 여러 종류를 적용할 수 있습니다.</p>
<p class="font40">40px 크기의 텍스트</p>
<p class="font50 right">40px 크기의 텍스트와 오른쪽 정렬</p>
<p class="font40 right">50px 크기의 텍스트와 오른쪽 정렬</p>
4-4. 그룹 선택자
여러 요소를 한번에 선택할 수 있는 선택자
/*4. 그룹선택자*/
h3,h4{
color: green;
}
h3와 h4를 한번에 설정하는 방법
? 그룹선택자는 아이디나 클래스는 사용가능?
'Coding With Jina > CSS' 카테고리의 다른 글
| [CSS] Flex (0) | 2020.05.15 |
|---|---|
| [CSS] vertical-align 수직정렬 (0) | 2020.05.14 |
| [CSS] Position & Display (0) | 2020.05.14 |
| [CSS] Box Model 쉬운 정리 (0) | 2020.05.14 |
| [CSS] 기본 속성 (0) | 2020.05.08 |