CSS 속성 정리

border

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

 

[선의 종류]

• solid : 실선
• dotted : 점선 ( . . . )
• dashed : 파선 ( - - - )
• double : 두 줄 선
• groove : 홈이 파여있는 모양
• ridge : 솟은 모양 (groove의 반대)
• inset : 요소 전체가 들어간 모양
• outset : 요소 전체가 나온 모양

 

 

 

box-sizing

box-sizing는 요소의 크기를 계산하는 기준을 지정할 때 사용됩니다.

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

 

* width 100px, border 4px, padding 20px 일 때

content-box의 경우 실제 width는 144px, border-box의 경우 width는 100px입니다.

 

 

 

box-shadow

box-shadow : x y blur spread 그림자색상

 

 

 

 

overflow

overflow는 요소의 크기 이상으로 내용이 넘쳤을 때, 보임을 제어할 때 사용됩니다.

• visible : 넘친 내용을 그대로 보여줌 (기본값)
• hidden : 넘친 내용을 잘라냄
• scroll : 넘친 내용을 잘라내고 스크롤바 생성 (넘친 내용이 가로 / 세로 구분 없이 스크롤바 가로 / 세로 생성하며 넘치지 않아도 스크롤바 생성)
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 (넘친 내용에 따라 스크롤바 가로 / 세로 생성)

 

요소의 크기 이상으로 내용이 넘쳤을 때, 보임을 제어하는 다음과 같은 개별 속성들이 있습니다.

 

[overflow-x] 

• x 축으로 넘치는 내용만 체크

[overflow-x]

• y 축으로 넘치는 내용만 체크

 

 

 

display

display는 요소가 화면에 출력되는 특성을 제어할 수 있습니다.

 

[block] - 각 요소에 이미 기본값으로 지정

• 레이아웃을 구성하기 위해 사용

[inline] - 각 요소에 이미 기본값으로 지정

• 글자를 구성하기 위해 사용 (가로 / 세로 사이즈 지정 불가능)

[inline-block] - 각 요소에 이미 기본값으로 지정

• 글자 + 레이아웃을 구성하기 위해 사용

[flex]

• 1차원 레이아웃 (x 축이나 y축 중 하나의 축을 기준으로 수평 정렬에 용이)

[grid]

• 2차원 레이아웃 (x축과 y축을 기준으로 정렬)

[none]

• 보임 특성을 없앰

기타

• table, table-row, table-cell 등

 

 

 

opacity

요소의 투명도를 제어할 수 있습니다. (기본값 1 : 불투명, 0~1 사이의 소수 값 지정 가능)

 

 

 

글꼴 관련 속성

[font-sytle]

• 글자의 기울기 (기본값 : normal, italic : 이탤릭체 - 기울어진 글자)

 

 

줄바꿈 관련 속성

[word-break] - 텍스트가 자신의 콘텐츠 박스 밖으로 넘칠 경우 줄 바꿈을 제어할 수 있습니다.

• normal : 영어 단위의 줄바꿈(한글 적용 안됨, 기본값)
• break-all : 넘침을 방지하기 위해서 단어 안에서 줄바꿈(CJK 텍스트 제외)
• keep-all : 단어 단위의 줄바꿈(CJK 텍스트)

 

 

문자 관련 속성

[text-decoration] - 문자의 장식을 제어할 수 있습니다.

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

[text-indent] - 문자의 첫 줄 들여 쓰기 / 내어 쓰기를 제어할 수 있습니다.

• 양수와 음수로 값을 전달할 수 있으며, 양수의 경우 들여 쓰기, 음수의 경우 내어 쓰기

 

 

 

배경 관련 속성

[background-image] - 요소에 배경 이미지를 삽입할 수 있습니다.

• url("경로")로 이미지의 경로 명시
• 배경 색은 이미지 뒤에 출력

[background-repeat] - 요소에 배경 이미지의 반복을 제어할 수 있습니다.

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

[background-position] - 요소에 배경 이미지의 위치를 제어할 수 있습니다.

