CSS 속성

다시 공부 중...·2021년 9월 27일

패캠-프론트앤드

CSS 속성Properties

(html은 attributes)
화면에 코드가 어떻게 그려질지 상상할 수 있는 능력이 중요하다.

무엇을 꾸밀 수 있는가?

박스 모델
- html 요소의 기본적인 모양을 만드는 속성
- 가로/세로 너비, 외부/내부 여백 등등
글꼴, 문자
- 글꼴, 문자 두께 등등
요소의 배경
- 색상, 이미지 등을 적용 가능
요소의 배치
요소의 플렉스(수평 정렬)
요소의 전환
- 요소의 두 상태간의 전환을 자연스럽게 에니메이션으로 처리
요소의 변환
- 요소의 회전, 이동, 크기 조절 등
- 2D, 3D 변환
띄움
- 요소를 공중에 띄움?: 요소의 주변으로 문자를 작성할 수 있음. ex) 신문기사의 사진과 글
- 플레스 도입 이전에 요소의 수평 정렬에 사용되었음.
애니메이션
- 요소의 전환보다 복잡한 변화를 구현
그리드
- 행과 열을 가진 레이아웃 구조 구현
다단
필터
- 이미지 필터 기능: 블러, 그레이스케일, 반전 등

박스 모델

width, height

요소의 가로/세로 너비

기본값: auto / 브라우저가 너비를 계산
단위: px, em, vw 등

<span></span>

인라인 요소
기본값
- 가로, 세로: 요소 내용에 맞게 자동으로 축소
어차피 인라인 요소라 명시적으로 width, height를 설정해도 반영되지 않는다.

<div></div>

블럭 요소
기본값
- 가로: 부모 요소의 크기만큼 자동으로 늘어남 = 최대한 확대
- 세로: 요소 내용에 맞게 자동으로 축소 = 최대한 축소

<!-- html -->
<div class="parent">
  <div class="child"></div>
</div>

/* css */
.parent {
  width: 100px;
  height: 50px;
  background-color: royalblue;
}
.child {
  /* width 기본값: 부모 요소의 가로 너비만큼 */
  height: 25px;
  background-color: orange;
}

max-width, max-height

요소의 가로, 세로 너비의 상한

기본값: none / 너비 제한 없음

/* css */
.parent {
  width: 100px;
  height: 50px;
  background-color: royalblue;
}
.child {
  max-width: 50px;
  height: 25px;
  background-color: orange;
}

min-width, min-height

요소의 가로, 세로 너비의 하한

기본값: 0 / 너비 제한 없음. 요소의 크기는 0 이상의 수.

/* css */
.parent {
  width: 100px;
  height: 50px;
  background-color: royalblue;
}
.child {
  min-width: 125px;
  height: 25px;
  background-color: orange;
}

css 단위

px 픽셀
% 상대적 백분율 - 기준이 필요
뷰포트 너비의 백분율
- 1 vw: 뷰포트 가로 너비의 1%
- 1 vh: 뷰포트 세로 너비의 1%*
글꼴 크기가 기준인 단위
- rem 루트(<html></html>) 요소의 글꼴 크기
  - 1 rem: 루트 요소의 글꼴 크기의 1배
  - html 요소의 기본 글꼴 크기는 16px ➡ 1rem = 16px
- em 요소의 글꼴 크기
  - font-size를 별도로 설정하지 않으면 상속에 의해 1 em = 16px
  - 요소에 설정된 font-size에 따라 1em의 크기가 달라지므로 주의

<!-- html -->
<div class="parent">
  <div class="child_em"></div>
  <div class="child_rem"></div>
</div>

/* css */
.parent {
  width: 160px;
  height: 50px;
  background-color: royalblue;
  font-size: 8px;
}
.child_em {
  width: 10em;  /* 상속에 의한 글꼴 크기 8px * 10 = 80px */
  height: 50%;  /* 부모 요소 세로 너비의 50% */
  background-color: orange;
}
.child_rem {
  width: 10rem;  /* 루트 요소 글꼴 크기 16px * 10 = 160px */
  height: 50%;
  background-color: red;
}

