![[CSS] CSS 개요, 스타일 시트, 기본 문법(형식), 선택자](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb4Vz6e%2FbtrMzDi4WMt%2FNHEhoFJDo8MxLSgupWA6XK%2Fimg.png)
1. CSS
- Cascading Style Sheet
- HTML로 작성된 웹 문서의 스타일의 디자인을 재정의하여 보다 시각적으로 보여주기 위한 스타일 시트 언어
- 장점
- 웹 구조(HTML)와 디자인(CSS)를 분리하여 관리할 수 있다.
- 디자인(CSS)을 변경하여 동일한 HTML을 쉽게 재디자인 할 수 있다.
- 반응형 웹을 만들기 위해서는 반드시 필요하다.
2. CSS 스타일 시트
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<!-- 내부 스타일 시트 -->
<style>
h1 { color: red; font-size: 16px; font-weight: 300; }
</style>
<!-- 외부 스타일 시트 -->
<link rel="stylesheet" href="day06-1.css"/>
<link rel="stylesheet" href="day06-2.css"/>
</head>
<body>
<h1>안녕하세요 반갑습니다.</h1>
<!-- 인라인 스타일 -->
<p style="color: green;">프론트엔드 과정입니다.</p>
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
</body>- 인라인 스타일 : HTML 태그 안에 style 속성으로 작성
- 내부 스타일 : <style> 태그를 따로 작성해서 CSS 작성
- 외부 스타일 : 외부 파일에 .css 파일을 만들어서 <link> 태그로 사용
3. CSS 기본 형식
* 반드시 중괄호 사이에 속성과 값을 넣어야 한다.
* 속성과 값은 반드시 하나의 쌍으로 이루어진다.
- 선택자(Selector)
- style 받을 HTML 엘리먼트 명, 클래스, 아이디 등을 지정. - 선언(Declaration)
- 해당 엘리먼트의 속성들을 스타일하고 싶은대로 속성 및 값을 지정 - 속성(Properties)
- 해당 엘리먼트의 속성을 지정 - 값(Value)
- 해당 엘리먼트의 값을 지정
4. CSS 선택자
https://tadaktadak-it.tistory.com/66?category=1024176
[CSS] CSS와 CSS 선택자
1. CSS(Cascading Style Sheets) CSS란? - CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어 - 스타일을 HTML 문서로부터 따로 분리하는 것이 가능 CSS를 사용하
tadaktadak-it.tistory.com
| 전체 선택자 | * { padding: 0; color: gray; } | 모든 요소에 적용 |
| 엘리먼트 선택자 | h1 { color: rgb(255, 142, 37); } | 엘리먼트 태그에 적용 |
| 하위 선택자 | body p { color: red; } | body 자식, 손자 중 모든 p 태그 적용 |
| 자식 선택자 | ul > li { color: blue; } | ul 태그 밑에 직계 자식 중 li 태그 적용 |
| 클래스 선택자 | .sel-class { font-style: italic; } | class 속성에 맞는 태그 적용 |
| 아이디 선택자 | #sel-id { color: green; } | id 속성에 맞는 태그 적용 |
| 엘리먼트 다중 선택자 | p, span { color: rgba(128, 255, 0, 0.8); } | , 로 여러 개의 엘리먼트 태그에 적용 |
| 혼합 사용 | p.sel-class { color: yellow; } | 선택자 두개 다 속하는 태그에 적용 |
| :nth-child(N) | 부모안에 모든 요소 중 N번째 요소 |
| A:nth-of-type(N) | 부모안에 A라는 요소 중 N번째 요소 |
| :first-child | 부모안에 모든 요소 중 첫번째 요소 |
| :last-child | 부모안에 모든 요소 중 마지막 요소 |
| A:first-of-type | 부모안에 A라는 요소 중 첫번째 요소 |
| A:last-of-type |
부모안에 A라는 요소 중 마지막 요소
|
| :focus |
커서가 이 칸을 눌렀을 때
|
* 선택자 중 짝수번째, 홀수번째만 선택하는 방법
.table-b tr : nth-child(odd) => 홀수 번째만
.table-b tr : nth-child(even) => 짝수 번째만
.table-b tr : nth-child(2n) => 두번째 마다
p:nth-child(odd)는 모든 요소를 포함해서 홀수번째에 있는 p태그에 적용하는 것이고,
p:ntn-of-type(odd)는 모든 요소가 아닌 p태그 중에서 홀수번째에 있는 p태그에 적용하는 것이다.
* 우선순위
!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<!--
엘리먼트 선택자
h1 { color: rgb(255, 142, 37); }
-->
<h1>안녕하세요</h1>
<!--
하위 선택자
body p { color: red; }
-->
<p>프론트 엔드 과정 소개</p>
<!--
클래스 선택자
.sel-class { font-style: italic; color: rgb(14, 255, 255); }
-->
<div>
<p class="sel-class">6월 개강</p>
<p class="sel-class">월수금</p>
<h3 class="sel-class">1</h3>
<!--
아이디 선택자
#sel-id { color: green; }
-->
<p id="sel-id">시각 19:00</p>
</div>
<span id="sel-id">홍길동</span>
<div>
<!--
자식 선택자
ul > li { color: blue; }
-->
<ul>
<li>01. HTML</li>
<li>02. CSS</li>
<li>03. Javascript</li>
</ul>
<ol>
<li>04. React.js</li>
<li>05. Node.js</li>
<li>06. Mysql</li>
</ol>
</div>
</body>
</html>
<style>
* { padding: 0; color: gray; }
h1 { color: rgb(255, 142, 32); }
body p { color: red; }
.sel-class { font-style: italic; color: rgb(14, 255, 255); }
#sel-id { color: green; }
ul > li { color: blue; }
/* p.sel-class { color: yellow; } */
</style>
'FrontEnd > CSS' 카테고리의 다른 글
| [CSS] CSS 배경 이미지(background-image) (0) | 2022.10.05 |
|---|---|
| [CSS] CSS block vs inline, <div> vs <span> (1) | 2022.09.22 |
| [CSS] CSS 박스 모델, border, padding, margin (0) | 2022.09.22 |
| [CSS] CSS 배경(background), 글자 색상(color) (1) | 2022.09.21 |
| [CSS] CSS 레이아웃(display, position, float) (0) | 2022.09.21 |