• 방향 : top, bottom, left, right, center (중복 사용 가능 ex. background-position : top right;)
• 단위 : 100px 30px (x축 왼쪽에서 100px 위치 + y축 위에서 30px 위치)

[background-size] - 요소에 배경 이미지의 크기를 제어할 수 있습니다.

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

[background-attachment] - 요소에 배경 이미지의 스크롤 특성을 제어할 수 있습니다.

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

 

*background의 경우 웹 접근성을 고려하여 해당 요소에 이미지가 무엇을 나타내는지 알려주어야 합니다.

때문에 text-indent : -9999px을 사용하여 해당 요소에 이미지가 무엇을 나타내는지의 문구를 들여쓰기 해주어 명시적으로 나타내주어야합니다.

 

 

블러처리

• backdrop-filter : blur(10px) : 요소의 배경을 블러 처리합니다.
• filter : blur(10px) : 요소 자체를 블러 처리합니다.

 

 

position

• sticky : 스크롤과 밀접한 관계가 있으며, 부모 요소 안에서만 적용됩니다.

 

 

 

요소 쌓임 순서

어떤 요소가 더 위에 쌓이는지는 다음과 같은 기준으로 결정됩니다.

1. 요소에 position 속성에 값이 있는 경우 위에 쌓입니다. (position의 기본값인 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을수록 위에 쌓입니다.
3. 1번과 2번 조건까지 같은 경우 HTML의 다음 구조일수록 위에 쌓입니다. (나중에 작성한 요소가 위에 쌓임)

 

 

inset

top, botton, left, right 단축 속성입니다.

 

inset : 1rem 2rem 3rem 0

 

위의 예시는 top : 1rem / right : 2rem / bottom : 3rem / left : 0 을 의미합니다.

 

inset : 0px

 

위의 예시는 top : 0px / right : 0px / bottom : 0px / left : 0px  의미합니다.

 

 

 

flex

• flex를 사용하면 Flex Container(부모 요소 : flex를 사용한 요소)의 Flex Items(자식 요소 : flex를 사용한 요소의 자식 요소)가 만들어집니다.

*display : flex의 경우 block 요소의 특징을 가지며, 인라인 요소와 같은 특징을 가지기 위해서는 inline-flex를 사용해주어야 합니다.

 

[Flex Container CSS 속성]

• flex-direction : row(좌 > 우)가 기본값이며, 다른 값으로 row-reverse(우 > 좌), column(위 > 아래), column-reverse(아래 > 위)가 있습니다.
• flex-wrap : Flex Items의 줄 바꿈 여부를 결정하는 속성으로 nowrap(줄 바꿈 없음)이 기본값이며, 다른 값으로 wrap(여러 줄로 묶음), wrap-reverse(wrap의 반대 방향으로 묶음)가 있습니다.
• justify-content : 주 축(flex-direction으로 설정)을 기준으로 정렬 방법을 결정하는 속성으로 flex-start(Flex Items를 시작점을 기준으로 정렬)이 기본값이며, 다른 값으로 flex-end(끝점 기준 정령), center(가운데 정렬), space-between (Flex item의 사이 공간 간을 균등하게 설정하여 정렬), space-around(Flex item의 외부 여백을 균등하게 정렬)가 있습니다.
• align-content : 교차 축의 여러 줄 정렬 밥법을 결정하는 속성으로 stretch(시작점 기준 정렬)이 기본값이며, 다른 값으로 flex-start(시작점 기준 정렬), flex-end(끝 점 기준 정렬), center(가운데 정렬), space-between (Flex item의 사이 공간 간을 균등하게 설정하여 정렬), space-around(Flex item의 외부 여백을 균등하게 정렬)가 있습니다.
• align-items : 교차 축의 한 줄 정렬 방법을 결정하는 속성으로 stretch(Flex Items를 교차 축으로 늘림)가 기본값이며, 다른 값으로  flex-start(Flex Items를 각 줄의 시작점으로 정렬), flex-end(Flex Items를 각 줄의 끝점으로 정렬), center(Flex Items를 각 줄의 가운데 정렬), baseline(Flex Items를 각 줄의 문자 기준선에 정렬)이 있습니다.

*Flex Items의 height의 값이 auto이면 Flex Container의 height의 값에 맞게 늘어납니다.

*align-content 속성은  2줄 이상으로 이루어진 경우에만 사용이 가능합니다.

*교차 축 정렬 시 많은 경우 한 줄이기 때문에 align-content 보다 align-items를 사용하여 정렬합니다.

 

[Flex Items CSS 속성]

• order : Flex Items의 순서를 결정하는 속성으로 0(순서 없음)이 기본값이며, 다른 숫자 값을 설정할 수 있고 숫자가 작을수록 앞으로 나옵니다.
• flex 
• flex-grow : Flex Items의 너비 증가 비율을 설정하는 속성으로 0(증가 비율 없음)이 기본값이며, 다른 숫자 값을 설정할 수 있고 해당 숫자는 증가 비율을 나타냅니다.
• flex-shrink : Flex Items의 너비 감소 비율을 설정하는 속성으로 1(Flex Container 너비에 따라 감소 비율 적용)이 기본값이며 다른 숫자 값을 설정할 수 있고 해당 숫자는 감소 비율을 나타냅니다. (0의 경우 감소하지 않음)
• flex-basis : Flex Item의 공간 배분 전 기본 너비를 설정하는 속성으로 auto(요소의 Content 너비)가 기본값입니다. (값으로 0을 설정하게 되면 Content 너비를 0으로 설정하여 공간 배분이 가능합니다.)
• align-self 

 

 

grid

 

• repeat

grid-template-columns: repeat(5, 10px)

위의 예시는 가로 10px 요소 5개를 나열 나열합니다. (나머지 여분의 공간은 비어있습니다.)

 

• fr : fraction / 1fr은 사용 가능한 공간의 1 부분을 의미합니다. (사용 가능한 공간에 대한 비율)

grid-template-columns: repeat(5, 1fr)

예를 들어 500px 공간에서 요소 5개를 나열하면 1fr, 즉 사용가능한 공간의 1은 100px에 해당합니다. 

 

grid-template-columns: 300px 10% 1fr 1fr

위의 예시는 첫 번째 요소의 경우 300px 크기, 두 번째 요소의 경우 전체 크기의 10%에 해당하는 크기, 세 번째 / 네 번째의 경우 남은 공간의 1 부분씩의 크기의 요소로 배치됩니다.

 

 

 

 

visibility - 화면에 보이게할 것인지 아닌지를 제어

요소에 애니메이션 효과 추가 시 display 속성이 변경되는 부분은 적용이 되지 않습니다.

 

토글 기능 구현 시 해당 기능에 애니메이션 효과를 부여하기 위해서는 display 속성 대신 visibility 속성으로 제어를 해주어야 합니다.

 

• visibility : hidden - display : none 과 유사
• visibility : visible - display : block 과 유사

 

 

 

전환

transition  : 요소의 전환(시작과 끝) 효과를 설정하는 속성으로 단축 속성으로 설정 가능합니다.

 

transition-property(속성명) transition-duration(지속시간) transition-timing-function(타이밍 함수) transition-delay(대기시간) 순으로 작성하며 단축 속성으로 작성 시 transition-duration(지속시간)은 필수로 작성해주어야 합니다.

 

• transition-property : all(모든 속성에 적용)이 기본값이며, 다른 값으로 전환 효과를 사용할 속성의 이름을 명시할 수 있습니다.(가로너비만 전환 설정하고 싶으면 width로 명시해주면 width 전환만 transition 적용)
• transition-duration : 전환 효과가 일어나는 지속 시간을 설정하는 속성으로 0s(전환 효과 없음)가 기본값입니다.
• transition-timing-function : 전환 효과의 타이밍 함수를 지정하는 속성입니다.

*타이밍 함수 차트 시트

Easing Functions Cheat Sheet

 

• transition-delay : 전환 효과 몇 초 뒤에 시작할지 설정하는 속성으로, 0s(대기시간 없음)가 기본값입니다.

 

 

 

변환

transform : 요소의 변환 효과를 설정하는 속성으로 사용법은 아래와 같습니다.

 

• transform : 원근법(변환 함수) 이동(변환 함수) 크기(변환 함수) 회전(변환 함수) 기울임(변환 함수)
• transform-origin : transform의 기준은 요소의 중앙인데 transform-origin 속성을 설정하면 요소의 기준 변경이 가능

 

 

*원근법(변환 함수)은 제일 앞에 작성해야 합니다!

 

transform에서 사용할 수 있는 2D 변환 함수

 

transform에서 사용할 수 있는 3D 변환 함수

skew 사용법

 

 

 

perspective : 하위 요소를 관찰하는 원근 거리를 지정하는 속성입니다. 

 

*perspective는 perspective 함수와는 다른 속성에 해당하며 아래와 같은 차이점이 있습니다.

perspective 기본 사용법

perspective 함수는 변환할 대상에 직접 속성을 설정하는 것이고, perspective 속성은 변환할 대상의 부모 요소에 설정합니다.

 

perspective 함수와 perspective 속성은 각각의 기준점이 다르기 때문에 모양의 차이가 위와 같이 발생하게 됩니다.

 

 

 

backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부를 설정하는 속성입니다.

• visible(뒷면 보임)이 기본값이며, 다른 값으로 hidden(뒷면 숨김)을 설정할 수 있습니다.

 

 

 

요소 비율 16 : 9

 

 

 

css 변수

 

--color-red: red

css에서 -- 를 사용하면 JavaScript에서의 변수처럼 사용이 가능합니다.

 

위의 경우 변수명이 red인 변수에 red를 할당하여 해당 변수를 이용하여 css에서 사용이 가능하게 됩니다.

 

var(--color-red)

이 때 생성한 변수를 사용하기 위해서 var() 함수를 사용하여 함수의 인자로 변수를 전달해주면 됩니다.

 

*css 변수도 지역변수, 전역변수의 개념으로 변수의 사용 범위가 정해져있습니다. 때문에 해당 변수를 전역적으로 사용하고 싶을 경우 html 태그에 변수를 선언해주어야 합니다.

 

 

 

animation - 다수의 스타일을 전화하는 애니메이션을 적용

 

animation - CSS: Cascading Style Sheets | MDN

 

animation이라는 속성은 애니메이션을 만드는 속성이 아니라 특정 방식으로 만들어낸 애니메이션을 제어하는 속성입니다.

 

[animation] : animation 속성은 아래의 속성을 합친 속성입니다. (animation-name, animation-duration 순서만 지키면 나머지는 상관없이 사용 가능)

 

[animation-name] : @keyframe에서 설정한 이름

 

[animation-duration] : 지속시간

 

[animation-timing-function] : 타이밍 함수

• step() : 애니메이션을 구현하는 단계를 제어합니다.

[animation-delay] : 지연시간

 

[animation-iteration-count] : 반복 횟수

• 기본값 : 1 
• infinite : 무한

[animation-direction] : 반복되는 방향

• 기본값 : nomal
• reverse : 역방향
• alternate : 정방향-역방향 왕복
• alternate-reverse : 역방향-정방향 왕복

[animation-play-state] : 동작 상황

• 기본값 : running(동작하고 있음)
• paused : 일시정지

[animation-fill-mode] 

• 기본값 : none (원래의 위치에 있다가 애니메이션 시작위치로 이동 후 애니메이션 종료 시 원래의 위치로 돌아감)
• forwards : 원래의 위치로 돌아가지 않음
• backwards : 애니메이션 시작 위치에 있다가 애니메이션 종류 시 원래의 위치로 돌아감
• both : 애니메이션 시작 위치에 있다가 애니메이션 종료 위치에서 종료