단축 속성?

넘겨주는 값의 갯수에 따라 여러 속성에 값을 부여할 수 있는 속성

margin: 외부 여백

요소의 외부 여백을 지정하는 단축 속성

속성값

기본값: 0 / 외부 여백 없음. 음수 사용 가능.
auto: 가로 너비가 명시된 블록 요소를 좌우 가운데 정렬시킴. (브라우저가 자동으로 계산)
음수값

<!-- html -->
<div class="container">
  <div class="item_0"></div>
  <div class="item_1"></div>
</div>

/* css */
.container .item_0 {
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 4px solid red;
  margin: 20px;
}
.container .item_1 {
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 4px solid red;
  margin-left: 20px;
  margin-top: -50px;  /* 음수값 margin */
}

margin이 음수인 요소는 요소 경계를 넘어 밀려 들어가게된다.
아래 그림에서는 아래의 div요소의 경계가 안으로 밀려들어갔으나 나중에 선언된 요소이므로 위에 보이는 것.

단축 속성 - 넘겨주는 값의 수에 따라 상하좌우 따로 margin 설정이 가능

값 1개 ➡ 상하좌우 margin 설정
ex) margin: 5px; ➡ 상하좌우 모두 5px
값 2개 ➡ 상하 / 좌우 margin 설정
ex) margin: 5px 10px; ➡ 상하 5px / 좌우 10px
값 3개 ➡ 상 / 중(좌우) / 하 margin 설정
ex) margin: 5px 10px 15px; ➡ 상 5px / 좌우 10px / 하 15px
값 4개 ➡ 시계방향순으로(상 / 우 / 하 / 좌) margin 설정
ex) maring: 5px 10px 15px 20px; ➡ 상, 우, 하, 좌 순으로

개별 속성

margin-top, margin-bottom, margin-left, margin-right

padding: 내부 여백

요소의 내부 여백

속성값

기본값: 0 / 내부 여백 없음
% 단위일 경우: 부모 요소의 가로 너비에 대한 비율
요소 내부에 여백이 생기므로 요소 크기가 커진다.

단축 속성 / 개별 속성: margin과 동일

<!-- html -->
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div>

.container .item {
  width: 50px;
  height: 50px;
  background-color: royalblue;
  border: 5px solid orange;
}
.container .item:first-child {
  padding: 20px;
}

border: 테두리

요소의 테두리 선을 지정하는 단축 속성
padding과 마찬가지로 크기가 커진다.

border: 선-두께 선-종류 선-색상;

개별 속성

border-width: 선 두께 / 기본값 medium
border-style: 선 종류 / 기본값 none - 출력되지 않음
border-color: 선 색상 / 기본값 black

border-width: 선 두께

단축 속성: margin, padding과 동일

속성값

키워드: medium, thin, thick - 모호한 값으로 사용 지양
단위: px, em 등

border-style: 선 종류

단축 속성: margin, padding과 동일하게 방향별로 선의 종류를 지정할 수 있다.

속성값

none: 선 없음
solid: 실선
dashed: 파선 -------------
dotted: 점선 ..................
기타 등등

border-color: 선 색상

단축 속성: 방향별로 선의 색상 지정 가능

속성값

여러 색상
transparent: 투명 - ? margin과 비슷할 듯?

border-방향-속성

요소의 각 방향마다 개별 테두리 스타일 적용 가능

ex)

border-top: 두께 종류 색상
border-left-width: 두께;
border-right-style: 종류;
border-bottom-color: 색상;

색상의 표현

색상 이름: red, tomato, royalblue, ...
- 브라우저에서 제공하는 색상으로 브라우저마다 색상이 달라 사용 지양
Hex 색상 코드: 16진수 색상(Hexadecimal Colors) / #000, #FFFFFF, ...
- 권장
RGB: r, g, b 삼원색으로 표현 / rgb(128, 0, 255), ...
RGBA: r, g, b + 투명도 / rgba(128, 0, 255, 0.5), ...
- 0 <= 투명도 <= 1.
기타: HSL, HSLA, ...

