1. CSS 기본
1. CSS : Cascading Style Sheet
- 스타일(디자인)에 관련된 언어
- 색, 크기, 위치 등등을 조정
- 정적인 언어
2. CSS 작성 위치
1) Inline
- Element의 style 속성에 css코드 작성
- 웬만하면 이 방식은 비추천
2) Internal
- head 태그 영역 내에 <style> 태그를 쓰고, 그 태그 내에 CSS 코드 작성
- 이 방식도 비추천
3) External
- CSS코드만 있는 전용 파일 생성
- 사용하려는 HTML에서 head 태그 내에 <link>를 이용해서 불러오는 방식
- 이 방식을 추천
- 우선순위는 Inline > Internal > External 순으로 적용됨 (Inline이 최종으로 적용)
설명1. CSS코드 작성방법
-- Inline
<body>
<h1 style="color: red;">H1</h1>
<body>
-- Internal
<head>
<style>
h2 {
color: red;
}
</style>
</head>
-- External
<head>
-- study1.css --
h3 {
color:red;
}
----------------
<link rel="stylesheet" href="study1.css">
</head>
2. CSS 문법
1. 문법
선택자 {
속성명 : 값;
속성명 : 값2;
}
- 선택자 : HTML 요소를 선택함
- 내가 원하는 요소만을 선택해서 속성을 바꾸기 위함
2. 선택자 (Selector)
1) * : 전체선택자, 모든 Element를 선택
2) 태그명 : 태그선택자, 해당 태그에 해당하는 Element를 선택
3) #id명 : Id 선택자
4) .클래스명 : Class 선택자
5) 선택자A > 선택자B : 자식 선택자
- A선택 요소의 직계자손 B만을 선택
- B의 자손 (A의 입장에서는 후손)은 선택되지 않음
6) 선택자A 선택자B : 후손 선택자
- A선택 요소의 모든 후손 B를 선택
설명1. Id, Class 선택자
<body>
<h1>H1</h1>
<h2 class="t1", id="i1">H2</h2>
<h3>H3</h3>
<h4 class="t1">H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<h2>Another H2</h2>
</body>
.t1 {
color: yellow;
}
#i1 {
font-size: 70;
}
이렇게하면 맨 밑에 Contents가 Another H2이고 태그가 h2인 요소는 노란색으로 변하지 않는다.
클래스를 선택을 했기 때문이다.
그리고 font-size도 마찬가지로 바뀌지 않는다. id도 따로 지정해주었고,
그 Id만 선택해서 폰트크기를 바꾸어 주었기 때문이다.
3. 주석
/* css 주석 */'웹개발 풀스택 과정 > CSS' 카테고리의 다른 글
| 30일차(2022.02.07) _ Reset.css (0) | 2022.02.07 |
|---|---|
| 30일차(2022.02.07) _ List (0) | 2022.02.07 |
| 30일차(2022.02.07) _ Background (0) | 2022.02.07 |
| 29일차(2022.02.04) _ Display속성, Box 모델 (0) | 2022.02.04 |
| 29일차(2022.02.04) _ Text, Font, Color 관련 속성 (0) | 2022.02.04 |
