{22년}[패스트캠퍼스] React & Redux로 시작하는 웹 프로그래밍 2주차 학습일지

SANGHYUN KIM·2022년 5월 15일
0

2주차 강의 복습 및 정리

CSS 속성

아래 사항을 변형시킬 수 있음

  • 박스: html의 박스를 제어하는 속성
  • 글꼴, 문자, 폰트, 서체
  • 배경: 박스에 배경을 삽입
  • 배치: 박스를 특정 위치에 적용
  • 플렉스: 수평으로 쌓을 수 있음(정렬)
  • 전환: 전환 상태를 애니메이션 처리
  • 변환: 회전, 이동, 크기를 조절
  • 띄움: 신문기사와 같이 사진 주변에 글이 있는 구조 (워드에서 보던 이미지 텍스트 안에 삽입하는 것)
  • 애니메이션: 복잡한 변환을 할 때
  • 그리드: 엑셀고 같이 행과 열이 필요할 때
  • 다단: 단을 나누는 것
  • 필터: 이미지 처리(흑백, 블러 등)

단위

영문한글
px픽셀
%(상대적으로 적용) 상대적 백분율
em요소의 글꼴 크기 (요소가 10px이면 10em은 100px
rem루트 요소(html)의 글꼴 크기를 보고 크기 설정
vw뷰포느 가로 너비의 백분율
vh뷰보트 세로 너비의 백분율
degdegree, 즉 각도의 축약어

padding(내부여백)과 margin(외부여백)

  • 각각 아래와 같이 기재 가능(시계방향으로 생각하기)

    • 10px 10px: 위아래 좌우
    • 10px 20px 30px: 위, 좌우, 아래
    • 10px 20px 30px 40px: 위, 우, 아래, 좌
  • {margin or padding}-{방향(top, bottom, left, right} 기재 가능

  • margin이 클 수록 요소의 크기가 커짐

테두리 선(border)과 색상 표현

  • border는 padding과 margin 사이에 존재 + border도 요소의 크기를 크게 만듦
  • border: {border-width} {border=style} {border-color} 가 기본 틀
    • width: medium, thin, thick, 단위 기재, margin과 padding같이 방향 지정 가능
    • style: 선의 형태를 기재 (none, solid, dashed{----})
    • color: 원하는 색상 또는 투명(transparent)도 지정 가능, margin과 padding같이 방향 지정 가능
색상이름브라우저에서 제공하는 색상 이름실제 기재
Hex 색상 코드16진수 색상#000 #FFFFFF
RGB빛의 삼원색rgb(255, 255, 255)
RGBA빛의 삼원색 + 투명도(0~1)rgba(255, 255, 255, 0.5)
  • border-radius를 통해 모서리를 둥글게 만들기 가능
  • box-sizing을 통해 박스 요소의 크기를 어느 곳에 맞출 지 가능
    • (default)content-box를 통해 요소의 크기로 계산
    • border-box: 요소의 내용 + padding + border로 크기 계산 가능

넘침제어(overflow)

  • 요소 크기 이상으로 넘쳤을 때, 보여짐을 제어할 수 있음
  • overflow-{x}or{y}로 각 축의 넘침을 제어가능 또는 아래를 기재하여 제어 가능
    • (default)visible: 넘친 내용을 그대로 보여줌
    • hidden: 넘친 내용을 잘라냄
    • scroll: 넘친 내용을 잘라냄. 스크롤바 생성(많은 사용 X)
    • auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

출력 특성(display)

  • 다음 값을 기재함으로 해당 요소에 특성 부여 가능
    • block: 상자 요소
    • inline: 글자 요소
    • inline-block: 글자 + 싱자 요소
    • flex: 플렉스 박스 (1차원 레이아웃)
    • grid: 그리드 (2차원 레이아웋)
    • none: 보여짐 특성 없음. 화면에서 사라짐
    • 기타: table, table-row, table-cell

투명도(opacity)

  • 요소에 0~1(투명 -> 불투명)의 값을 기재 가능

글꼴(font)

  • font-style: italic, oblique
  • font-weight: 기본두께(400), 두껍게(700)
  • font-size: 기본크기(16px), 다른 단위(px, em, rem)
  • font-height: 숫자(배수)로 요소의 글꼴 크기로 행간을 지정, 예)글자(16px) x 2 = 총 행간 높이는 32px 안에 16px의 글자가 있음
  • font-family: (후보)글꼴1, (후보)글꼴2, .... 글꼴;
    • 각 브라우저에서 지원하는 글꼴이 다르기에 없을 것을 대비하여 여러 후보를 기재
    • "따옴표"를 쓰는 이유는 적용하는 글씨체 중간에 띄어스기 필요시 사용(san-serif, "Malgun Gothic")

문자(text)

  • color, text-align(수평 정렬방식), text-decoration(문장선: underline, overline, line-through(취소선), text-indent(들여쓰기))

배경(background)

  • background-color: 색상 시정 또는 transparent(투명)
  • background-image: url("") / 따옴표 안에 경로 지정
  • background-repeat: 이미지가 박스보다 작으면 그 박스를 채울려고 반복하는데 이 것을 취소해주는 내용
  • background-position: {top, bottom, left, right} 혼합 가능 및 단위(px, em, rem)을 기재
  • background-size: 요소에 이미지 크기 조절, cover는 요소의 더 넓은 너비에 맞춤, contain은 요소의 더 짧은 너비에 맞춤
  • background-attachment: 요소이 배경 이미지 스크롤 모션, 기본은 같이 이미지가 내려가지만 "fixed"면 이미지가 고정되고 스크롤로 이미지가 작아져 감

배치(position)

  • position: static 기준 없음
  • position: relative 요소 자신을 기준, 자신이 어디로 움직일지 지정하거나 그의 자식 또는 후손 요소가 자신을 기준으로 움직일 수 있도록 지정해줌
  • position: absolute 위치 상 부모 요소를 기준(블럭요소로 자동 전환), 또한 독립적으로 표시가 되기에 해당 문구가 선언된 요소의 다음은 바로 부모 뒤이에 연결
    • 예) 부모1(relative) 부모2(static) 자식1(absolute)일 시 자식1은 부모1의 위치 기준으로 움짐임