border-radius: 꼭지점 깎기

요소 모서리를 둥굴게 깎아낸다.

속성값
단위: px, em, vw 등

0: 깎아내지 않음. 단위 없이 표기 권장 / 기본값

border-radius: 10px;
반지름 10px인 원을 요소의 두 모서리에 밀착시킨 후 원의 테두리를 따라 요소를 깎아낸다.
정사각형 요소의 경우, 요소 크기값의 절반을 입력하면 원이 된다.

단축 속성

border-radius: 모든꼭지점속성값;
border-radius: 좌상값 우상값 우하값 좌하값;: 좌상부터 시계방향

/* css */
div {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  border-radius: 10px 20px 30px 40px;
}

box-sizing: 요소 가로세로 너비값 기준 설정

요소의 크기 계산 기준을 지정한다.

속성값

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

<!-- html -->
<div>hello</div>
<div>hello</div>

/* css */
div {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  color: white;
  border: 4px solid orange;
  padding: 20px;
}
div:first-child {
  box-sizing: content-box;
}
div:nth-child(2) {
  box-sizing: border-box;
}

윗박스 box-sizing: content-box;

요소 내용 크기 = (width, height)
요소 자체의 크기 = (width, height) + border + padding

아랫박스 box-sizing: border-box;

요소 내용 크기 + border + padding = (width, height)
요소 자체의 크기 = (width, height)

overflow: 넘친 내용 제어

요소의 크기보다 내용이 많아 넘칠때, 넘치는 내용을 어떻게 보여줄지 제어하는 단축 속성

속성값

visible: 넘친 내용 그대로 출력 / 기본값
hidden: 넘친 내용을 잘라냄
scroll: 넘친 내용만큼 잘라냄 + 넘침 여부에 관계없이 스크롤바 생성
auto: 넘친 내용일 있을 경우에만 잘라내고 넘친 축에만 스크롤바 생성

<div class="parent">
  <div class="child">
    <div class="text">&lt;--overflow--&gt;</div>
  </div>
</div>

.parent {
  width: 200px;
  height: 150px;
  background-color: green;
  margin: 20px;
  overflow: visible;
}
.child {
  width: 300px;
  height: 100px;
  background-color: black;
}
.text {
  color: white;
  padding: 84px 0 0 200px;
}

?: 21/09/28 - overflow: scroll;이어도 넘치는 내용이 없으면 스크롤바 생성되지 않음 (우분투 / 웨일 브라우저)

단축 속성

overflow: xy축값;
overflow: x축값 y축값;

개별 속성
가로, 세로 축별로 overflow 설정

overflow-x
overflow-y

display: 요소 출력 형식 제어

요소마다 어떤 형식으로 화면에 출력할지 설정 - block, inline, inline-block, ...

속성값

block: 상자 요소 / div 등의 기본값
inline: 글자 요소 / span 등의 기본값
inline-block: 글자이되 상자 특성을 더함. (가로세로너비 지정 가능)
flex: 플렉스 박스 - 1차원 레이아웃(가로든 세로든 한 축으로 정렬)
grid: 그리드 - 2차원 레이아웃
none: 출력 특성이 없다 = 출력 안함
기타 - table, table-row, table-cell, ...

<span>Hello world!</span>

span {
  width: 120px;
  height: 30px;
  background-color: royalblue;
  color: white;
  display: block;
}

span 요소의 가로, 세로 너비가 요소 내용에 맞춰지지 않고 지정한 크기대로 설정됨

opacity: 투명도

요소의 투명도

속성값

0~1
- 1: 불투명 / 기본값
- 0: 완전 투명

글꼴

font-style: 글자 기울기

속성값

normal: 기울기 없음 / 기본값
italic: 이텔릭체

font-weight: 글자 두께

속성값

100~900, 100단위로 9개 값
* normal, 400: 기본값
- bold, 700: 두껍게
- bolder: 부모보다 두껍게
- lighter: 부모보다 얇게

