React & Redux로 시작하는 웹 프로그래밍 학습일지 2주차

CSS 속성(Properties) - 구현을 상상할 수 있도록!

박스모델 / 글꼴,문자 / 배경 / 배치 / 플렉스(정렬)
전환 / 변환 / 띄움 / 애니메이션 / 그리드
다단 / 필터

• 박스 모델 : 가로세로 너비, 내부외부 여백 - 박스 제어
• 글꼴, 문자 : 서체, 크기, 두께 - 글자 제어
• 배경 : 요소는 사각형 -> 배경 색상, 이미지 넣기
• 배치 : 원하는 위치에 가져다 놓기
• 플렉스(정렬) : 레이어들 수평정렬, 수직정렬 / 띄움개념으로도 가능했으나 구형..
• 전환 : 전과 후 상태 중간의 전환 애니메이션 처리
• 변환 : 회전, 이동, 크기 조절 -> 2d, 3d 변환 가능
• 띄움 : 요소를 공중에 띄운다 생각, 요소 주변에 문자가 흐르도록 만들 수 있다. (신문 - 사진 주변 기사 생각하면 됨)
• 애니메이션 : 좀더 복잡한 구조의 애니메이션 구현
• 그리드 : 행렬구조 2차원 레이아웃 쉽게 제어가능
• 다단 : 말 그대로 다단 기능
• 필터 : 흐림(Blur), 흑백(Grayscale), 반전(Reverse)

1. 요소의 가로/세로 너비

• width, height
  auto : 기본값(요소에 이미 들어있는 속성의 값) - 브라우저가 너비를 계산
  • 단위 : px, em, vw 등 단위로 지정 - px를 가장 많이 씀.
• span - 인라인요소 : 가로세로 모두 콘텐츠의 크기만큼 자동으로 줄어들게끔 되어있음
  • width, height 제어가 불가하며 이유는 글씨를 제어하는 요소이기 때문
• div - 블록요소 : 가로는 최고로 늘어나게끔 / 세로는 콘텐츠 크기만큼 줄어들게끔
  • width, height 제어 가능. 박스를 만들 수 있기 때문.
• max-width, max-height - 요소가 커질 수 있는 최대 가로/세로 너비
  none : 기본값으로 최대너비 제한 없음
  • auto : 브라우저가 너비를 계산
  • 단위 : px, em, vw 등 단위로 지정
• min-width, min-height - 요소가 작아질 수 있는 최소 가로/세로 너비
  0 : 기본값으로 최소너비 제한 없음
  • auto : 브라우저가 너비를 계산
  • 단위 : px, em, vw 등 단위로 지정
• 부모요소 속성 이상으로 커질 수는 없다.
• 그러나 min-width 가 부모요소보다 크면 부모요소가 작더라도 넘어갈 수 있다.

표현단위 - 단위

• px 픽셀 / % 상대적 백분율 / em 요소의 글꼴 크기 / rem 루트 요소(html)의 글꼴 크기
  vw 뷰포트 가로 너비의 백분율 / vh 뷰포트 세로 너비의 백분율
• 따로 지정 안했으면 디폴트 font-size:16px;
• 1em은 font-size만큼이다. / rem은 root의 font-size만큼으로 고정된다.
• vw/vh는 보이는 부분을 백분률로! 화면이 어떻든 유동적으로 변하기 때문에 유용

2. 요소의 내외부 여백

• margin - 요소의 외부 여백(공간)을 지정하는 단축 속성
  음수사용가능
0 : 기본값으로 외부 여백 없음
  • auto : 브라우저가 여백을 계산
    가로(세로) 너비가 있는 요소의 가운데 정렬이 기본!
  • 단위 : px, em, vw등 단위로 지정
  • % : 부모요소의 가로 너비에 대한 비율로 지정
  • margin : 10px 20px : 2개 지정 가능
    top, bottom , left, right : 상하 / 좌우
  • margin : 10px 20px 30px : 3개 지정 가능
    top , left, right, bottom : 상/ 좌우 / 하
  • margin : 10px 20px 30px 40px : 4개 지정 가능
    top , right , bottom , left: 상 / 우 / 하 / 좌
    위부터 시계방향임 기억!!
  • margin-방향 : 네 부분 중 원하는 부분만 지정도 가능하다.
    top / right / bottom, left
  • margin : 음수 : 반대로 겹쳐지게 된다.
