[CSS] 속성

J.A.Y·2023년 7월 7일

css

목록 보기

2/2

📕단위

px: 픽셀

%: 상대적 백분율

em: 요소의 글꼴 크기

rem: 루트 요소(html)의 글꼴 크기 / 루트 요소: 최상위 요소 (= html)

vw: 뷰포트 가로 너비의 백분율

vh: 뷰포트 세로 너비의 백분율

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

숫자 0: 외부 여백 없음

auto: 브라우저가 여백을 계산
// 가로 또는 세로 너비가 있는 요소의 가운데 정렬에 활용한다.//

단위: px, em, vw 등 단위로 지정

만일 단위를 %로 쓸 경우(잘 안 쓰임): 부모 요소의 가로 너비에 대한 비율 지정

음수 사용 가능

margin: 10px 20px 30px 40px
--- 📌top . right . bottom . left 📌 ---- 시계방향

{margin: 10px 20px;}
--- 📌top+bottom . left+right 📌

{margin: 10px 20px 30px;}
--- 📌 top . left+right . bottom 📌

margin-방향 : 속성을 개별적으로 적용할 수도 있다.

📘padding (외부 여백): 요소의 내부 여백(공간)을 지정하는 단축 속성

숫자 0: 내부 여백 없음

단위: px, em, vw, % 등 단위로 지정
---📌 % : 부모 요소의 가로 너비에 대한 비율로 지정📌

{padding: 10px; }
📌top+right+bottom+left 📌

{padding: 10px 20px; }
📌top+bottom . left+right 📌

{padding: 10px 20px 30px; }
📌 top . left+right . bottom 📌

{padding: 10px 20px 30px 40px; }
📌top . right . bottom . left 📌

padding-방향

📙 border : 요소의 테두리 선을 지정하는 단축 속성

border: 선-두께 선-종류 선-색상;
📌 border-width . border-style . border-color 📌

border-width:

medium: 중간두께

thin

thick

✨단위: px, em, % 등 단위로 지정 (권장)

border-style:

✨none

✨solid : 실선

dotted: 점선 ........

✨dashed: 파선 -------

double: 두 줄 선

groove: 홈이 파여있는 모양

ridge: 솟은 모양 (groove와 반대)

inset: 요소 전체가 들어간 모양

outset: 요소 전체가 나온 모양

border-color

black

색상

transparent: 투명

색상 표현

색상 이름 : red, tomato, royalblue.... etc (정확성 낮음)

✨aHex 색상코드: 16진수 색상(Hexadecimal Colors) : 📌#000, #FFFFF (권장)

RGB: 빛의 삼원색 📌 rgb(255, 255, 255)

✨RGBA: 빛의 삼원색 + 투명도 📌 반투명 => (0, 0, 0, 0.5)

HSL: 색상, 채도, 명도 📌 hsl (120, 100%, 50%)

border: { 0px 0px 0px 0px;) 같이 갯수와 위치에 따른 방향 지침은 margin, padding과 동일

'border-방향' & 'border-방향-속성' :
[ex] border- bottom, border-bottom-style

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

0: 둥글게 없음 (각진 형태)

단위: px, em, vw 등 단위로 지정

border-radius 단위와 값을 1개, 2개, 3개, 4개로 작성해 네 모서리를 모두 또는 각각 둥글게 만들 수 있다.

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

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

border-box: 요소의 내용 + padding + border로 크기 계산 (쉽게 말해 width, height 값만 적용)

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

visible: 넘친 내용을 그대로 보여준다.

hidden: 넘친 내용을 잘라낸다.

scroll: 넘친 내용을 잘라냄, 스크롤바는 계속 생성

✨auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 (권장)

overflow-축 (x 또는 y)

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

1. 기본값

block: 상자(레이아웃) 요소
🤔인라인 요소인데 block만으로도 가로, 세로 속성 적용가능하긴 하네?

inline: 글자 요소

inline-block: 글자 + 상자 요소 // 글자지만 가로, 세로 속성을 적용할 수 있다. //

2. 따로 지정해서 사용하는 값

flex: 플렉스 박스 (1차원 레이아웃) // 한 축을 사용해서 정렬시키는 것 //

grid: 그리드 (2차원 레이아웃) // 행과 열을 사용해서 정렬시키는 것 //

none: 보여짐 특성 없음, 화면에서 사라짐

기타: table, table-row, table-cell 등

📙 opacity: 요소 투명도 (value: 0~1)

1: 불투명

0: 투명

📕 글꼴 : font-??

font-style: 기울기

font-weight: 두께 (백 단위 100~900)

font-size: 글꼴 크기

line-height: 한 줄의 높이, 행간과 유사
- ✨숫자(배수): 요소의 글꼴 크기의 배수로 지정
- 단위: px, em, rem 등의 단위로 지정
    font-size: 16px;
    line-hieght: 32px;
    /* line-height: 2; */    //felx 등장 전 수직정렬에 유용하게 사용함
    /* line-height: 200%; */