font-size: 글자 크기

속성값

16px: 기본값
%, smaller 등의 상대값 키워드가 있지만 모호하므로 지양

line-height: 한 줄의 높이

속성값

normal, 1: 브라우저 기본 정의 / 기본값
단위 없이 수만 입력 - 배수: 요소 글꼴 크기의 배수 ex) 1.4 ➡ 글꼴 크기의 1.4배
px 등의 단위도 가능하지만 배수 권장

지정한 높이의 중간에 줄이 정렬된다.

p {
  ...
  font-size: 16px;
  font-height: 2;
}

font-size의 두배인 32px의 줄 높이를 가지고 세로축 정 가운데에 줄이 위치

font-family: 글꼴 지정

속성값

형식: font-family: 글꼴1, "글-꼴-2", "글 꼴 3", ..., 글꼴계열;
- "글꼴 계열" 필수!
- "글-꼴-2", "글 꼴 3": 특수문자, 공백 포함한 글꼴명은 큰 따옴표로 묶음.
- 글꼴1부터 차례로 사용할 수 있는 글꼴 탐색
- 하나도 사용할 수 있는 글꼴이 없다면 글꼴 계열에서 폰트 하나 뽑아쓴다.
속성값
- serif: 바탕체 계열
- sans-serif: 고딕체 계열 / 깔끔
- monospace: 고정 너비 계열 / 코딩
- cursive: 필기체 계열
- fantasy: 장식 글꼴 계열
- 기타 등등

문자

color: 글자 색상

속성값

위의 색상 표현 참고
기본값 - rgb(0, 0, 0): 검정색

text-aling: 문자 정렬

속성값

left: 왼쪽 / 기본값
right, center, justify(양쪽정렬)

text-decoration: 문자에 선 추가

속성값

none: 장식 없음 / 기본값 (단, a 태그는 제외)
underline: 밑줄 / a 태그의 기본값
overline: 윗줄
line-through: 중앙 선

text-indent: 들여쓰기, 내어쓰기

속성값

속성값
- 실수값: 양수면 들여쓰기, 음수면 내어쓰기. 기본값은 0
단위 - px, em, rem 등

배경

background-color: 배경 색상

속성값

transparent: 투명 / 기본값
기타 색상 표현

background-image: 이미지를 배경으로 설정

속성값

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

background-repeat: 배경 이미지의 반복 제어

속성값

repeat: 바둑판식(반복) 배열 / 기본값
repeat-x / repeat-y: 각 축에만 이미지 반복 배열
no-repeat: 반복 안함

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

속성값
요소 좌측 상단이 기본 위치

방향: top, bottom, left, right, center
단위: 요소 좌측 상단을 원점으로하여 배경 이미지 배치

background-position: left;
background-position: bottom 10px right 20px;
background-position: 25px 75px;

단축속성

background-position: center;
background-position: x속성값 y속성값;

background-size: 배경 이미지 크기

속성값

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

단축속성

background-size: x크기;: 비율 유지한채로 가로를 입력값에 맞춤
background-size: x크기 y크기;

background-attachment: 배경 이미지 스크롤 특성

속성값

scroll: 배경 이미지가 요소에 고정, 스크롤시에 요소를 따라 함께 이동.
fixed: 배경 이미지가 뷰포트에 고정, 스크롤시에 요소를 따라 이동하지 않음.

배치

position: 요소 위치 설정의 기준

속성값

static: 기준 없음 / 기본값
relative: 요소 자신 기준
absolute: "위치 상(?)" 부모 요소 기준
fixed: 뷰포트 기준
sticky: 스크롤 영역 기준

속성값 - relative
원래 요소의 위치를 기준으로하여 요소 배치

속성값 - absolute
위치 상 부모 요소를 기준으로 요소 배치
(위치 상 부모요소?: position의 속성값이 static(기본값)이 아닌 가장 가까운 조상 요소)

다른 형제 요소들과 상호작용할 필요가 없어져 다른 요소들의 위치에 영향을 주지 않아 구조가 무너진다.

