---
title: "CSS 정리 02"
date: "2019-01-30"
tags: ["CSS"]
status: archived
verified: false
---
---
## CSS 속성 - 정렬
* **수평정렬 text-align**
* **left, right, center** 가능
```css
text-align:left;
```
* **수직정렬 vertical-align**
* **top, middle, bottom** 가능
* 행의 높이가 존재할때만 적용됨
```css
vertical-align:top;
```
* **객체(테이블, div)**
* **정렬이 없어서 margin을 이용한다.**
```css
margin:0px auto;
```
```html
정렬
문자열 수평 정렬
안뇽!
```
* **vertical-align은 padding(행의 높이)이 존재하는 tag에서 사용**
* div같은 경우 vertical-align을 적용해도 padding이 없기 때문에 적용이 안됨
```html
정렬
```
* table의 **td태그의 경우 padding이 존재하므로 vertical-align이 적용된다.**
* 객체 태그를 가운데로 정렬할 땐 margin으로 한다.
```css
table { margin:0px auto }
```
## CSS 속성 - 이미지
* **이미지는 모든 태그 바닥에 설정할 수 있다.**
* **background**
* 한번에 배경관련 여러 속성을 입력할 때 쓰는 속성
* 반복여부를 생략하면 바둑판형식이 기본
* 반복여부
* **repeat-x** : x좌표 반복
* **repeat-y** : y좌표 반복
* **no-repeat** : 반복X
```
background:바닥색 url('이미지URL') 반복여부
```
* url로 이미지만 넣고싶으면 **background-url**을 쓰면 됨
```css
background-image : url('이미지URL')
```
```html
이미지 사용
```
* **모든 태그에 이미지를 배경으로 설정할 수 있다.**
```html
```
## CSS 속성 - 넓이, 높이, 배경색, 테두리
* **넓이**
* **안쪽 데이터가 넓이 이상 넘어가면 줄이 변경된다.**
* width가 설정되어있지 않으면 브라우저 크기에 따라 데이터가 이동한다.
* width가 설정되면 브라우저의 크기가 변경되더라도 안에 데이터가 이동하지 않는다.
```css
width: 00px
```
* **높이**
```css
height: 00px
```
* **바닥 색**
```css
background-color:RGB
```
* **테두리**
* **테두리면을 명시하지 않으면 모든 면에 설정된다.**
* 테두리를 없앨 땐 두께를 0px을 주면 된다.
* **선종류 4가지**
* **solid** : 실선
* **dotted** : 점선
* **dashed** : 긴 점선
* **double** : 이중선
* 이중선은 두께가 3px부터 나타남
```
border: 테두리선두께px 선종류 선색;
```
* **테두리 특정 방향선을 변경가능**
* **border-left, border-right, border-top, border-bottom**
```
border-left: 선두께px 선종류 선색;
border-right: 선두께px 선종류 선색;
border-top: 선두께px 선종류 선색;
border-bottom: 선두께px 선종류 선색;
```
```html
넓이
높이
바닥색
테두리선