CSS 선언 방식

1. 내장 방식 : <style></style>의 내용으로 스타일을 작성하는 방식

<style>
	div {
    	color: red;
        margin: 20px;
    }
</style>

2. 링크 방식 : <link/>로 외부 CSS 문서를 가져와서 연결하는 방식 (병렬로 연결)

<link rel="stylesheet" href="./css/main.css">

3. 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)

<div style="color: red; margin: 20px;"></div>

4. @import 방식 : CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식 (직렬로 연결)

@import url("./box.css");

CSS 선택자

1. 기본
   (1) * (전체 선택자) : 모든 요소를 선택
   (2) 태그이름 (태그 선택자) : 태그 이름으로 요소 선택
   (3) 클래스 속성 값(클래스 선택자) : HTML class 속성의 값으로 요소 선택
   (4) id 속성 값(아이디 선택자) : HTML id 속성의 값으로 요소 선택

2. 복합
   (1) 일치 선택자 : 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택

   <span class="orange></span>
   span.orange { }

   (2) 자식 선택자 : 선택자 ABC의 자식 요소 XYZ 선택

   <ul>
   	<li>사과</li>
       <li>딸기</li>
       <li class="orange">오렌지</li>
   </ul>
   ul > .orange {}

   (3) 하위(후손) 선택자 : 선택자 ABC의 하위 요소 XYZ 선택. '띄어쓰기'가 선택자의 기호

   <div>
   	<ul>
       	<li>딸기</li>
           <li>딸기</li>
       	<li class="orange">오렌지</li>
       </ul>
       <div>당근</div>
       <p>토마토</p>
       <span class="orange">오렌지</span>
   </div>
   <span class="orange">오렌지</span>
   
   div .orange {}

   (4) 인접 형제 선택자 : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택

   <ul>
       	<li>딸기</li>
           <li>딸기</li>
       	<li class="orange">오렌지</li>
           <li>망고</li>
           <li>사과</li>
    </ul>
       
   .orange + li {}    // 망고

   (5) 일반 형제 선택자 : 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택

   <ul>
       	<li>딸기</li>
           <li>딸기</li>
       	<li class="orange">오렌지</li>
           <li>망고</li>
           <li>사과</li>
    </ul>
       
   .orange ~ li {}    // 망고, 사과

3. 가상 클래스

• .클래스이름:hover{} : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택

.box {
	width: 100px;
    height: 100px;
    background-color: orange;
    transition: 1s; // 자연스럽게 변화
}
.box:hover {
	width: 300px;
    background-color: royalblue;
}

• ABC:active{} : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

a:active {
	color: red;
}

• ABC:focus{} : 선택자 ABC 요소가 포커스 되면 선택 ( Focus가 될 수 있는 요소는 HTML 대화형 콘텐츠가 해당됨 ex] iput, a, button, label, select 등/ tabindex 속성을 사용한 요소도 가능 tabindex="-1")

input:focus {
	background-color: orange;
}

• ABC:first-child{} : 선택자 ABC가 형제 요소 중 첫째라면 선택

<div class="fruits">
	<span>딸기</span>
    <span>딸기</span>
    <div>오렌지</div>
    <p>망고</p>
    <h3>사과</h3>
</div>

.fruits span:first-child {
	color: red;
}

• ABC:last-child{} : 선택자 ABC가 형제 요소 중 막내라면 선택

<div class="fruits">
	<span>딸기</span>
    <span>딸기</span>
    <div>오렌지</div>
    <p>망고</p>
    <h3>사과</h3>
</div>

.fruits h3:last-child {
	color: red;
}

• ABC:nth-child(n){} : 선택자 ABC가 형제 요소 중 (n)째라면 선택

<div class="fruits">
	<span>딸기</span>
    <span>딸기</span>
    <div>오렌지</div>
    <p>망고</p>
    <h3>사과</h3>
</div>

.fruits *:nth-child(2n+1) { // n은 0부터
	color: red;
}

• ABC:not(XYZ){} : 선택자 XYZ가 아닌 ABC 요소 선택

<div class="fruits">
	<span>딸기</span>
    <span>딸기</span>
    <div>오렌지</div>
    <p>망고</p>
    <h3>사과</h3>
</div>

.fruits *:not(span) {
	color: red;
}

4. 가상 요소

• ABC::before {} : 선택자 ABC 요소의 내부 앞에 내용을 삽입

<div class="box"> Content! </div>

.box::before { content: "앞!"; }

• ABC::after {} : 선택자 ABC 요소의 내부 뒤에 내용을 삽입

<div class="box"> Content! </div>

.box::after { content: "뒤!"; }

5. 속성

• [ABC] : 속성 ABC를 포함한 요소 선택

<input type="text" value="H">
<input type="password" value="1234">
<input type="text" value="ABCD" disabled> // 세번째가 선택

[disabled] { color: red; }

• [ABC="XYZ"] : 속성 ABC를 포함하고 값이 XYZ인 요소 선택

<input type="text" value="H">
<input type="password" value="1234"> // 두번째가 선택
<input type="text" value="ABCD" disabled> 

[type="password"] { color:red; }