• padding - 요소의 내부 여백(공간)을 지정하는 단축 속성
  요소의 크기가 커진다 - 내부가 확장되므로 전체적으로 커져버림!
  0 : 기본값으로 내부 여백 없음
  • 단위 : px, em, vw 등 단위로 지정
  • % : 부모요소의 가로 너비에 대한 비율로 지정
  • padding : (갯수 1,2,3,4개 가능) - 규칙 margin과 동일

3. 요소의 테두리 선

• border: 선-두께 선-종류 선-색상 ; - 요소의 테두리 선을 지정하는 단축속성
  권장 순서 : border-width , border-style , border-color
  ex ) border: 10px solid orange ; - 얘도 결국 요소의 크기가 커진다.
기본값: medium none black; - 선의 종류가 없어 출력 안되던 상태.
• border-width - 요소 테두리 선의 두께
  medium:중간두께(디폴값) / thin:얇은두께 / thick:두꺼운 두께
  • 단위 : px, em, % 등 단위로 지정
  • 얘도 단축속성 존재
    border-width : top, right, bottom, left;
    border-width : top,bottom , left,right;
    border-width : top , left,right , bottom;
    border-width : top , right , bottom , left;
• border-style - 요소 테두리 선의 종류
  none : 기본값 - 선없음
  • solid : 실선(일반 선) / dashed : 파선
    doted:점선 / double:두줄선 / groove:홈이파여있는모양
    ridge:솟은모양(groove반대) / inset:요소 전체가 들어간 모양
    outset: 요소 전체가 나온 모양
    
  • 얘도 단축속성 존재
    border-style : top, right, bottom, left;
    border-style : top,bottom , left,right;
    border-style : top , left,right , bottom;
    border-style : top , right , bottom , left;
• border-color - 요소 테두리 선의 색상지정
  black : 기본값 - 검정색
  • 색상 : 선의 색상
  • transparent : 투명
  • 얘도 단축속성 존재
    border-color : top, right, bottom, left;
    border-color : top,bottom , left,right;
    border-color : top , left,right , bottom;
    border-color : top , right , bottom , left;

색상표현 - 색을 사용하는 모든 속성에 적용가능한 색상표현

• 색상이름 - 브라우저에서 제공하는 색상 이름 - red, tomato, royalblue
• Hex 색상코드 - 16진수 색상 - #000, #FFFFFF
• RGB - 빛의 삼원색 - rgb(255,255,255)
• RGBA - 빛의 삼원색 + 투명도 - rgba(0, 0, 0, 0.5)
• 그외 HSL(색상,채도,명도) / HSLA(색상,채도,명도+투명도)

border-방향 , border-방향-속성

요소의 테두리 선을 지정하는 기타속성들

• border-top : 두께 종류 색상;
  border-top-width : 두께;
  border-top-style : 종류;
  border-top-color : 색상;
• top자리에 대신 bottom , left , right 로만 바꾸면 됨

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

0 : 기본값 - 둥글기 없음
단위 : px, em, vw등 단위로 지정

• 반지름이 단위 만큼의 원만큼 깎아내는 것임.
• border-radius: 좌상 우상 우하 좌하; 로 원하는 것만 깎을 수 있다.

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

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

• 전체사이즈를 맞추려면 수동으로 계산해야한다.

border-box : 요소의 내용 + padding + border로 크기 계산

• 전체사이즈를 정확한 크기로 자동설정된다.

4. 요소의 제어

overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
visible : 기본값 - 넘친 내용을 그대로 보여줌