2번 박스와 가장 가까우면서 position 속성값이 static이 아닌 조상요소는 A요소. 그러므로 A요소가 위치 상 부모요소가 되며 A요소를 기준으로하여 2번 박스가 배치된다. 그리고 2번 박스가 다른 형제 요소들과 상호작용을 하지 않게되며 3번 박스가 1번 박스와 붙게된다.
A요소의 postion값이 static이므로 위치 상 부모 요소는 B요소가 되어 2번 박스는 B요소를 기준으로 하여 배치된다.

속성값 - fixed
뷰포트를 기준으로 요소 배치
absolute와 마찬가지로 다른 형제 요소들과 상호작용하지 않게된다.
스크롤 이동에 관계없이 위치가 고정된다.

relative는 실제로 사용하기보다는 부모 요소에 position 속성을 선언하기에 적당하다.
absolute, fixed의 경우 다른 요소들과 상호작용을 하지 않게되며 구조가 무너지게된다. 구조상의 부모 요소를 위치 상의 부모 요소로 만들때도 absolute, fixed 값을 사용하면 구조가 무너지게 될 수 있다. 따라서 relative 속성값을 부여하는게 무난하다.

position 속성값이 absolute 또는 fixed인 요소는 display 속성값이 block으로 변경된다.

<!-- html -->
<span>123</span>

span {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  color: white;
  font-size: 40px;
  position: absolute;
}

인라인 요소인 span 요소가 width, height 속성값이 적용됨 = block 요소로 출력되었다.

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

position과 함께 사용되는 속성

속성값

auto: 브라우저가 계산 / 기본값
단위: 직접 위치 지정

ex) left: 20px;: "왼쪽에서부터" 20px 이동 = 오른쪽으로 20px 이동

요소 쌓임 순서, Stack order

어떤 요소가 더 위에 위치할지 판단하는 기준

요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본값 static 제외)
1번 기준에서 같을 경우 z-index 속성의 값이 높을수록 위에 쌓임.
2번 기준에서도 같을 경우 HTML의 다음 구조일 수록 위에 쌓임.

ex) 겹쳐진 두 요소가 모두 position 속성이 선언되었다면 z-index가 높은 요소가 위에 위치한다.
ex) 겹쳐진 두 요소 중 첫번째 요소만 position 속성이 선언되었다면 position 속성이 없는 두번째 요소는 첫번째 요소보다 z-index 속성값이 높던, html에서 나중에 선언되었던 첫번째 요소의 위에 위치할 수 없다.
ex) 겹쳐진 두 요소 모두 postion 속성값이 선언되지 않았다면 z-index 속성값을 html 구조상의 순서를 따진다. z-index 속성값도 같은 경우 html 구조상의 순서를 따진다.

z-index: 요소의 쌓임 정도 지정

속성값

auto: 부모 요소와 동일한 쌓임 정도 / 기본값
수: 높은 수일수록 위에 쌓임. 음수도 가능하지만 -1 정도만 사용.

플렉스(정렬)

1차원 레이아웃 - 수직, 수평

Flex Container & Flex Item

display: flex;
display 속성값이 flex인 요소를 flex container
flex container의 자식 요소들은 flex item

아래에서 FC는 container에 선언하는 속성, FI는 Item에 선언하는 속성임을 표시

FC / display - 2

속성값

flex: 블록 요소 특성 부여 + flex container 정의
inline-flex: 인라인 요소 특성 부여 + flex container 정의

<!-- html -->
<span>1</span>
<span>2</span>
<span>3</span>

/* css */
span {
  background-color: greenyellow;
  display: flex;
  margin: 4px;
}

span 요소지만 display: flex;: 블록 요소 특성 획득, 세로로 배치됨

<!-- html -->
<div>hahaha</div>
<div>hohoho</div>
<div>hehehe</div>

/* css */
div {
  background-color: royalblue;
  border: 4px solid green;
  display: inline-flex;
}

div 요소지만 display: inline-flex;: 인라인 요소 특성, 가로로 배치됨.

