Written by
on 

Css

1. css란?

마크업 언어(html)가 실제 표시되는 방법을 기술하는 언어 ***

2. css사용법

2.태그선택자

3.클래스 선택자

4.id선택자

5.체인 선택자

6.그룹 선택자

7.복합 선택자

ex) 하위, 자식

section ul {
border: 1px solid black;
}-> 하위 선택자
section > ul {
border: 1px solid black;
}-> 자식 선택자

ex)

h1 + ul {
background: LightBlue;
color: DarkBlue;
}-> 인접 형제 선택자
h1 ~ ul {
background: LightBlue;
color: DarkBlue;
}-> 일반 형제 선택자

.2. 배경 이미지

 div {
background-image: url('../images/icon.png');
}

3. 배경 이미지 반복

div {
background-repeat:no-repeat;
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
}

가로로 반복하는 이미지의 경우, 세로로 길고 가로 1px인 이미지를 이용해 배경을 나타낼 수 있으며, 세로반복의 경우 반대로 가로로길고 세로가 1px인 이미지를 이용해 배경을 나타낼 수 있습니다.

4. 베경 이미지 위치

div {
background-position: 50% 16px;
background-position: center bottom;
}

list-style-type: decimal; list-style-type: lower-alpha; list-style-type: upper-alpha; list-style-type: lower-roman; list-style-type: upper-roman; }

disc, circle, square는 Unordered List에 어울리는 속성이며,
decimal, alpha, roman은 Ordered List에 어울리는 속성입니다.
#### 2. 리스트 블릿에 이미지 지정

ul { list-style-image: url(‘images/mic.png’); }

#### 3. 리스트 블릿 위치 지정

ul { list-style-position: inside; list-style-position: outside; }

#### 4. 리스트 스타일 속기법

ul { list-style: square url(‘images/mic.png’) inside; }

블릿타입과 이미지 주소를 동시에 넣을 경우, 이미지를 찾지 못하면 지정한 블릿타입을 사용합니다.
***
## 8. 테이블 스타일
#### 1. 테두리 합치기

table { border-collapse: collapse; } tr, td { border: 1px solid black; width: 30px; text-align: center; }

테이블의 셀간 공백을 합쳐서 없애는 속성입니다.
해당속성은 오직 table요소에만 사용 가능합니다.
#### 2. 테이블 셀 간격

table { border-spacing: 10px; } tr, td { border: 1px solid black; width: 30px; text-align: center; }

셀 간 간격을 지정할 때는, border-collapse가 ‘collapse’값이면 적용되지 않습니다.
#### 3. 빈 셀의 표시

table { border-spacing: 10px; } tr, td { border: 1px solid black; width: 30px; text-align: center; empty-cells: hide; }

#### 4. 테이블 레이아웃
- 테이블의 기본 설정은 내용이 긴 쪽이 더 늘어납니다 table-layout: auto;
- table-layout의 속성을 fixed로 설정하면, 셀 길이가 일정하게 유지됩니다.
(이 때, table에는 width property가 설정되어있어야 합니다)
***
## 9. css의 화면 표시 속성
#### 1. 화면표시 방법
##### 1. block

span { display: block; }

- span은 원래 인라인속성이지만 , display 프로퍼티에 block값을 받으면 블럭 속성을 지니게 됩니다
- display 속성은 기존에 블럭 요소가 아닌 요소를 블럭 속성을 갖도록 합니다.
##### 2. inline

div { display: inline; }

- 반대로, div 가 diplay 프로퍼티에 inline속성을 받으면 인라인 요소로 취급됩니다.
##### 3. inline-block

span { display: inline-block; }

- 기본적으로 inline요소처럼 취급되지만, block요소와 같이 높이 및 상/하값을 가질 수 있게됩니다,
- 인라인요소에 높이와 상/하 패딩, 마진값을 줄 때 사용합니다.
##### 4. none

div { display: none; }

- 화면에 완전히 보이지 않게 됩니다. 해당 요소의 하위 요소들도 전부 보이지 않게 되며, 공간도 차지하지 않습니다.
##### 5. visibility

div { visibility: hidden; visibility: visible; }

- display: none;은 화면에서 차지하던 공간조차도 전부 없어지며,
visibility: hidden;은 화면에서 차지하던 공간은 그대로인채 투명해진다고 생각하시면 됩니다.
##### 6. 화면 넘침 표시방법 (overflow)

