CSS 속성 Part 2.

HTML에서 속성 : Attributes

CSS에서 속성 : Properties

JS에서 속성 : Properties

---

CSS를 통해 적용하는 스타일 목차

1. 박스 모델
2. 글꼴, 문자(기울기, 두께, 크기, 높이, 글꼴, 색상, 정렬, 장식, 들여쓰기)
3. 배경 (배경 색상, 이미지 삽입, 이미지 반복, 이미지 위치, 이미지 크기, 이미지 스크롤) 
4. 배치 (position-relative, absolute, fixed/stack order)
5. 플렉스(정렬) (flex- flex container, flex items)
6. 전환 (transition, 속성명, 지속시간, 타이밍함수, 대기시간)
7. 변환 (transform,원근법, 이동, 크기, 회전, 기울임, 뒷면숨김)
8. 띄움
9. 애니메이션
10. 그리드
11. 다단
12. 필터

---

2-1) 글꼴

① font-style : 글꼴의 기울기

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

 

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

기본값 : normal, 400(기본 두께)  / bold, 700(두껍게)

 

③ font-size : 글자의 크기

기본값 : 16px / 단위: px,em,rem 등 단위로 지정.

 

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

 기본값 : normal(브라우저의 기본 정의를 사용) / 숫자 : 요소의 글꼴크기의 배수로 지정

 

⑤ font-family : 글꼴(서체) 지정

* font-family: 글꼴1, 글꼴2, "글꼴 3", 글꼴계열(필수);

 - 브라우저에서 font-family에 지정된 글꼴을 순차적으로 보이도록 시도하고

    지정된글꼴이 모두 사용이 어려운 경우 글꼴계열을 이용함.

 - 글꼴계열 : sans-serif (고딕체 계열)을 주로 이용함.

 - 글꼴 이름에 띄어쓰기가 들어간 경우 " " 쌍따옴표로 묶어서 표현.(ex: "맑은 고딕")

 

 

2-2) 문자

① color : 글자의 색상 (기본값:black)

 

② text-align : 문자의 정렬 방식 (기본값:left)

 - left / right / center / justify 정렬 가능

 

③ text-decoration : 문자의 장식 (기본값:none)

 - underline(밑줄) / line-through(중앙선) / overline(윗줄)

 

④ text-indent : 문자 첫줄의 들여쓰기 (기본값:0)

- 단위: px, em, rem 등으로 지정 / 음수를 사용하면 내어쓰기형태로 이용가능

 

---

3) 배경

① background-color : 요소의 배경색상

기본값 : transparent(투명함)

 

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

기본값 : none  / url("이미지경로") 형태로 이미지 삽입가능.

 

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

기본값 : repeat(이미지를 수직/수평 반복-바둑판식배열)

- repeat-x, repeat-y : 이미지를 수평 혹은 수직으로 반복

- no-repeat : 반복 없음

 

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

* 방향 : top, bottom, left, right, center 방향 지정

   - px, em, rem 등 단위로도 지정 가능-> x축과 y축의 개념으로 위치 적용됨

 

⑤ background-size : 요소의 배경이미지 크기 (기본값: auto 이미지의 실제 크기)

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

 - cover로 지정 : 비율을 유지하되 요소의 더 넓은 너비를 기준으로 맞춤(가로/세로)

 - contain으로 지정 : 비유을 유지하되 요소의 더 짧은 너비를 기준으로 맞춤(가로/세로)

 

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

기본값 : scroll (이미지가 요소를 따라서 같이 스크롤) / fixed(이미지가 뷰포트에 고정되어 스크롤처리되지 않음)

---

4) 배치

① position : 요소의 위치 지정 기준

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

position으로 위치기준 설정 후 top, bottom, left, right, z-index 속성으로 위치 값 설정.

* top, bottom, left, right : 요소의 각 방향별 거리 지정 (기본값 : auto-브라우저가 계산 / 단위 : px, em, rem 등)

 

▶ position: relative로 설정한 경우 요소 자신이 위치 지정의 기준임을 선언.

▶ position: absolute로 설정한 경우 위치 상 부모 요소를 기준으로함.

               (HTML 구조상 부모요소가 아닌 위치상 부모 요소에 유의).

   부모요소에 position이 relative로 설정되어있어야 실제 부모요소 기준으로 위치가 적용되며,

   부모 요소의 position:relative 선언이 안되어있으면

   조상요소(부모의 부모)로 순차적으로 찾아 올라가게 되고 끝까지 position이 설정된 부모요소를 찾지 못하면

   뷰포트(브라우저) 기준으로 위치값이 적용된다.

▶position: fixed로 설정한 경우 뷰포트(브라우저)를 기준으로 배치.(스크롤을 움직여도 위치 고정되어 움직이지않음)

 

* 요소 쌓임 순서(Stack order) : 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정.

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

* z-index : 위의 1번 조건을 충족 하였을때 요소의 쌓임 정도(우선순위)를 지정.

  기본값: auto( 0, 부모요소와 동일한 쌓임정도) / 숫자가 높을 수록 위에 쌓임.(음수도 가능하나 주로 -1까지만 사용)

ex:) 요소 A, B에 모두 position 속성이 선언되어 있는 경우(static 제외),

    z-index: 1; , z-index:2; 를 각각 선언하면 z-index 값이 2인 요소가 위에 쌓임.

 

▶ position 속성의 값이 absolute, fixed로 지정된 요소는 display 속성이 'block' 으로 자동 변경됨.

 

---