FC / flex-direction: 정렬의 축을 설정

속성값
flex container에 선언. flex item 정렬 축, 순서 정의

row: 행. 좌에서 우 / 기본값
row-reverse: 행. 우에서 좌
column: 열. 위에서 아래
column-reverse: 열. 아래에서 위

flex-direction: row;

✅ flex는 주로 수평 정렬에 사용된다.

FC / flex-wrap: flex items 묶음(줄바꿈) 여부

속성값

nowrap: 묶음 없음 / 기본값
wrap: 여러줄로 묶음
wrap-reverse: wrap의 반대 방향으로 묶음

속성값 nowrap / 기본값

.container {
  width: 400px;
  height: 200px;
  background-color: royalblue;
  display: flex;
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: greenyellow;
  border: 4px dashed green;
}

한줄에 모두 표현하여 width, height가 100px인 박스들이 찌그러짐

속성값 wrap
한줄에 표현할 때 부모 요소를 벗어나는 요소가 생기면 줄바꿈

FC / justify-content: 주 축의 item 정렬 방법

속성값
예제 이미지는 flex-direction: row; 기준

flex-start: flex items를 시작점에서부터 배치 시작 / 기본값
flex-end: flex items를 끝점에서부터 배치 시작
center: flex items 가운데 정렬
space-between: flex items 사이를 균일하게 정렬
space-around: flex items의 외부 여백을 균일하게 정렬
- 양 끝의 여백은 item들 사이 공간의 절반?

FC / align-content: 교차 축의 여러 행 정렬 방법

속성값

stretch: flex items를 시작점에서부터 배치 시작. 행의 높이를 늘린다. / 기본값
- flex item의 height를 지정하지 않으면 늘어나버린다.
flex-start, center, space-between, space-around
- flex-start: stretch와는 다르게 heigth를 지정하지 않아도 늘어나지 않는다.
- flex-end

FC / align-items: 교차 축의 각 행의 item 정렬 방법

속성값

stretch: flex items를 교차 축으로 늘림 / 기본값
- align-content: stretch;와 동일
flex-start, flex-end, center
baseline: flex items를 각 의 문자 기준선에 정렬

행의 높이는 동일하고 각 행 내에서의 item의 정렬에 관여한다.

여러 줄을 제어할때는 align-content, 한 줄을 제어할때는 align-items 사용

한 줄 내에서 주 축 배치: justify-content / 교차 축 배치: aling-items

.container {
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}

FI / order: flex item의 정렬 순서

속성값

0: 순서 없음 / 기본값
수: 낮은 수일수록 우선 배치

html의 요소 순서를 바꾸지 않고도 요소의 배치 순서를 변경할 수 있다.

FI / flex-grow: flex item이 여백을 차지하는 비의 항

속성값

0: 증가 없음 / 기본값
수: 여백을 차지하는 비의 항

flex item 배치 후 남은 공간을 각 item들이 flex-grow값에 비례하여 나눠 갖는다.
item 가로 너비 50px
3개를 배치하면 남는 공간은 가로 150px
남은 공간 150px을 각 item의 flex-grow값에 비례해서 나눠 갖는다.
0 : 1 : 14 = 0px : 10px : 140px / 총합 150px
최종적인 item들의 가로 너비는 50px, 60px, 190px이 된다.

FI / flex-shrink: flex item이 내놓는 공간의 비의 항

속성값

1: flex container 너비에 따라 감소 비율 적용 / 기본값
수: 감소 비율. 0이면 item 크기가 변하지 않는다.

공간이 부족하여 flex item이 작아져야할때 각 item들은 flex-shrink값에 비례하여 크기를 감소시킨다.
item 가로 너비 100px
3개를 배치하면 300px이 필요. 하지만 container의 가로 너비는 200px
각 item이 flex-shrink값에 비례하여 너비를 감소시켜 부족한 100px을 상쇄시킨다.
2 : 3 : 5 = 20px : 30px : 50px / 총합 100px
각 item은 20px, 30px, 50px 만큼 너비를 줄여야한다.
최종적인 item들의 가로 너비는 80px, 70px, 50px이 된다.