• hidden : 넘친 내용을 잘라냄
• scroll : 넘친 내용을 잘라냄, 스크롤바 생성, 상하좌우 다 생김
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
  
• auto를 자주 사용하게 될 것
• overflow-x : x로 넘치는 내용만 체크
• overflow-y : y로 넘치는 내용만 체크

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

block : div 등에서 디폴로 정해진 상자(레이아웃) 요소
inline : span, a 등에서 디폴로 정해진 글자 요소
inline-block : 글자 + 상자 요소(Base는 글자인데 상자속성 붙어있는 것)
flex : [따로 지정해서 사용] 플렉스 박스 (1차원 레이아웃) - 축 1개
grid : [따로 지정해서 사용] 그리드 (2차원 레이아웃) - 축 2개
none : [따로 지정해서 사용] 보여짐 특성 없음, 화면에서 사라짐
기타 : table , table-row , table-cell 등...

• 특성이 다를 때, 다른 특성으로 만드는 용도로도 사용

opacity - 요소의 투명도

1 : 기본값 - 불투명
0~1 : 0(투명)부터 1(불투명)사이의 소수점 숫자 / .5라 써도 됨

5. 글자

font-size font-weight font-style width font-family

font-style - 글자의 기울기

normal : 기본값 - 기울기 없음
italic : 이텔릭체
oblique : 기울어진 글자 (얘보단 이텔릭을 씀)

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

normal, 400 : 기본값 - 기본두께
bold, 700 : 두껍게
bolder : 상위(부모)요소보다 더 두껍게
lighter : 상위(부모)요소보다 더 얇기
100 ~ 900 : 100단위의 숫자 9개, normal과 bold 이외 두께

font-size - 글자의 크기

16px : 기본 크기, 기본값 & root
단위 : px, em, rem 등 단위로 지정
% : 부모 요소의 폰트 크기에 대한 비율
smaller : 상위(부모)요소보다 작은 크기
larger : 상위(부모)요소보다 큰 크기
xx-small ~ xx-large : 가장 작은 크기 ~ 가장큰 크기까지 (7단계)

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

normal : 기본값 - 브라우저의 기본 정의를 사용
숫자 : 요소의 글꼴 크기의 배수로 지정
단위 : px, em, rem 등의 단위로 지정
% : 요소의 글꼴 크기의 비율로 지정

• 리셋하면 1이되며, 단위 없는 값이다 / 폰트의 크기가 바뀌면 비율로 같이 늘어나도록 px가 아닌 숫자로 쓰도록 하자.
  

font-family : 글꼴1, "글꼴2", ... 글꼴계열;

• 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야함.
• 명시해놓은 글꼴 후보를 하나씩 시도하고 안되면 마지막 글꼴계열 맞는걸로..
• serif : 바탕체 계열
  sans-serif : 고딕체 계열
  monospace : 고정너비(가로폭이 동등) 글꼴 계열
  cursive : 필기체 계열
  fantasy : 장식 글꼴 계열

6. 문자

color - 문자의 색상

rgb(0,0,0) : 기본값 - 검정색
색상 : 기타 지정 가능한 색상

text-align - 문자의 정렬 방식

left : 기본값 - 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데 정렬
justify : 양쪽 정렬

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

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

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

0 : 들여쓰기 없음

• 음수를 사용할 수 있음. 음수는 내어쓰기(outdent)임.
  단위 : px, em, rem 등 단위로 지정
  % : 요소의 비율로 지정

7. 배경

background-color - 요소의 배경 색상

transparent : 기본값 - 투명함
색상 : 지정 가능한 색상

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

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

@ 배경 색상과 배경이미지를 같이 지정하면 이미지 뒤에 색상이 나옴!

background-repeat

repeat : 기본값 - 이미지를 수직, 수평 반복 - 바둑판
repeat-x : 이미지를 수평 반복 - 수평으로만(왼 -> 오)!!
repeat-y : 이미지를 수직 반복 - 수직으로만(위 -> 아래)!!
no-repeat : 반복 없음

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