스타일 상속

상속되는 CSS 속성들은 모두 글자/문자 관련 속성들

강제 상속

속성: inherit;

선택자 우선순위

1st !important; 99999점
2nd 인라인 선언 1000점
3rd ID 선택자 100점
4th class 선택자 10점
5th 태그 선택자 1점
6th 전체 선택자 0점
7th 상속 x

속성

너비

• width
  • auto : 브라우저가 너비를 계산(기본값)
  • 단위 : px, em, vw 등 단위로 지정
• height
• max-width, max-height
  • none : 최대 너비 제한 없음 (기본값)
  • 단위 : px, em, vw 등 단위로 지정
• min-width, min-height
  • 0 : 최소 너비 제한 없음 (기본값)
  • 단위 : px, em, vw 등 단위로 지정

단위

• px : 픽셀
• % : 상대적 백분율
• em : 요소의 글꼴 크기
• rem : 루트 요소의 글꼴 크기
• vw: 뷰포트 가로 너비의 백분율
• vh : 뷰포트 세로 너비의 백분율

외부 여백(margin)

margin : 요소의 외부 여백(공간)을 지정하는 단축 속성
[값]

• 0 : 외부 여백 없음(기본값)
• auto : 브라우저가 여백을 계산 -> 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용
• 단위 : px, em, vw 등 단위로 지정
  [방향]
• margin-top
• margin-bottom
• margin-left
• margin-right

내부 여백(padding)

padding : 요소의 내부 여백(공간)을 지정하는 단축 속성 -> 요소의 크기가 커짐
[값]

• 0 : 내부 여백 없음(기본값)
• 단위 : px, em, vw 등 단위로 지정
• % : 부모 요소의 가로 너비에 대한 비율로 지정
  [방향]
• padding-top
• padding-bottom
• padding-left
• padding-right

테두리 선(border)

border: 선-두께 선-종류 선-색상; : 요소의 테두리 선을 지정하는 단축 속성
border: border-width border-style border-color;

• border-width : 요소 테두리 선의 두께
• border-style : 요소 테두리 선의 종류
  • none : 선 없음(기본값)
  • solid : 실선
  • dashed : 파선
• border-color : 요소 테두리 선의 색상을 지정하는 단축 속성
  • black : 검정색(기본값)
  • 색상
  • transparent : 투명
    [방향]
• border-top : 두께 종류 색상;
  • border-top-width: 두께;
  • border-top-style: 종류;
  • border-top-color: 색상;
• border-bottom
• border-left
• border-right

모서리 둥글게(border-radius)

border-radius : 요소의 모서리를 둥글게 깎음

• 0 : 둥글게 없음(기본값)
• 단위

크기 계산(box-sizing)

box-sizing : 요소의 크기 계산 기준을 지정

• content-box : 요소의 내용으로 크기 계산(기본값)
• border-box : 요소의 내용 + padding + border로 크기 계산

넘침 제어(overflow)

overflow : 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성

• visible : 넘친 내용을 그대로 보여줌 (기본값)
• hidden : 넘친 내용을 잘라냄
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

출력 특성(display)

display : 요소의 화면 출력(보여짐) 특성

• block 상제(레이아웃) 요소
• inline : 글자 요소
• inline-block : 글자 + 상자 요소
• flex : 플렉스 박스(1차원 레이아웃)
• grid : 그리드 (2차원 레이아웃)
• none : 보여짐 특성 없음, 화면에서 사라짐

투명도

opacity : 요소 투명도

• 1 : 불투명 (기본값)
• 0~1 : 0부터 1사이의 소수점 숫자

글꼴

font-style : 글자의 기울기

• normal : 기울기 없음(기본값)
• italic : 이탤릭체

font-weight : 글자의 두께(가중치)

• normal, 400 : 기본 두께 (기본값)
• bold, 700 : 두껍게
• 100~900 : 100단위의 숫자 9개

font-size : 글자의 크기

• 16px : 기본 크기
• 단위 : px, em, rem 등 단위로 지정

line-height : 한 줄의 높이, 행간과 유사

• 숫자 : 요소의 글꼴 크기의 배수로 지정
• 단위 : px, em, rem 등 단위로 지정

font-family : sans-serif

문자

color : 글자의 색상

• rgb(0,0,0) : 검정색 (기본값)
• 색상

text-align : 문자의 정렬 방식

• left : 왼쪽 정렬(기본값)
• right : 오른쪽 정렬
• center : 가운데 정렬

text-decoration : 문자의 장식(선)

• none : 장식 없음(기본값)
• underline : 밑줄
• line-through : 중앙선

text-indent : 문자 첫 줄의 들여쓰기

• 0 : 들여쓰기 없음 (기본값)
• 단위

배경

background-color : 요소의 배경 색상

• transparent : 투명함 (기본값)
• 색상

background-image : 요소의 배경 이미지 삽입

• none : 이미지 없음 (기본값)
• url("경로") : 이미지 경로

background-repeat : 요소의 배경 이미지 반복

• repeat : 이미지를 수직, 수평 반복 (기본값)
• repeat-x : 이미지를 수평 반복
• repeat-y : 이미지를 수직 반복
• no-repeat : 반복 없음

