01 CSS - Cascading Style Sheet
- CSS란?
- 정보 (HTML)와 디자인 (CSS)의 분리
- 문서의 레이아웃과 스타일 정의
- HTML로 작성된 정보를 꾸며주는 언어
- CSS 구성 요소
선택자 {속성 : 속성값;}- 선택자 : 디자인을 적용할 HTML 영역
- 속성 : 어떤 디자인을 적용할지 정의
- 속성값 : 어떤 역할을 수행할지 구체적으로 명령, 세미콜론(;)필수 입력
- 속성 Property
h1{
font-size: 20px; /*폰트 사이즈*/
font-family: sans-serif; /*글꼴*/
color: blue; /*폰트 색깔*/
background-color: yellow;/*배경색*/
text-align: center; /*텍스트 정렬*/
}
- CSS 연동 방법 세 가지
1. Inline Style Sheet : 태그 안에 직접 원하는 스타일을 적용하는 방법, 코드가 길어져 자주 사용하지 않는다.
<h1 style="color:red;"> coding 101 </h1>
2. Internal Style Sheet : <style> 태그 안에 넣는 방법, head 부분이 길어져 자주 사용하지 않는다.
<head>
<style>
h1 {background-color: yellow;}
</style>
</head>
3. External Style Sheet : head 안에 <link> 태그로 불러 와서 사용하는 방법, html, CSS 각각의 문서에 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬운 방법이다.
<head>
<link rel="stylesheet" href="style.css">
</head>
02 CSS 선택자 - Selector
- Selector : HTML의 어떤 요소에 CSS를 적용할 것인지 선택하는 Type, Class, ID
- Type Selector : 특정 태그에 스타일을 적용, 모든 h2 태그에 색깔이 바뀐다는 단점이 있다.
/* <h2> Type Hello World </h2>*/
<style>
h2 {color: red; }
</style>
- Class Selector : 클래스 이름으로 특정 위치에 스타일을 적용, 점(.)은 클래스를 의미한다.
/* <h2 class="coding"> Class Hello World </h2>*/
<style>
.coding {color: blue; }
<style>
- ID Selector : ID를 이용하여 스타일을 적용, 특정 요소를 지칭할 때 주로 사용, #은 아이디를 의미한다.
/* <h2 id="coding"> ID Hello World </h2>*/
<style>
#coding {color: green; }
<style>
03 부모 자식 관계
- 부모 자식 관계 1
- 태그들의 스타일은 자식에 있는 태그 스타일을 따르게 된다.
- 부모 자식 관계 2
'2022 AI SW 온라인 교육 > SW 코딩 훈련트랙' 카테고리의 다른 글
| [SW코딩] 핵심 HTML/CSS 기초 - 04. 웹사이트의 레이아웃 (0) | 2022.12.01 |
|---|---|
| [SW코딩] 핵심 HTML/CSS 기초 - 03. 웹사이트 디자인 (2) (0) | 2022.12.01 |
| [SW코딩] 핵심 HTML/CSS 기초 - 01. HTML 태그의 두 가지 성격 (0) | 2022.11.30 |
| [SW코딩] 핵심 HTML/CSS 기초 - 01. 구조를 잡을 때 사용하는 태그 (0) | 2022.11.30 |
| [SW코딩] 핵심 HTML/CSS 기초 - 01. HTML 기본 태그 (0) | 2022.11.30 |