div { overflow: hidden; 넘친 콘텐츠를 전부 숨깁니다 overflow: visible; 영역 밖으로 콘텐츠가 나간 모습이 보입니다 overflow: auto; 콘텐츠가 넘칠경우, 스크롤바가 생성됩니다 overflow: scroll; 콘텐츠가 넘치지 않아도 항상 스크롤바가 있습니다 }

높이가 고정되어있고, 내용이 길면 스크롤 할 부분에서는 auto를 사용합니다.
***
## 10.float 속성
#### 1. float 속성
- float를 사용하면 해당 요소를 문서의 흐름과 별개로 취급하여, 왼쪽이나 오른쪽으로 띄워줄 수 있습니다.
- float 속성을 준 자식요소들의 가로길이가 부모요소의 가로보다 긴 경우 자동으로 다음 라인으로 나머지 자식요소가 옮겨집니다.
 - float요소와 겹치는 경우, float속성을 해제합니다

p { clear: both; clear: left; clear: right; }


***
## 11. float 레이아웃
#### 1. float 레이아웃 관련 팁
float로 레이아웃을 편성할 때 float 적용된 요소의 부모요소는 height가 인식되지 않는 현상이 일어난다. 해당 현상은 after 가상선택자를 이용하여 해결하는 것을 추천

.float-frame::after { content: “ “; display: block; height: 0; clear: both; }

## 12. css포지션
#### 1. position이란?
요소의 위치를 지정하는 속성
- static 기본값
- relativ: static과 같은 순서로 배치되지만, top, right, bottom, left속성을 이용해 위치를 지정 가능
- fixed: 바라우저 창 기준으로 위치
- absolute: 자신과 가장 가까운 'position'이 'static'이 아닌 부모를 기준 (없을 경우 본문(body)기준)
#### 2. 부모의 가운데로 정렬하는
법

width: 500px; margin: 0 auto;

전체 크기가 정해져 있지 않을 경우, 내용의 width만 지정한 후 좌/우 여백은 auto로 같게 처리해줍니다
#### 3. 부모의 가로/세로 가운데 정렬하는 법
1. 부모요소의 height와 line-height의 값이 같을 경우, 내부의 요소들은 세로 가운데로 정렬됩니다
2. 요소를 absolute포지션으로 설정한 뒤, 상단과 왼쪽에서 각각 부모의 50%만큼 이동 후 자신의 높이와 가로의 -50%만큼을 다시 위와 왼쪽으로 이동합니다. transform을 사용할 경우, 픽셀이 깨져보일 수 있음.
ex)

position: absolute; width: 200px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%);

## 13. Sass
#### 1. Sass 란?
CSS전처리기 (Pre-processor)
Sass와 같은 ‘CSS확장 언어’의 파일을 웹 브라우저에서 해석할 수 있는 css파일로 만들어주는 처리기
#### 2. Sass 출력 스타일
* Sass 의 출력 스타일

div.container { padding: 15px; margin: 0;

p#main-title { font-size: 16px; font-weight: bold; } .fixed { position: fixed; bottom: 10px; right: 10px; } }

##### 1. expanded

div.container { padding: 15px; margin: 0; } div.container p#main-title { font-size: 16px; font-weight: bold; } div.container .fixed { position: fixed; bottom: 10px; right: 10px; } ```

2. nested
div.container {
  padding: 15px;
  margin: 0; }
  div.container p#main-title {
    font-size: 16px;
    font-weight: bold; }
  div.container .fixed {
    position: fixed;
    bottom: 10px;
    right: 10px; }
3. compact
div.container { padding: 15px; margin: 0; }
div.container p#main-title { font-size: 16px; font-weight: bold; }
div.container .fixed { position: fixed; bottom: 10px; right: 10px; }
4. compressed
div.container{padding:15px;margin:0}div.container p#main-title{font-size:16px;font-
weight:bold}div.container .fixed{position:fixed;bottom:10px;right:10px}

3. 주석

//주석내용

또는

/* 주석내용 */ (CSS기본)

을 사용합니다

4. 부모 참조 선택자 (&)

&은 자신의 부모선택자를 참조합니다

5. 선택자 상속 (@extend)

상속을 사용하면 같은 속성에서 일부만 바뀐 요소를 쉽게 컨트롤 할 수 있습니다.

div.container { background-color: $bg-color; padding: $padding; margin: 0; p#main-title { font-size: 16px; font-weight: $title-font-weight; } p#sub-title { font-size: 14px; font-weight: $title-font-weight; } .fixed { position: fixed; padding: $padding; bottom: 10px; right: 10px; } }

#### 7.sass파일 호출

@import ‘variables’; %btn { background-color: $brand-primary; font-weight: bold; color: white; padding: 5px 20px; } ```