FI / flex-basis: item 공간 배분 전 기본 너비

flex container의 여백 분배시에 item 자체의 크기를 특정한 값으로 덮어씌울 수 있다.

속성값

auto: 요소의 내용 너비
단위: px, em, rem 등

예제

flex-basis: auto;: item의 크기 = 요소 내용의 크기 또는 지정한 크기
- 400px을 1:2:2 = 80:160:160씩 나눠가짐
- border 속성 사용 유무에 따라 결과 달라짐: box-sizing 속성값에 따라서 요소 내용의 크기가 달라지거나 테두리를 포함한 요소 자체의 크기가 달라지므로.
flex-basis: 0;
- 여백을 계산할때 item의 크기가 0으로 취급됨
- item 너비가 0이므로 600px 그대로 flex-grow값에 비례하여 item에 분배된다. 따라서 flex-grow값의 비와 요소 크기의 비가 같다.
flex-basis: 100px;
- item의 크기가 어떻던간에 100px로 취급한다.
- 300px을 1:2:2 = 60:120:120씩 나눠가지므로 item들의 크기는 100+60, 100+120, 100+120 (px)

전환

요소가 가상 클래스를 통해 전상태와 후상태를 오고갈때 자연스럽게 변화하도록 하는 효과

transition: 요소의 전환 효과를 지정하는 단축 속성

transition: 속성명 지속시간 타이밍함수 대기시간;: 지속시간 필수

div {
  width: 100px;
  height: 100px;
  background-color: royalblue;
  transition:
    width 10s, /* 여러 속성에 다른 전환 효과 부여 가능 */
    height 5s,
    background-color 2s;
}

개별속성

transition-property
transition-duration
transition-timing-function
transition-delay

transition-property: 전환 효과를 사용할 속성 이름 지정

속성값

all: 모든 속성에 사용 / 기본값
속성이름: 특정 속성에만 사용
- trainsition-property: width;: 가로너비의 변화에만 전환 효과가 적용됨.

transition-duration: 전환 효과의 지속시간

속성값

0s: 전환 효과 없음 / 기본값
시간

transition-timing-function: 전환 효과의 타이밍(Easing) 함수 지정
easing 함수: 시간에 따른 전환의 진행 정도를 표현하는 함수

속성값

ease: 느리게-빠르게-느리게 / 기본값
linear: 일정
ease-in: 느리게-빠르게
ease-out: 빠르게-느리게
ease-in-out: 느리게-빠르게-느리게
cubic-bezier(n,n,n,n): 사용자 정의
steps(n): n번 분할된 애니메이션

transition-delay: 전환 효과 시작까지 대기시간 지정

속성값

0s: 대기시간 없음 / 기본값
시간

transition: 1s .5s;: 전환 효과가 1초동안 지속되고 0.5초의 delay를 가진다.

변환

transform: 요소의 변환을 정의

transform: 변환함수1 변홤하수2 변환함수3 ... ;
transform: 원근법 이동 크기 회전 기울임;

변환함수

2D 변환함수
- translate(x, y): 이동 / px 단위
  - translateX, translateY
- scale(multiple): 크기 변경 / 배수
  - scale(x, y)
  - scaleX, scaleY
- rotate(degree): 회전 / 각도(deg)
- skewX(x), skewY(y): 기울임 / 각도(deg)
  - skew(x, y)
- matrix(n, n, n, n, n, n): 2차원 변환 효과 / 위의 함수들은 matrix의 여러 경우들
3D 변환함수
- perspective(n): 원근법
- translate3d(x, y, z), translateZ(z): 3d 이동
- scale3d(x, y, z), scaleZ(z): 크기
- rotate3d(x, y, z, a), rotateX(x), rotateY(y), rotateZ(z): 회전 (축 회전)
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

rotate, rotateX, rotateY

rotate(deg): 요소 중심을 축으로하여 회전
rotateX(deg) / rotateY(deg): X축 / Y축을 중심으로 회전. 원근법이 적용되지않은 상태

