---
title: "CSS 정리 01"
date: "2019-01-29"
tags: ["CSS"]
status: archived
verified: false
---
---
## CSS(Cascading Style Sheet)
* **하콤 비움 리( Håkon Wium Lie)**가 1994년 제안
* **HTML의 통일성 있는 디자인을 제공**
* **W3C에서 제정**
* **CSS3**가 현재 표준
* HTML처럼 **compile이 없어 에러가 발생하지 않는다!**
* **3가지 형태로 사용**
* **inline 방식**
* tag에 직접 정의하는 방식
* 우선순위가 가장 높다.
* 코드의 재사용성은 가장 낮다.
* **embed 방식**
* style tag에 정의하는 방식
* **external file 방식**
* 확장자가 .css인 파일을 정의하고 필요한 HTML에서 link tag로 연결하여 사용하는 방식
* 우선순위가 가장 낮다.
* 코드의 재사용성은 가장 높다.
* **선택자(selector)**를 사용하여 디자인을 적용할 태그를 선택한다.
* tag selector, multiple selector, id selector, class selector, behavior selector가 존재
* **문법**
* 값을 집어넣을 때 **':'(colon)**을 사용
* CSS의 주석은 자바의 **여러줄 주석(/* */)**과 같다.
```
selector { 속성 : 값; ... }
```
## inline 방식
```
```
* **디자인 코드를 tag에 직접 정의하는 방식**
* 적용 우선순위가 가장 빠름
* 동일 디자인이 여러번 사용될 때 동일 코드를 여러번 작성해야 함
```html
오늘은 화요일입니다.
내일은 수요일입니다.
```
## embed 방식
```html
...
```
* **디자인 코드의 중복성을 줄여준다.**
* **selector가 사용**된다.
* **embed방식의 css charset의 설정값은 HTML meta 태그값을 따라간다.**
```html
embed 방식
오늘은 화요일입니다.
내일은 수요일입니다.
어제는 월요일입니다.
```
## external file 방식
1. **CSS 정의**
2. **필요한 HTML에서 연결하여 사용**
```html
```
* **CSS파일을 생성하고 공통 디자인을 설정한 후 필요한 HTML에서 사용하는 방식**
* CSS파일을 외부링크로 사용할 때 해당 서버에 CSS파일이 없다면 HTML의 로딩지연시간이 발생한다.
```css
@charset "UTF-8";
div {
font-family:"휴먼편지체"
}
```
```html
external file 방식
Python & Java 응용SW실무개발자 양성과정
Python & Java 응용SW실무개발자 양성과정
Python & Java 응용SW실무개발자 양성과정
```
## selector
* **= 선택자, 디자인을 적용받을 태그를 선정하는 것**
* **tag selector**
* 디자인을 모든 태그가 적용받는다.
```
태그명 { 속성:값; ... }
```
```css
div{ font-family:궁서체; }
```
* **multiple selector**
* tag selector인데 여러개의 태그를 정의하는 것
```
태그명,태그명,태그명 { 속성:값; ... }
```
```css
div,p,input { font-family:궁서체; }
```
* **id selector**
* HTML내에서 **유일**하게 사용하는 이름
* **유일한 디자인을 가져야 할 때 사용**
```
#아이디명 { 속성:값; ... }
```
```css
#fnt { font-family:궁서체; }
```
```html
```
* **class selector**
* HTML내에서 **여러 태그**가 사용하는 이름
* **원하는 태그만 중복된 디자인을 가져야할 때 사용**
```
.클래스명 { 속성:값; ... }
```
```css
.fnt { font-family:궁서체; }
```
```html
...
...
```
## CSS 속성 - 글자 관련
* **글꼴 변경**
* **font-family**
* 글꼴을 여러개 값으로 입력하여 만약 앞에 글꼴이 없다면 그 다음 글꼴이 적용이 된다.
```css
font-family:글꼴, 글꼴, ... ;
```
* **진하게**
* **font-weight**
* **bold** : 진하게
* **normal** : 일반글자
```css
font-weight:bold;
```
* **크기 변경**
* **font-size**
* 값으로 **px, cm, em**을 줄 수 있다.
```css
font-size:00px;
```
* **글자색**
* **영어단어 또는 RGB 16진수값**을 줄 수 있다.
```css
color:RED;
```
* **줄긋기**
* **underline** : 밑줄
* **overline** : 윗줄
* **line-through** : 취소선
* **none** : 선 없음
```css
text-decoration:underline;
```
```html
글꼴 관련 CSS 속성
글꼴 변경
크기 변경
색 변경
글꼴, 색, 크기 변경
진하게
밑줄윗줄취소선
링크
```
## CSS 속성 - 효과 관련
* **태그 숨기기**
* **display**
* **inline 또는 block** : 보임
* **none** : 숨기기
```css
display: none
```
* list 목록 타입 숨기기
* **list-style**
* **inline 또는 block** : 보임
* **none** : 숨기기
```css
list-style: none
```
```html
태그 숨기기