background-position : 요소의 배경 이미지 위치

• 방향 : top, bottom, left, right, center 방향
• 단위

background-size : 요소의 배경 이미지 크기

• auto : 이미지의 실제 크기 (기본값)
• 단위
• cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
• contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

backgroud-attachment : 요소의 배경 이미지 스크롤 특성

• scroll : 이미지 요소가 따라서 같이 스크롤 (기본값)
• fixed : 이미지가 뷰포트에 고정, 스크롤 x

배치

position : 요소의 위치 지정 기준

• static : 기준 없음
• relative : 요소 자신을 기준
• absolute : 위치 상 부모 요소를 기준
• fixed : 뷰포트(브라우저)를 기준

=> absolute, fixed가 지정된 요소는 display 속성이 block으로 변경됨

top, bottom, left, right : 요소의 각 방향별 거리 지정

• auto : 브라우저가 계산
• 단위

요소 쌓임 순서(Stack order)

: 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

z-index

: 요소의 쌓임 정도를 지정

• auto : 부모 요소와 동일한 쌓임 정도
• 숫자 : 숫자가 높을 수록 위에 쌓임

플렉스(정렬) Container

display : Flex Container의 화면 출력(보여짐) 특성

• flex : 블록 요소와 같이 Flex Container 정의
• inline-flex : 인라인 요소와 같이 Flex Container 정의

flex-direction : 주 축을 설정

• row : 행 축(좌=>우)
• row-reverse : 행 축(우=>좌)
• column
• column-reverse

flex-wrap : Flex Items 묶음(줄 바꿈) 여부

• nowrap : 묶음(줄 바꿈) 없음
• wrap : 여러 줄로 묶음

justify-content : 주 축의 정렬 방법

• flex-start : Flex Items를 시작점으로 정렬
• flex-end : Flex Items를 끝점으로 정렬
• center : Flex Items를 가운데 정렬

align-content : 교차 축의 여러 줄 정렬 방법

• stretch : Flex Items를 시작점으로 정렬 (기본값)
• flex-start : Flex Items를 시작점으로 정렬
• flex-end : Flex Items를 끝점으로 정렬
• center : Flex Items를 가운데 정렬

align-items : 교차 축의 한 줄 정렬 방법

• stretch : Flex Items를 교차 축으로 늘림 (기본값)
• flex-start : Flex Items를 각 줄의 시작점으로 정렬
• flex-end : Flex Items를 각 줄의 끝점으로 정렬
• center : Flex Items를 각 줄의 가운데 정렬

플렉스(정렬) items

order : Flex Item의 순서

• 0 : 순서 없음 (기본값)
• 숫자 : 숫자가 작을 수록 먼저

flex-grow : Flex Item의 증가 너비 비율

• 0 : 증가 비율 없음 (기본값)
• 숫자 : 증가 비율

flex-shrink : Flex Item의 감소 너비 비율

• 1 : Flex Container 너비에 따라 감소 비율 적용 (기본값)
• 숫자 : 감소 비율 ex) 0으로 하면 원래 비율 유지

flex-basis : Flex Item의 공간 배분 전 기본 너비

• auto : 요소의 Content 너비
• 단위 -> 보통 0으로 해서 flex-grow로 비율 따라 크기 할당하게

전환

transition: 속성명 지속시간 타이밍함수 대기시간; : 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
transition: transition-property transition-duration transition-timing-function transition-delay;

• transition-property : 전환 효과를 사용할 속성 이름을 지정
  • all : 모든 속성에 적용(기본값)
  • 속성이름 : 전환 효과를 사용할 속성 이름 명시 ex)width
• transition-duration : 전환 효과의 지속시간을 지정
  • 0s : 전환 효과 없음(기본값)
  • 시간 : 지속시간(s)을 지정
• transition-timing-function : 전환 효과의 타이밍(Easing)함수를 지정
  • ease : 느리게-빠르게-느리게 (기본값)
  • linear : 일정하게
  • ease-in : 느리게-빠르게
  • ease-out : 빠르게-느리게
  • ease-in-out : 느리게-빠르게-느리게
• transition-delay : 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
  • 0s : 대기시간 없음(기본값)
  • 시간 : 대기시간(s)을 지정

변환

transform : 원근법 이동 크기 회전 기울임; : 요소의 변환 효과

2D 변환 함수

• translate(x, y) : 이동 (x축, y축)
• translateX(x) : 이동 (x축)
• trnaslateY(y) : 이동 (y축)
• scale(x, y) : 크기(x축, y축)
• rotate(degree) : 회전(각도)
• skewX(x) : 기울임(x축)
• skewY(y) : 기울임(y축)

3D 변환 함수

• perspective(n) : 원근법(거리) -> 제일 앞에 작성
• rotateX(x) : 회전(x축)
• rotateY(y) : 회전(y축)

속성

perspective : 하위 요소를 관찰하는 원근 거리를 지정 -> 관찰 대상의 부모에 적용

• 단위

backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부

• visible : 뒷면 보임 (기본값)
• hidden : 뒷면 숨김