perspective

transform: perspective(500px) rotateX(45deg);

perspective는 가장 앞에 위치
인수는 요소를 얼마나 먼 거리에서 바라볼 것인지 의미(요소의 중심 기준). 인수가 작을수록 큰 왜곡

skewX, skewY

마주보는 두 모서리를 모서리와 평행하되 서로 반대인 방향으로 밀어버리는 느낌

perspective: 하위 요소를 바라보는 원근 거리 지정

❗transform 속성의 함수가 아니라 속성으로서의 perspective

속성값

단위: px 등 / 원근 거리

perspective 속성 vs perspective 함수

분류 예제 적용 대상 기준점 설정
속성 perspective: 600px; 관찰 대상의 부모 perspective-origin
함수 transform: perspective(600px), ... ; 관찰 대상 transform-origin
기준점 설정 - 요소 변환의 기준점을 설정하는 기능

분류	예제	적용 대상	기준점 설정
속성	`perspective: 600px;`	관찰 대상의 부모	perspective-origin
함수	`transform: perspective(600px), ... ;`	관찰 대상	transform-origin

backface-visibility: 3D 변환된 요소의 뒷면 표시 여부

rotateX, rotateY를 180도 이상 적용했을때 뒷면을 어떻게 처리할지 정의

속성값

visible: 뒷면 표시함 / 기본값
hidden: 뒷면 숨김

다시 공부 중...

인공지능, 개발 공부

이전 포스트

CSS 개요(문법 & 선택자)

다음 포스트

CSS 속성

CSS 속성Properties

무엇을 꾸밀 수 있는가?

박스 모델

width, height

max-width, max-height

min-width, min-height

css 단위

단축 속성?

margin: 외부 여백

속성값

단축 속성 - 넘겨주는 값의 수에 따라 상하좌우 따로 margin 설정이 가능

개별 속성

padding: 내부 여백

속성값

단축 속성 / 개별 속성: margin과 동일

border: 테두리

색상의 표현

border-radius: 꼭지점 깎기

box-sizing: 요소 가로세로 너비값 기준 설정

overflow: 넘친 내용 제어

display: 요소 출력 형식 제어

opacity: 투명도

글꼴

font-style: 글자 기울기

font-weight: 글자 두께

font-size: 글자 크기

line-height: 한 줄의 높이

font-family: 글꼴 지정

문자

color: 글자 색상

text-aling: 문자 정렬

text-decoration: 문자에 선 추가

text-indent: 들여쓰기, 내어쓰기

배경

background-color: 배경 색상

background-image: 이미지를 배경으로 설정

background-repeat: 배경 이미지의 반복 제어

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

background-size: 배경 이미지 크기

background-attachment: 배경 이미지 스크롤 특성

배치

position: 요소 위치 설정의 기준

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

요소 쌓임 순서, Stack order

z-index: 요소의 쌓임 정도 지정

플렉스(정렬)

Flex Container & Flex Item

아래에서 FC는 container에 선언하는 속성, FI는 Item에 선언하는 속성임을 표시

FC / display - 2

FC / flex-direction: 정렬의 축을 설정

FC / flex-wrap: flex items 묶음(줄바꿈) 여부

FC / justify-content: 주 축의 item 정렬 방법

FC / align-content: 교차 축의 여러 행 정렬 방법

FC / align-items: 교차 축의 각 행의 item 정렬 방법

FI / order: flex item의 정렬 순서

FI / flex-grow: flex item이 여백을 차지하는 비의 항

FI / flex-shrink: flex item이 내놓는 공간의 비의 항

FI / flex-basis: item 공간 배분 전 기본 너비

전환

transition: 요소의 전환 효과를 지정하는 단축 속성

변환

transform: 요소의 변환을 정의

perspective: 하위 요소를 바라보는 원근 거리 지정

backface-visibility: 3D 변환된 요소의 뒷면 표시 여부

CSS 개요(문법 & 선택자)

vs code html 작성 단축키

0개의 댓글