5) 플렉스(정렬) ( display: flex; ) : Flex Container의 화면 출력(보여짐) 특성 / 1차원 레이아웃

 * display : flex;          // Flex Container 정의(블록요소와 같이 적용)

 * display : inline-flex;  // Flex Container 정의(인라인 요소와 같이 적용)

display : flex로 설정하면 Flex container와 Flex items의 개념이 생기며 각각 아래의 CSS 속성들을 적용할 수 있음.

 

▶Flex container : 디스플레이 값이 flex로 설정된 요소를 의미

 이용가능한 CSS 속성 : display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items

▶Flex Items : Flex container 안에 속한 자식요소들을 의미

 이용가능한 CSS 속성 : order, flex, flex-grow, flex-shrink, flex-basis, align-self 

 

① flex-direction : 주 축 설정 (주로 수평정렬 용도로 이용하여 행(row/row-reverse) 설정)

속성 값

row : 행 축 기준 좌 → 우 방향
row- reverse : 행 축 기준 우 → 좌 방향

// 거의 이용하지않으나 column(열 축 위->아래), column-reverse(열 축 아래->위)도 있음.

 

 

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

▶nowrap(줄바꿈 없음) : flex-item들을 줄바꿈 없이 한줄로만 표시.

: flex-item들의 총 너비(가로)가 flex-container의 너비보다 작으면

  flex-item의 너비가 줄어들면서 flex-container의 너비에 맞게 수정됨.

▶wrap(줄바꿈 있음) : flex-item들을 여러 줄로 묶어서 표시가능.

: flex-item들의 총 너비(가로)가 flex-container의 너비보다 작으면

  너비에서 넘치는 flex-item을 줄바꿈 처리하여 표시.(flex-item 모양 변하지않음)

 

③ justify-content : 주 축의 정렬방법

▶ flex-start : Flex Items을 시작점 기준으로 정렬

▶ flex-end : Flex Items을 끝점 기준으로 정렬

▶ center : Flex Items을 가운데 정렬

 

④ align-content : 교차 축의 여러 줄 정렬방법 (Flex Items이 한 줄인 경우 적용안됨)

▶ 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을 가운데 정렬

* 위의 ①~⑤번은 Flex Container 요소에 선언해야함.

 

⑥ order : Flex Item의 순서

▶ 기본값: 0, 숫자가 작을수록 먼저 보여짐.

 

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

▶ 기본값: 0(증가비율없음), 숫자로 증가비율 명시

 

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

▶ 기본값: 1(Flex Container 너비에 따라 감소비율 적용), 숫자로 감소비율 명시

* 위의 ⑥~⑧번은 Flex Item 요소에 선언해야함.

 

https://inpa.tistory.com/243

[CSS] 📚 플랙스(Flex) 💯 총정리

 

---

6) 전환 Transition : 요소의 전환(시작과 끝) 효과를 지정하는 단축속성.(요소의 변화를 자연스럽게 전환시킴)

* transition : 속성명 지속시간 타이밍함수 대기시간; 형태로 선언. 

 ex) transition: width 1s linear 1s;

* 지속시간만 필수로 포함해야하는 속성. 나머지는 생략 시 기본값으로 적용됨.

 

① transition-property 속성명

: 전환 효과를 사용할 속성의 이름을 지정. (기본값 all)

: 속성이름 명시 시 해당 속성에만 전환효과가 적용됨. (Ex. width: 2s, color: 1s)

 

② transition-duration 지속시간

: 전환 효과의 지속 시간을 지정. (기본값 0)

: 지속시간(s)을 지정. ( 0.5초는 .5s로 표현 가능 )

 

③ transition-timing-function 타이밍함수

: 전환효과의 타이밍(Easing) 함수를 지정 (기본값 : ease)

▶ ease : 느리게-빠르게-느리게 ,    linear : 일정하게

ease-in : 느리게-빠르게 ,  ease-out : 빠르게-느리게 ,   ease-in-out : 느리게-빠르게-느리게

 

④ transition-delay 대기시간

: 전환효과가 몇 초 뒤에 시작할지 대기시간을 지정(기본값 0)

: 대기시간(s)을 지정. ( 0.5초는 .5s로 표현 가능 )

---

7) 변환 transform : 요소의 변환 효과(기울임, 크기 조정)

① 변환함수 이용 transform : 변환함수1 변환함수2 변환함수 3 ... ;

* 원근법, 이동, 크기, 회전, 기울임 설정. ( 원근법 함수는 제일 앞에 작성해야 적용 됨 )

▶2D 변환함수

translate(x,y) : 이동(x,y축), translateX(x) : x축만 이동, translateY(y) : y축만 이동. -> px 단위로 선언.

scale(x,y) -> 단위없이 숫자로 선언.(배수로 적용됨)

rotate(degree) : 회전(각도), skewX(x) : 기울임(x축), skewY(y) : 기울임(y축)   -> deg 단위로 선언.

▶3D 변환 함수

perspective(n) : 원근법(거리)  -> px 단위로 선언.

rotateX(x) : 회전(x축), rotateY(y) :회전(y축) ->deg 단위로 선언.

 

② 속성 이용

▶ perspective : 하위 요소를 관찰하는 원근거리를 지정. (px단위로 지정)

- 3D 변환함수인 perspective(n)과의 차이점

 속성 perspective:60px;   / 적용대상 : 관찰대상의 부모 / 기준점설정 : perspective-origin

 함수 tansform:perspective(60px); / 적용대상 : 관찰대상 / 기준점설정 : transform-origin

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

- 기본값: visiable(뒷면 보임) / hidden(뒷면 숨김)

---