0% 0% : 0%~100% 사이 값
방향 : top, bottom, left, right, center (방향1 방향2)형태
단위 : px, em, rem 등 단위로 지정 (x축 y축)형태

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

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

background-attachment

요소의 배경 이미지 스크롤 특성
scroll : 기본값 - 이미지가 요소를 따라서 같이 스크롤
fixed : 이미지가 뷰포트에 고정, 요소는 올라가는데 이미지가 고정! 스크롤 x
local : 요소 내 스크롤 시 이미지가 같이 스크롤(쓸일이 거의 없을 것)

7. 배치

position - 요소의 위치 지정 '기준'

position과 같이 사용하는 CSS 속성들! - 모두 음수 사용 가능!
top , bottom , left , right , z-index

• static : 기본값 - 기준 없음
• relative : 요소 자신을 기준
• absolute : 위치상 부모 요소를 기준, (이해 잘해야 함)
• fixed : 뷰포트(브라우저를 기준)
• sticky : 스크롤 영역 기준

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

auto : 기본값 - 브라우저가 계산
단위 : px, em, rem 등 단위로 지정

@ relative : 요소 자신을 기준으로 배치하는 것

배치 전 있던 자리를 기준으로 잡고 이동시켜 배치 시킨다.
배지 전 원래 자리는 투명처리되었을 뿐 그 자리는 존재하는 상태
(빈 공간처럼 처리 - 비정상적인 처리라 할 수 있다 - 즉, 사용될 일 거의 없다)

absolute - '위치 상 부모요소'를 기준으로 배치

가장 많이 사용되는 편 / 공중에 붕 뜬 상태처럼 표현된다.

• 주변과의 상호작용이 무너진다
• 위치 상 부모요소가 뷰포트가 되어버리는 경우가 있다.
  : 위치상 부모요소로 작용하기 위해선 position:relative; 가 필요하다.
• 기준을 옮길 수 있다. (찾다가 못찾으면 뷰포트가 기준이 되어버림.)

fixed - 뷰포트(브라우저)를 기준으로 배치

• 항상 동일 위치에 배치가 유지된다. 스크롤 해도 그래도 존재한다.
  상단바 / 일부 배너 등 지원 가능

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

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

Z-index - 요소의 쌓임 정도를 지정

auto : 기본값 - 부모 요소와 동일한 쌓임 정도(= 0으로 알고있어도 무방하다.)
숫자 : 숫자가 높을수록 위에 쌓임

• 음수도 사용은 가능. -1 통해 뒤로 밀어버릴 수 있다.

너무 큰 숫자를 쓰는 것은 지양하자!

요소의 display가 변경됨

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

8. 플렉스(정렬)

1차원 레이아웃에서의 정렬

• block 요소는 수직으로 쌓인다.
• 수평으로 쌓고 싶으면 display: flex; 하면 된다.
  - 플랙스가 적용된 요소들은 속성들이 다르므로 구분 알고 지나가자.
  • Flex Container : display: flex 가 선언된 부분
    display
flex-flow,flex-direction,flex-wrap
justify-content
align-content
align-items
  • Flex Items : Flex Container의 자식요소들
    order
flex,flex-grow,flex-shrink,flex-basis
align-self

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

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

• FlexContainer들 끼리는 블록처럼 수직으로 쌓임

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

• FlexContainer들 끼리 수평 나열이 되게 해준다.

flex-direction - 주 축(MainAxis)을 설정

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 Item 사이를 균등하게 정렬
space-around : 각 Flex Item의 외부 여백을 균등하게 정렬

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

• 줄바꿈 상태여야 가능(flex-wrap:wrap;), 두 줄 이상(덩어리로 움직임)이어야 하며, 움직일 만한 여백도 있어야 함.
  

stretch : 기본값 - Flex Items를 시작점으로 정렬
flex-start : Flex Items를 시작점으로 정렬
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데 정렬
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를 각 줄의 문자 기준선에 정렬

---