배치된 요소의 쌓임 요소

다음 순서로 요소가 사용자와 더 가깝세 있는지 결정

  1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값은 static)
  2. 1번의 조건이 같은 경우, z-index 속성값이 높을 수록 위에 쌓임
    • 숫자는 양수부터 음수 가능하나 되도록이면 999값은 큰 요소 기재하면 유지보수 어려우니 주의
  3. 1번과 2번이 같은 경우, HTML에 나중에 작성될 수록 위에 쌓임

플렉스(정렬)

부모요소에 diplay:flex 선언 시 부모는 "Flex container"가 자식은 "Flex Items"로 규정

Flex-Container

  • display: inline-flex flex 요소들이 인라인과 같이 수평정렬 및 정의
  • flex-direction: {row or row-reverse} word의 왼측 또는 우측 맞춤(글의 시작을 지정)
  • flex-wrap: {wrap or no-wrap} 줄바꿈이 됨
  • justify-content: {flex-start or flex-end or center}: 주 축의 (수평)정렬
  • align-content: {stretch, flex-start, flex-end, center}: 교차 축의 여러 줄 정렬
  • align-items: {flex-start, flex-end, center} 위와 다르게 한 줄만 정렬

Flex-Items

  • order기재 시 그 값에 따라서 시작점에서 요소 값대로 출력(오름차수)
  • 'flex-grow: {숫자}` item이 부모의 빈 공간에 얼마나 차지할 것인지 기재
  • `flex-shrink: {숫자}
  • flex-basis: {숫자 or auto or 단위}: 공간 배분 전에 기본 너비를 지정하는 항목 (만약 흔하게 박스크기로 비율이 1: 1 : 2가 되길 원하면 "0"을 입력)

전환(transition)

요소의 전환 효과를 지적ㅇ하는 단축 속성

transition: {속성명} {지속시간*필수*} {타이밍함수} {대기시간}
  • {속성명}은 전환효과를 적용시킬 이름을 지정 (all or 지정대상)
  • 시간관련된 항목들은 초(s)로 표현 예)1초 = 1s
    • {지속시간} 전환효과의 지속시간
    • {타이밍함수} 전환효과의 타이밍(easing)함수 지정 (구글에서 "easing funtion" 검색 시 다양한 함수 탐색 가능)
    • {대기시간} 전환효과가 몇 초 뒤에 시작할지 지정

변환(transform)

transform: {변환함수} {변환함수2} ....... ;

2D 변환

  • translate(translateX or translateY): {단위 숫자} 해당 px만큼 움직임 (x축 또는 y축 지정)
  • scale(sacleX or scaleY): {숫자} 배수(숫자)로 커짐
  • rotate: {deg} 돌려야 하는 각도를 기재
  • skewX or skewY: {deg} 요소를 기울여 마름모 형태로 지정 (음수 가능)

3D 변환

  • rotateX or rotateY: {deg} 이 두개는 3D 변환함수
    • 단, perspective: {단위 as px}라는 원근값을 가정 먼저 기재해야하여야 뷰포트에서 표현됨
  • (속성으로써)perspective: {단위 as px}: 부모요소에 기재하는 속성으로 앞으로 나와있는 자식요소와 상호작용하여 3D를 표현
  • backface-visibility: {visilbe or hidden} 한 요소가 180도로 뒤집어졌을 때 그 뒤집어진 요소를 숨길 지 또는 보일 지 표현

주간 회고

[장점]
개인적으로 강의 내용이 매우 좋다고 판단, 왜냐하면 중요한 것은 2번 이상 언급 및 코드를 치면서 강조하기 때문

[단점]
없음

[신경쓸 것]
되도록이면 하루에 내가 나눈 파트보다 조금 더 들어서 다음 날의 부담을 줄여보자
이제부터 실습 및 적용하는 것이니 본 과정의 오버워치 선택 예제를 한번 복습해보자
실습코치님이 올려준 것 끝 level까지 끝내기

profile
꾸준히 공부하자

0개의 댓글