font-family: 글꼴1, "글꼴2",... 글꼴계열;
- 글꼴 : 서체 지정
- "글꼴" : 띄어쓰기 등 특수문자가 포함된 글꼴 이름
- ✨꼴계열(필수작성) : 글꼴 바탕
- 왼쪽에서 오른쪽 순서로 소거식으로 적용 (앞순서의 것이 적용이 되면 뒷순서는 적용X)

📗문자 : color, text-??

color

text-align : 정렬

text-decoration : none, underline, overline, line-through(중앙선)

태그의 자동 줄 생김을 없애고 십을 때 none

text-indent: 들여쓰기(양수), 내어쓰기(음수)

📔배경 : background-??

background-color

background-image

background-size : auto(이미지 실제 크기), 단위(px, em, rem 등), cover(비율 유지, 요소의 더 넓은 너비에 맞춤), contain (비율 유지, 요소의 더 짧은 너비에 맞춤

📌cover vs contain

bactround-repeat : repeat(수평+수직 반복), repeat-x 또는 y, no-repeat

becaground-position : top, bottom, left, right, center, ~px, ~em ....
과제: 패턴 배경 만들어보기

background-attachment : 요소의 배경 이미지 스크롤 특성
- scroll : 이미지가 요소를 따라서 같이 스크롤
- fixed : 이미지가 뷰포트에 고정, 스크롤 X
- local : 요소 내 스크롤 시 이미지가 같이 스크롤

scroll

fixed

📘배치 Position : 요소의 위치 지정 기준

static : 기준 없음

relative : 요소 자신을 기준

absolute : 위치 상 부모 요소를 기준
⭐ 위치 상 부모 요소를 꼭 확인해야 한다.

fixed : 뷰포트를 기준

sticky : 스크롤 영역 기준

top, bottom, left, right, z-index 와 함께 사용 할 수 있다.

모두 음수를 사용할 수 있다.

relative

.container {
	width: 300px;
	height: 300px;
	background-color: royalblue;
}
.container .item {
	border: 4px dashed red;
	background-color: orange;
}
.container .item:nth-child(1) {
	width: 100px;
	height: 100px;
}
.container .item:nth-child(2) {
	width: 140px;
	height: 70px;
	position: relative; 📍
	left: 150px;
	bottom: 10px;
}
.container .item:nth-child(3) {
	width: 70px;
	height: 120px;
}

<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

💡releative로 화면을 배치하게 되면 다음 화면처럼 비정상적으로 배치(여전히 item3가 item 2의 원래 있던 자리 다음에 쌓여 있는 모습)되기 때문에 실제로는 relative를 이용해 배치하는 일은 드물다고 한다.

absolute

> .container {
	width: 300px;
	height: 300px;
	background-color: royalblue;
	position: relative; 📍
}
.container .item {
	border: 4px dashed red;
	background-color: orange;
}
.container .item:nth-child(1) {
	width: 100px;
	height: 100px;
}
.container .item:nth-child(2) {
	width: 140px;
	height: 70px;
	position: absolute; 📍
	right: 30px;
	top: 30px;
}
.container .item:nth-child(3) {
	width: 70px;
	height: 120px;
}

<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

💡만약 부모 요소인 container에 position: relative을 추가해주지 않으면, 뷰포트가 위치 기준이 되기 때문에 결과가 지금과 다르게 출력된다.

💡요소의 쌓임 순서 (stack order) :

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓여있는지)에 따라 결정된다.

(1) 요소에 position 속성의 값이 있는 경우 위에 쌓인다. (기본값 static 제외)
(2) 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓인다.
z-index : 요소의 쌓임 정도를 지정
- auto : 부모 요와 동일한 쌓임 정도
- ✨숫자 : 숫자가 높을 수록 위에 쌓임
(3) 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록(나중에 출력되는 것일수록) 위에 쌓인다.

부모 요소 대신 조부모 요소에 relative를 주면 그 기준은 조부모가 된다. 그리고 둘다 static이면 위치 기준은 뷰포트로 변경된다.

.whole {
	width: 400px;
	height: 400px;
	background-color: #BA80C9;
	position: relative;
}
.container {
	width: 300px;
	height: 300px;
	background-color: royalblue;
	position: static;
}
.container .item {
	border: 4px dashed red;
	background-color: orange;
}
.container .item:nth-child(1) {
	width: 100px;
	height: 100px;
}
.container .item:nth-child(2) {
	width: 140px;
	height: 70px;
	position: absolute;
	right: 30px;
	top: 30px;
}
.container .item:nth-child(3) {
	width: 70px;
	height: 120px;
}

<div class="whole">
	<div class="container">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>

💡 Position속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경된다. 이러한 특징 때문에, span태그 처럼 inline 요소들에 position: absolute 또는 fixed의 속성을 입력하면 display가 block 처리되면서 높이와 가로의 속성 또한 적용이 가능해진다.

📕플렉스 (정렬) Container : 1차원 레이아웃

Flex는 block 속성을 띤다.
Flex Container = 부모
Flex Items = 자식

💡Felx Container에 부여할 수 있는 속성:

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

flex : 블록 요소와 같이 Flex Container 정의