여기부터는 FlexItems의 속성

order - Flex Item의 순서

• 임의로 Item들의 순서를 지정해 줄 수 있다.

0 : 기본값 - 순서 없음
숫자 : 숫자가 작을수록 먼저 / -1: 맨앞

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

0 : 기본값 - 증가 비율 없음
숫자 : 증가 비율 생성, 꽉 채우도록 늘어남.

• 내용이 들어있으면 요소 Content를 제외한 공간을 갖고 조절된다.

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

1 : 기본값 - Flex Container 너비에 따라 감소 비율 적용
숫자 : 감소 비율 / 0 : 줄어들지않고, 모양 그대로 뚫고 나온다.

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

auto : 기본값 - 요소의 Content 너비
단위 : px, em, rem 등 단위로 지정

• flex-basis : 0; 글자부분을 생각하지 않고 전체적으로 배분 된다. 깔끔쓰!
• flex-basis : 100px; 기본 영역을 일괄되게 100px를 주고 나머지를 배분!!

9. 전환

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

-요소의 전환(시작과 끝)효과를 지정하는 단축속성 /,를 통해 여러 속성 적용할 수 있음.
지속시간은 단축형으로 작성할 때, 필수 포함 속성!

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

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

all : 기본값 - 모든 속성에 적용
속성이름 : 전환 효과를 사용할 속성이름 명시

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

0s : 기본값 - 전환 효과 없음
시간 : 지속시간(s)을 지정

transition-timing-function - 전환효과의 타이밍함수를 지정

ease : [기본값] 느리게 - 빠르게 - 느리게
linear : 일정하게
ease-in : 느리게 - 빠르게
ease-out : 빠르게 - 느리게
ease-in-out : 느리게 - 빠르게 - 느리게
cubic-bezier(n,n,n,n) : 자신만의 값을 정의 (0 ~ 1)
steps(n) : n번 분할된 애니메이션

-> easing functions 라 검색해서 더 검색해봐도 좋다.

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

0s : 기본값 - 대기시간 없음
시간 : 대기시간(s)을 지정

10. 변환

요소의 변환 효과 (변환함수는 띄어쓰기로 구분)

transform: 변환함수1 변환함수2 변환함수3 ... ;

transform: 원근법 이동 크기 회전 기울임;

2D 변환함수

[px]
translate(x,y) - 이동(x축, y축)
translateX(x) - 이동(x축)
translateY(y) - 이동(y축)

[없음(배수)]
scale(x,y) - 크기(x축, y축)
scaleX(x) - 크기(x축)
scaleY(y) - 크기(y축)

[deg]
rotate(degree) - 회전(각도)
skew(x,y) - 기울임(x축, y축)
skewX(x) - 기울임(x축)
skewY(y) - 기울임(y축)

matrix(n,n,n,n,n,n) - 2차원 변환 효과

3D 변환함수

[px]
translateZ(z) - 이동(z축)
translate3d(x,y,z) - 이동(x축,y축,z축)

perspective(n) - 원근법(거리) -> 제일 앞에 작성해야 함

[없음(배수)]
scaleZ(z) - 크기(z축)
scale3d(x,y,z) - 크기(x축,y축,z축)

[deg]
rotateX(x) - 회전(x축)
rotateY(y) - 회전(y축)
rotatZ(z) - 회전(z축)
rotate3d(x,y,z,a) - 회전(x축,y축,z축, 각도)

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - 3차원 변환 효과

perspective - 하위 요소를 관찰하는 원근거리를 지정

단위 : px 등 단위로 지정

• perspective 속성과 함수 차이점

속성 / 함수	적용대상	기준점 설정
perspective:600px;	관찰대상의 부모	perspective-origin
transform:perspective(600px)	관찰대상	transform-origin

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

visible : 기본값 - 뒷면 보임
hidden : 뒷면 숨김

1주,2주차 내용으로만으로도 만들 수 있는 페이지

출처 : fastcampus react & redux로 시작하는 웹 프로그래밍