inline-flex : 인라인 요소와 같이 Felx Container 정의

flex-direction : 주 축을 설정

row : 행 축 (좌 ➡ 우)

row-reverse : 행 축 (우 ➡ 좌)

column : 열 축 (위 ➡ 아래)

column-reverse : 열 축 (아래 ➡ 위>)

💡💡수평 정렬할 때 유용한 속성들:

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

nowrap : 묶음 (줄 바꿈) 없음

wrap : 여러 줄로 묶음

wrap-reverse : wrap의 반대 방향으로 묶음

justify-content : 주 축의 정렬 방법

flex-start : Flex Items를 시작점으로 정렬

flex-end : Flex Items를 끝점으로 정렬

center : Flex Items를 가운데 정렬

space-between : 각 Flex Items 사이를 균등하게 정렬

space-around : 각 Flex Items의 외부 여백을 균등하게 정렬

align-content : 교차 축의 여러 줄 정렬 방법(보통 수평정렬할 때 수직 축 정렬 용으로 사용, align-item도 마찬가지, 한 줄 정렬할 때보다 조건을 맞추기가 까다로운 편이다. )

stretch(기본값): Flex Items를 시작점으로 정렬 ('늘리다'의 뜻처럼 height 속성을 별도로 부여하지 않으면 줄의 높이만큼 늘어난다.)

flex-start: Flex Items를 시작점으로 정렬

flex-end : Flex Items를 끝점으로 정렬

center : Flex Items를 가운데 정렬

space-between: 각 Flex Items 사이를 균등하게 정렬

space-around: 각 Flex Items의 외부 여백을 균등하게 정렬

align-items : 교차 축의 한 줄 정렬 방법 (한 줄일 때 content 대신 사용한다.)

stretch(기본값) : Flex Items를 교차 축으로 늘림

flex-start : Flex Items를 각 줄의 시작점으로 정렬

flex-end : Flex Items를 각 줄의 끝점으로 정렬

center : Flex Items.를 각 줄의 가운데 정렬

baseline : Flex Items를 각 줄의 문자 기준선에 정렬

💡Felx Items에 부여할 수 있는 속성:

order : Flex Item의 순서

0 : (기본값) 순서 없음

숫자 : 숫자가 작을 수록 순서가 앞임 (음수 사용 가능)

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

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

숫자 : 증가 비율
(flex-grow로 Container의 빈 공간 없이 item을 정렬 할 수 있다.)

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

1 : (기본값) Flex Container 너비에 따라 감소 비율 적용

숫자 : 감소 비율

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

auto : (기본값) 요소의 Content 너비

단위 : px, em, rem 등 단위로 지정

🌟auto로 되어 있으면 기본 너비(=각 글자의 너비) + 증가 너비(=1)로 되어 있어서 각 item들의 너비 비율이 맞지 않는다.
🌟따라서 각 글자의 너비를 빼기 위해 flex-basis의 값을 0으로 할 수 있다.

📙전환 Transition : 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성

📍with. 가상 선택자 (hover, active, focus)
📍transition: 속성명 지속시간 (단축형으로 작성할 때, 필수 포함 속성) 타이밍함수 대기시간;

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

all : 모든 속성에 적용

속성 이름: 전환 효과를 사용할 속성 이름 명시

transition-duration(지속 시간) : 전환 효과의 지속시간을 지정 (초단위가 일반적, 소수도 가능)
div {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: width 1s; 
  /* transition: all 1s */
  /* transition: width .5s, background-color .5s; */
transition-timing-function(타이밍 함수) : 전환 효과의 타이밍(Easing) 함수를 지정

ease : (기본값) 느리게➡빠르게➡느리게 = cubic-bezier(0.24, 0.1, 0.25, 1)

linear : 일정하게 = cubic-bezier(0, 0, 1, 1)

ease-in : 느리게 ➡ 빠르게 = cubic-bezier(0.42, 0, 1, 1)

ease-out : 빠르게 ➡ 느리게 = cubic-bezier(0, 0, 0.58, 1)

ease-in-out : 느리게 ➡ 빠르게 ➡ 느리게 = cubic-bezier(0.42, 0, 0.58, 1)

cubic-bezier(n,n,n,n) : 자신만의 값을 정의 (0~1)

steps(n) : n번 분할된 애니메이션

🌟구글에'easing function'을 검색하면 더 많은 함수들을 찾아볼 수 있다.

transition-delay(대기 시간) : 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

📗변환 Transform: ~ ( )

translate (=이동) : x, y축을 기준으로 몇 만큼 이동한다.

scale (=크기) : (숫자)만큼 크기를 줄이거나 늘린다.

rotate (=회전) :

2D: rotate(~deg)

3D: rotateX(~deg) / rotateY(~deg) 📍단, 원근법과 같이 사용해야 3D 효과를 관찰할 수 있음

⭐함수⭐perspective (=원근법) : persepective(거리+단위)

📍원근법 함수는 제일 앞에 작성해야 한다. ➡ transform: perspective(500px) rotateX(45deg);

skew (=기울기) : X, Y축을 기준으로 각도 몇 만큼 이동한다.