0531 - 0606

0531

역량테스트 준비 7일차

역량테스트가 점점 눈앞으로 다가오고 있다. 부지런하게 자기소개서도 작성하고 있다.
항상 자기소개서를 작성할 때마다 부족한 글솜씨를 어떻게 커버할지 많은 고민이 된다.
두괄식으로 자기소개서를 작성하는 법을 익혀야겠다.
박스 모델과, 폰트 그리고 float 속성과 position 속성에 대한 학습을 진행했다.

박스 모델

길이 및 크기 속성

width, height

각각 너비와 높이를 나타내는 속성
속성의 기본 값은 auto
블록 요소는 width는 100%, height는 0에서 시작
인라인 요소는 width는 0, height는 0에서 시작
인라인 요소는 크기 지정 불가능 -> 텍스트에 특화

max-width, max-height

요소의 최대 너비와 높이 설정
기본 값은 none

min-width, min-height

요소의 최소 너비와 높이 설정
기본 값은 0

margin

요소의 외부 여백을 지정. 단축 속성
음수의 값도 사용할 수 있다.
기본 값은 0이다.
margin의 값으로 %를 사용하게 되면 부모 요소의 가로 너비를 기준으로 계산한다.
값이 4개 작성된 경우에는 위, 우, 아래, 좌 순
값이 3개 작성된 경우에는 위, (좌, 우), 아래 순
값이 2개 작성된 경우에는 (위, 아래), (좌, 우)
값이 1개 작성된 경우에는 모두 동일
개별 속성은 margin-top 식으로 사용하면 된다.

마진 중복

마진의 특정 값들이 중복되어 합쳐지는 현상
버그가 아니라 활용하거나 우회해서 사용할 수 있다.

형제 요소들의 margin-top과 margin-bottom이 만났을 때
부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 때
부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 때

마진 중복 계산법

마진 중복 현상 발생시, 중복 값을 계산하는 방법
둘 다 양수이면 더 큰 값으로 중복
둘 다 음수이면 더 작은 값으로 중복
각각 양수와 음수이면 더해서 계산

padding

요소의 내부 여박을 지정
기본 값과 사용법은 margin과 동일
padding이 추가된 값만큼 width와 height 값을 다시 계산한다.

크기 증가

추가된 padding 값만큼 요소의 크기가 커지는 현상
box-sizing: border-box; 속성을 사용하면 크기가 커지지 않고 브라우저가 자동으로 계산해준다.

border

요소의 테두리 선을 지정
속성 값으로는 border-width, border-style, border-color을 지정해주어야 한다.
각 기본 값은 medium, none, black이다.
border의 경우에도 padding 처럼 border-width만큼 요소의 크기가 커진다.

.box {
  border: 1px solid red;
}

border-width

선의 두께를 지정
medium, thin, thick, 단위를 값으로 입력할 수 있다.
margin과 마찬가지로 위, 우, 아래, 좌 각각 두께를 따로 정할 수 있다.
단축속성이면서 개별속성

border-style

선의 종류를 지정
값으로는 solid - 실선, dotted - 점선, dashed - 파선, double - 두줄선 등이 있다.
단축속성이면서 개별속성으로 사용 가능하다. (margin과 padding 처럼)

border-color

선의 색상을 지정
transparent - 투명한 선. 요소의 배경색이 보인다.
단축속성이면서 개별속성
boder-top-width 처럼 속성을 사용할 수도 있다.

box-sizing

요소의 크기 계산 기준을 지정
content-box : 너비만으로 요소의 크기를 계산. 기본 값
border-box : 너비에 안쪽 여백과 테두리선을 포함하여 요소의 크기를 계산

display

요소의 박스 타입을 설정
block : 블록 요소
inline : 인라인 요소
inline-block : 인라인-블록요소
- 인라인 요소이지만 블록의 추가적인 특징을 가지고 있다.
- 인라인 요소인대 크기와 높이를 가질 수 있다.
- margin과 padding도 사용할 수 있다.
기타 : table, table-cell, flex 등
none : 요소의 박스 타입이 없음 (요소가 사라짐)

overflow

요소 크기 이상으로 내용이 넘쳤을 때, 내용이 보여짐을 제어
visible : 넘친 부분을 자르지 않고 그대로 보여줌. 기본값
hidden : 넘친 부분을 잘라내고, 보이지 않도록 함
scroll : 넘친 유무와 상관 없이, 스크롤바 생성
auto : 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 생성

opacity

요소의 투명도를 지정
0부터 1사이의 숫자를 지정. 기본값은 1
예를 들어 opacity: 0.5; 이면 반투명.
.5로 0을 생략하여 표현 가능
opacity: 0;은 화면에 존재하지만 투명해서 보이지 않는 것이고, display: none;은 화면에 존재하지 않는 것이다.

글꼴, 문자

font

글자 관련 속성들을 지정

.box {
  font: 기울기 두께 크기 / 줄높이 글꼴;
}

단축 속성을 사용하려면 크기와 글꼴은 필수로 입력해야 한다.

font-style

글자 기울기를 지정
normal : 스타일 없음. 기본값
italic : 이탤릭체
oblique : 기울어진 글자

font-weight

글자의 두께를 지정
normal : 기본 글자 두께. 400과 동일. 기본값
bold : 두껍게, 700과 동일
bolder : 부모 요소보다 더 두껍게
lighter : 부모 요소보다 더 얇게
숫자 : 100부터 900까지 100단위로 숫자가 작을수록 얇다.

상대적 두께

bolder는 bold보다 두껍다는 의미가 아니라 부모 요소에게 상속받은 값에서 계산해서 사용

font-size

글자의 크기를 지정
주로 단위로 지정. 기본값 16px

line-height

줄 높이(줄 간격) 지정
normal - 기본값
숫자 - 요소 자체 글꼴 크기의 배수로 지정
단위 - px, em 등의 단위로 지정
1.4에서 1.7 추천

font-family

글꼴 지정
글꼴이름 - 글꼴 후보 목록을 지정
- 후보 중 하나만 사용된다.

.box {
  font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;
}

폰트 후보를 지정해주는 이유는 사용자 os환경에 폰트가 없을수도 있으므로 없을 경우 사용할 수 있는 후보를 지정해주는 것이다.
모두 없을수도 있으므로 마지막에는 sans-serif처럼 계열로 지정해준다.

글꼴 계열

serif : 바탕체 계열
sans-serif : 고딕체 게열
monospace : 고정너비(가로폭이 동등한) 글꼴 계열
cursive : 필기체 계열
fantasy : 장식 글꼴 계열

문자(Text) 관련 속성

color

문자의 색상을 지정

색상 표현

색상 이름
- ex) red, blue
Hex 색상코드 : 16진수 색상
- ex)#000000
RGB :빛의 삼원색
- ex) rgb(255, 255, 255)
RGBA : 빛의 삼원색, 투명도
- ex) rgba(255, 0, 0, .5)
HSL : 색상, 채도, 명도
HSLA : 색상, 채도, 명도, 투명도

text-align

문자 정렬 방식을 지정
left : 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데 정렬
justify : 양쪽 맞춤
- justify는 줄이 모자라서 두 줄 이상 될때만 동작

text-decoration

문자의 장식을 지정
none : 선없음. 기본값
underline: 밑줄을 지정
overline : 윗줄을 지정
line-through: 중앙 선을 지정

text-indent

첫번째 줄의 들여쓰기를 지정
음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기)가 된다.
글자를 화면 밖으로 밀어내는 개념으로도 사용할 수 있다.

letter-spacing

문자간의 간격을 설정
normal : 기본 값
단위 : px, em 등 단위로 설정

word-spacing

단어 사이의 간격을 설정
속성은 letter-spacing과 같다.

띄움, 위치

float

요소를 좌우 방향으로 띄움(수평 정렬)
none : 요소 띄움 없음. 기본값
left : 왼쪽으로 띄움
right : 오른쪽으로 띄움
단순히 정렬되는 것이 아니라 쌓이는 것이라 right로 설정하면 오른쪽부터 1, 2, 3순으로 쌓인다.

float 해제

float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 해제해야 함

형제 요소에서 해제
- float 속성이 추가된 요소의 다음 형제요소에 clear 속성 추가
- 형제 요소가 없는 경우에는 해제할 수 없다는 단점이 있다.

.next {
  /* 양쪽 해제. 왼쪽 해제는 left 오른쪽은 right */
  clear: both;
}

부모 요소에서 해제 1
- float 속성이 추가된 요소의 부모요소에 overflow 속성 추가
- overflow: hidden은 float과 아무 상관이 없는 속성이기 때문에 좋지 않다.

.parent {
  overflow: hidden;
}

부모 요소에서 해제 2
- float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix 클래스 추가
- 가상 요소 선택자인 after을 사용하여 자식 요소가 마치는 시점에 clear: both; 를 추가하여 해제
- 주의할 점은 clearfix 클래스가 있는 자식 요소에는 float 속성을 가진 것들만 있어야 해제가 용이하게 된다.

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

display 수정

float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정됨
flex와 inline-flex는 block으로 수정되지 않는다.

clear

float 속성이 적용되지 않도록 지정
none : 요소 띄움 허용
left : 왼쪽 띄움 해제
right : 오른쪽 띄움 해제
both : 양쪽 모두 띄움 해제

position

요소의 위치 지정 방법의 유형을 설정
static : 유형 없음 / 배치 불가능. 기본값
relative: 요소 자신을 기준으로 배치
absolute : 위치 상 부모 요소를 기준으로 배치
fixed : 브라우저(뷰포트)를 기준으로 배치
sticky : 스크롤 영역 기준으로 배치

top, bottom

요소의 position 기준에 맞는 위, 아래쪽에서의 거리를 설정
auto : 브라우저가 계산
단위 : px, em 등 단위로 지정
% : 부모 요소의 세로 너비의 비율로 지정, 음수 값 허용

left, right

% : 부모 요소의 가로 너비의 비율로 지정, 음수 값 허용
다른 내용은 동일

relative

자기 자신을 기준으로 움직이다 보니까 형제 요소의 영향을 받거나 준다. (주의해서 사용해야 함)

absolute

부모 요소에 position 값이 없다면 뷰포트 기준으로 ( 윈도우 객체 ) 위치가 정해진다.

fixed

fixed의 특징은 스크롤바를 내려도 항상 그 위치에 요소가 위치한다는 것이다.

sticky

sticky는 스크롤과 함께 동작하기 때문에 top, bottom, left, right 속성 중 하나 이상이 필요하다.

요소 쌓임 순서

요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지를 결정

static을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임
position이 모두 존재한다면 z-index의 숫자 값이 높을 수록 위에 쌓인다.
1, 2번이 같다면 ‘HTML’ 마지막 코드일수록 위에 쌓인다.

z-index는 position이 있을 때만 동작한다.

0601

역량테스트 준비 8일차

오늘은 background 속성과 transition, transform 속성 그리고 애니메이션과 관련된 속성들에 대해 학습하였다.

배경

background

요소의 배경을 설정

background: 색상 이미지경로 반복 위치 스크롤특성;

background-color

색상 : 요소의 배경 색상
transparent: 투명

background-image

요소의 배경에 하나 이상의 이미지를 삽입
none : 이미지 없음. 기본값
url(“경로”) : 이미지 경로

.box {
  background-image: url("경로");
  width: 120px;
  height: 80px;
}

배경 이미지 삽입 시, 요소 크기가 설정되어야 보일 수 있다.
하나 이상의 배경 이미지를 삽입할 경우 ,로 구분한다. 먼저 작성된 이미지가 더 위에 쌓인다.

background-repeat

배경 이미지의 반복을 설정
repeat : 배경 이미지를 수직, 수평으로 반복. 기본값
repeat-x : 배경 이미지를 수평으로 반복
repeat-y : 배경 이미지를 수직으로 반복
no-repeat : 반복 없음

background-position

배경 이미지의 위치를 설정
% : 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100%. x축 y축 순
방향 : right, left, bottom, top, center를 조합하여 사용
방향과 단위를 동시에 이용할 때는 x축 y축 순을 지켜서 사용해야 한다.

background-attachment

요소가 스크롤될 때 배경 이미지의 스크롤 여부 설정
scroll : 배경 이미지가 요소를 따라서 같이 스크롤 됨
fixed : 배경 이미지가 뷰포트에 고정되어, 요소가 같이 스크롤되지 않음
local : 요소 내 스크롤 시 배경이미지가 같이 스크롤 됨

background-size

배경 이미지의 크기를 지정
auto : 배경 이미지가 원래의 크기로 표시됨
단위 : px, em 등 단위로 지정. width만 입력하면 비율에 맞게 지정됨
cover : 배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐. 이미지가 잘릴 수 있음
contain : 배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐. 이미지가 잘리지 않음

전환 & 변환

transition

css 속성의 시작과 끝을 지정하여 중간 값을 애니메이션
주로 변환하기 전의 요소에 지정
transition-property : 전환 효과를 사용할 속성 이름을 설정. 기본값 all
transition-duration : 전환 효과의 지속시간 설정. 기본값 0s
transition-timing-function : 타이밍 함수 지정. 기본값 ease
transition-delay : 전환 효과의 대기시간 설정. 기본값 0s

타이밍 함수

ease : 빠르게 - 느리게
linear : 일정하게
ease-in : 느리게 - 빠르게
steps(n) : n번 분할된 애니메이션

transform

요소의 변환 효과를 지정

transform 2D 속성

translate(x, y) : 이동(X축, Y축). 단위는 일반 단위
scale(x, y) : 크기(X축, Y축). 단위는 없음(배수)
rotate(degree) : 회전(각도). 단위는 deg
skew(x-deg, y-deg) : 기울임(X축, Y축). 단위는 deg
position을 이용해서 이동하는 것은 지양하고, transform의 translate함수를 사용하자.
띄워쓰기로 동시에 2개 이상 함수를 사용할 수 있다.

transform 3D 변환 함수

translate3d(x, y, z) : 이동(X축, Y축, Z축). 단위는 일반 단위
scale3d(x, y, z) : 크기(X축, Y축, Z축)
ratateX(x) : 회전(X축). 단위 deg
ratateY(y) : 회전(Y축). 단위 deg
ratateZ(z) : 회전(Z축). 단위 deg
perspective(n) : 원근법(거리). 단위는 일반 단위
perspective() 함수는 transform 속성 중 제일 앞에 있어야지 동작한다.

변환 속성

transform-origin

요소 변환의 기준점을 설정

.box {
  transform-origin: X축 Y축 Z축;
}

값으로 left, right, top, bottom, center, %, 일반 단위를 넣을 수 있다.
기본 값은 50%이다.

transform-style

3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
flat : 자식 요소의 3D 변환을 사용하지 않음. 기본값
preserve-3d : 자식 요소의 3D 변환을 사용함

perspective

하위 요소를 관찰하는 원근 거리를 설정
단위 : px, em 등 단위로 설정

perspective 속성과 함수의 차이점

perspective 속성은 관찰 대상의 부모 요소에 적용하여 하위 요소들을 관찰하는 원근 거리를 설정하며, 함수는 관찰 대상에 직접 적용하여 그 대상을 관찰하는 원근 거리를 설정한다.

perspective-origin

원근 거리의 기준점을 설정
X축과 Y축 설정. transform-origin과 사용법이 비슷하다.

backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김을 설정
visible : 뒷면 숨기지 않음. 기본값
hidden: 뒷면 숨김

matrix()

요소의 2차원 변환 효과를 지정
scale(), skew(), translate() 그리고 rotate()를 지정
요소에 일반 변환 함수를 사용하더라도 브라우저에 의해 matrix 함수로 계산되어 적용된다.
일반적인 경우는 matrix 함수가 아닌 일반 변환 함수를 사용하면 된다.

애니메이션 & 다단

animation

요소에 애니메이션을 설정/제어

animation: 애니메이션이름 지속시간 [타이밍 함수 대기시간 반복횟수 반복방향
  전후상태 재생/정지];

@keyframes

2개 이상의 애니메이션 중간 상태(프레임)을 지정

@keyframes 애니메이션이름 {
  0% {
    속성: 값;
  }
  50% {
    속성: 값;
  }
}

animation-name

@keyframes 규칙의 이름을 지정
기본값 none

animation-duration

애니메이션의 지속 시간 설정
기본값 0s

animation-timing-function

타이밍 함수 지정
사용법은 transition-timing-function과 같다.

animation-delay

애니메이션의 대기 시간 설정
음수가 허용. 그 값만큼 애니메이션이 앞서 시작
단축 속성의 경우 delay가 duration보다 앞에 적지만 않으면 된다.

animation-iteration-count

애니메이션 반복 횟수를 설정
숫자 : 반복 횟수를 설정
infinite : 무한 반복

animation-direction

애니메이션의 반복 방향을 설정
normal : 정방향만 반복
reverse : 역방향만 반복
alternate : 정방향에서 역방향으로 반복(왕복)
alternate-reverse : 역방향에서 정방향으로 반복(왕복)

animation-fill-mode

애니메이션의 전후 상태를 설정
none : 기존 위치 시작 -> 애니메이션 시작 위치 -> 동작 -> 기존 위치에서 끝
forwards : 기존 위치 시작 -> 애니메이션 시작 위치 -> 동작 -> 애니메이션 끝 위치에서 끝
backwards : 애니메이션 시작 위치 시작 -> 동작 -> 기존 위치에서 끝
both : 애니메이션 시작 위치 시작 -> 동작 -> 애니메이션 끝 위치에서 끝

animation-play-state

애니메이션의 재생과 정지를 설정
running : 애니메이션을 동작. 기본값
paused : 애니메이션 동작을 정지

Multi-Columns

일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하여, 가독성 확보

columns

다단을 정의하는 단축 속성
auto : 브라우저가 단의 너비와 개수를 설정
column-width : 단의 최적 너비를 설정. 단위로 지정
column-count : 단의 개수를 설정

.text {
  columns: 100px 2;
}

각 단이 줄어들 수 있는 최적 너비(최소 너비)를 설정하며, 요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우 단의 개수가 조정

column-gap

단과 단 사이의 간격 설정
normal : 브라우저가 단과 단 사이의 간격을 설정(1em). 기본값
단위 : px, em 등 단위로 지정

column-rule

단과 단 사이의 선을 지정
border 처럼 사용하면 된다.
구분선은 단과 단 사이의 간격 중간에 위치한다.
색을 명시하지 않으면 기본 색은 검정색이지만 글자 색상을 지정하면 그 색을 따라간다.

0602

역량테스트 준비 9일차

1차 테스트가 점점 코앞으로 다가오고 있다.
오늘은 flex와 grid에 대해 학습했다.
최근에 게시판 프로젝트를 진행하면서 레이아웃을 잡을 때 flex에 대해서 개념이 없어서 고생했던 기억이 있다.
이번 기회를 통해 css의 핵심 개념인 flex와 grid에 대해 잘 정리한 것 같다.

플랙스

flex

flex는 2개의 개념으로 나뉘는데 Container와 items로 나뉜다.
Container는 items를 감싸는 부모 요소이며, 각 item을 정렬하기 위해선 Container이 필수이다.

Flex Container 속성

display

Flex Conatiner를 정의한다.
display: flex : Flex Conatiner 자체가 블록 요소처럼 사용된다.
display: inline-flex : Flex Conatiner 자체가 인라인 요소처럼 사용된다.

flex-flow

단축 속성으로 Flex Items의 주 축을 설정하고 Items의 여러 줄 묶음도 설정한다.

flex-flow: 주축, 여러줄 묶음;

flex-direction

items의 주 축을 설정한다.
row : items를 수평축으로 표시(왼쪽 -> 오른쪽). 기본값
row-reverse : items를 row의 반대 축으로 표시
column : items를 수직축으로 표시(위 -> 아래)
column-reverse: items를 column의 반대 축으로 표시

주 축(main-axis)과 교차 축(cross-axis)

값 row는 items를 수평축으로 표시하므로 주 축이 수평이고 교차 축은 수직이 된다.
column은 그 반대의 경우이다.
방향에 따라 주 축과 교차 축은 달라지는 상대적 개념이다.

시작점과 끝점

주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다.
방향에 따라 시작점과 끝점이 달라진다.
주축의 방향이 reverse가 되어도 교차축의 시작점과 끝점은 변하지 않는다.

flex-wrap

items의 여러 줄 묶음을 설정
nowrap : 모든 items를 여러 줄로 묶지 않음(한 줄에 표시). 기본값
wrap : items를 여러 줄로 묶음
wrap-reverse : items를 wrap의 역 방향으로 여러 줄로 묶음
기본적으로 items는 한 줄에서만 표시되고 줄 바꿈 되지 않는다.

justify-content

주 축의 정렬 방법을 설정
flex-start : items를 시작점으로 정렬
flex-end : items를 끝점으로 정렬
center : items를 가운데 정렬
space-between : 시작 item는 시작점에, 마지막 items는 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬됨
space-around : items를 균등한 여백을 포함하여 정렬

align-content

교차 축의 정렬 방법을 설정
flex-wrap 속성을 통해 Items가 여러 줄이고 여백이 있을 경우에만 사용할 수 있다.
items가 한 줄일 경우는 align-items 속성 사용할 것
stretch : Container의 교차 축을 채우기 위해 items를 늘림. 기본값
나머지 속성은 justify-content와 동일

align-items

교차 축에서 items의 정렬 방법을 설정
items가 한 줄일 경우 많이 사용
속성은 stretch, flex-start, flex-end, center이 있고 align-content와 동일하다
baseline : items를 문자 기준선에 정렬

display: flex;
justify-content: center;
align-items: center;

자주 쓰일만한 표현
하나의 요소를 컨테이너로 만들고 그 안의 아이템을 중앙 정렬한다.

Flex Items

order

item의 순서를 설정
숫자가 클수록 순서가 밀리고, 음수가 허용된다.
숫자가 같을 때는 html 구조 순서대로 정렬된다.

flex-grow

item의 증가 너비 비율을 설정
숫자가 더 크면 더 많은 너비를 가진다.
item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다. 기본값 0

flex-shrink

item이 감소하는 너비의 비율을 설정
숫자가 더 크면 더 많은 너비가 감소
item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다. 기본값 1

flex-basis

item의 기본 너비를 설정
auto : width, height 등이 속성으로 item의 너비를 설정할 수 있다. 기본값
단위 : 단위 값이 주어질 경우 너비를 설정할 수 없다.

flex

item의 너비를 설정하는 단축 속성

flex: flex-grow flex-shrink flex-basis;

flex-basis를 개별 속성으로 사용할 때는 기본값이 auto이지만 단축 속성에서 명시하지 않는다면 기본값이 0이 된다.

align-self

align-items는 Container 내 모든 items의 정렬 방법을 설정한다.
필요에 의해 일부 item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있다.
이 속성은 align-items 속성보다 우선한다.
auto : Container의 align-items 속성을 상속받음
다른 속성은 align-items와 같다.

그리드

2차원의 레이아웃 시스템을 제공한다.
flex box는 1차원 레이아웃을 위한 것이며, 좀 더 복잡한 레이아웃을 위해 Grid를 사용할 수 있다.

Grid Container

display

그리드 컨테이너를 정의한다.
grid : block 특성의 그리드 컨테이너를 정의
inline-grid : inline 특성의 Grid Container를 정의

grid-template-rows

명시적 행의 크기를 정의
대괄호 []를 이용하여 선의 이름을 정할 수 있다.
fr(공간 비율) 단위를 사용할 수 있다.
repeat() 함수를 사용할 수 있다.

grid-template-columns

명시적 열의 크기를 정의
대괄호 []를 이용하여 선의 이름을 정할 수 있다.
fr(공간 비율) 단위를 사용할 수 있다.
repeat() 함수를 사용할 수 있다.

.container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);

  /* 100px 200px 100px 200px */
  grid-template-columns: repeat(2, 100px 200px);
}

행은 100픽셀씩 3분할 하고, 열은 1:1:1 비율로 설정한다.

grid-template-areas

지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성한다.
grid-area는 컨테이너가 아닌 아이템에 적용하는 속성
.를 사용하거나 명시적으로 none을 입력해 빈 영역을 정의할 수 있다.

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}
.items {
  border: 10px solid red;
}
.items:nth-child(1) {
  grid-area: header;
}
.items:nth-child(2) {
  grid-area: main;
}
.items:nth-child(3) {
  grid-area: aside;
}
.items:nth-child(4) {
  grid-area: footer;
}

row-gap

행과 행 사이의 간격을 지정

column-gap

열과 열 사이의 간격을 지정

/* 단축속성 gap */
gap: row-gap column-gap;

grid-auto-rows

암시적 행의 크기를 정의

grid-auto-columns

암시적 열의 크기를 정의
암시적 크기가 적용된 행과 열은 양수 라인 번호만 사용할 수 있다.

grid-auto-flow

배치하지 않은 아이템을 어떤 방식의 자동 배치 알고리즘으로 정의할지 정의한다.
배치한 아이템은 grid-area를 사용한 아이템을 의미
row : 각 행 축을 따라 차례로 배치. 기본값
row dense : row와 같지만, 빈 영역을 채움
column : 각 열 축을 따라 차례로 배치
column dense : column과 같지만, 빈 영역을 채움

grid-template

grid-template-rows, grid-template-columns, grid-template-areas의 단축 속성

.container {
  grid-template: <grid-template-rows> / <grid-template-columns>;
  grid-template: <grid-template-areas>;
}

.container {
  display: grid;
  grid-template:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}

grid

grid-template-xxx와 grid-auto-xxx의 단축 속성

.container {
  grid: <grid-template>;
  grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
  grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}

grid-auto-flow를 작성할 때는 auto-flow 키워드를 사용한다.
/로 구분해 작성하는 위치가 곧 row, column 값을 의미한다.
그래서 row, column 값은 작성하지 않는다.
dense 값은 auto-flow 뒤에 붙여준다.

align-content

그리드 콘텐츠를 수직 정렬
그리드 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야 한다.
normal : stretch와 같다.
start : 시작점 정렬
center : 수직 중앙 정렬
end : 끝점 정렬
space-around : 각 행 위아래에 여백을 고르게 정렬
space-between : 첫 행은 시작점, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly : 모든 여백을 고르게 정렬

justify-content

그리드 콘텐츠를 수평 정렬
그리드 콘텐츠의 가로 너비가 그리드 컨테이너보다 작아야 한다.
속성은 align-content와 같이 사용된다.

align-items

그리드 아이템들을 수직 정렬
그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 한다.
normal : stretch와 같다.
start : 시작점 정렬
center : 수직 중앙 정렬
end : 끝점 정렬

justify-items

그리드 아이템들을 수평 정렬
그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야 한다.
normal : stretch와 같다.
start : 시작점 정렬
center : 수직 중앙 정렬
end : 끝점 정렬

Grid items

grid-row

grid-row-start과 grid-row-end의 단축 속성
각 속성을 /로 구분해야 한다.

.item {
  grid-row-start: span 3;
  grid-row-end: 4;
}
.item {
  grid-row: span 3 / 4;
}
.item {
  grid-row: 1 / 4;
}

모두 같은 의미이다.

grid-column

grid-column-start과 grid-column-end의 단축 속성

grid-area

grid-row-start, grid-row-end, grid-column-start, grid-column-end의 단축 속성
혹은 grid-template-areas가 참조할 영역 이름을 설정할 수도 있다.
영역 이름 설정 시, grid-row와 grid-column 개념은 무시된다.

.item {
  grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> /
    <grid-column-end>;
}

align-self

단일 그리드 아이템을 수직 정렬
그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야 한다.
속성은 align-items와 같다.

justify-self

단일 그리드 아이템을 수평 정렬
그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야 한다.
속성은 justify-items와 같다.

order

그리드 아이템이 자동 배치되는 순서를 변경할 수 있다.
숫자가 작을수록 앞서 배치

z-index

아이템이 쌓이는 순서를 변경
클수록 앞에 쌓임

Grid Functions

repeat

repeat() 함수는 행/열의 크기 정의를 반복한다.
반복되는 횟수와 행/열의 크기 정의를 인수로 사용
grid-template-rows와 grid-template-columns에서 사용

minmax

minmax() 함수는 행/열의 최소/최대 크기를 정의
첫 번째 인수는 최솟값이고 두 번째 인수는 최댓값이다.
grid-template-rows ,grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용

.container {
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
}

fit-content

fit-content() 함수는 행/열의 크기를 그리드 아이템이 포함하는 내용 크기에 맞춤
내용의 최대 크기를 인수로 사용

.container {
  grid-template-columns: fit-content(300px) fit-content(300px);
}

그리드 단위

fr

사용 가능한 공간에 대한 비율

.container {
  grid-template-columns: 1fr 2fr 100px 25%;
}

그리드 컨테이너의 3번째 컬럼에 100px, 4번째 컬럼에 25%를 사용하고 남은 공간을 1번째 컬럼에 ‘1/3’, 2번째 컬럼에 ‘2/3’ 만큼 사용

min-content, max-content

그리드 아이템이 포함하는 내용의 최소, 최대 크기를 의미

.container {
  grid-template-columns: min-content 1fr;
}

auto-fill, auto-fit

행/열 개수를 그리드 컨테이너 및 행/열 크기에 맞게 자동으로 조정
repeat() 함수와 같이 사용하며, 행/열과 아이템 개수가 명확할 필요가 없을 경우 유용
auto-fill과 auto-fit은 간단한 차이점을 제외하면 동일하게 동작
repeat의 첫 번째 인수를 auto-fill이나 auto-fit으로 하면 컨테이너 크기가 아이템들을 수용하기 충분하지 않을 경우 아이템을 자동으로 줄 바꿈 처리하고, 그에 맞게 암시적 행/열도 자동으로 수정

auto-fill과 auto-fit의 차이

auto-fill과 auto-fit은 차이점은 그리드 컨테이너가 하나의 행/열에 모든 아이템을 수용하고 남는 공간이 있을 때 auto-fill은 남는 공 간을 그대로 유지하고, auto-fit은 남는 공간을 축소한다.

0603

역량테스트 준비 10일차

내일이면 테스트 당일이다.
10일간의 길지 않은 준비기간이었지만, 배운 점도 많고 좋은 시간이었다.
열심히 썼던 자기소개서를 다듬고 제출하였다.
열심히 준비한만큼 좋은 결과가 있었으면 좋겠다.

SASS

개요

Sass는 전처리기. CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 CSS가 동작하지만 CSS의 불편함을 확장 기능으로 상쇄해주는 것이다.
웹에서는 CSS만 동작하기 때문에 Sass로 코딩한 뒤, CSS로 컴파일해서 동작시킨다.

Sass와 SCSS의 차이점

SCSS는 Sass의 모든 기능을 지원하는 CSS의 상위집합이다.
CSS와 거의 같은 문법으로 Sass 기능을 지원
SCSS는 중괄호와 세미콜론이 있는 반면, Sass는 유효범위를 들여쓰기로 구분한다.
믹스인 기능을 사용할 때, SCSS는 @mixin과 @include로 기능을 사용하지만 Sass는 =와 +기호로 기능을 사용

문법

주석

Sass는 JavaScript처럼 두 가지 스타일의 주석을 사용한다.

// 컴파일되지 않는 주석
/* 컴파일되는 주석 */

Sass의 경우 컴파일되는 여러 줄 주석을 사용할 때 각 줄 앞에 *를 붙여야 하고, 라인을 맞춰줘야 하지만 SCSS는 그럴 필요가 없다.

데이터 종류

Numbers : 숫자
- 숫자에 단위가 있거나 없다.
Strings : 문자
- 문자에 따옴표가 있거나 없다.
Colors : 색상 표현
Booleans : 논리
Nulls : 아무것도 없음
- 속성값으로 null이 사용되면 컴파일하지 않는다.
Lists : 공백이나 ,로 구분된 값의 목록
- ()를 붙이거나 붙이지 않는다.
- ex) (apple, orange) , apple orange
Maps : Lists와 유사하나 값이 key: value 형태
- ()를 꼭 붙여야 한다.
- ex) (apple: a, orange: o)

중첩

Sass는 중첩 기능을 사용할 수 있다.
상위 선택자의 반복을 피하고 편리하게 복잡한 구조를 작성할 수 있다.

.section {
  width: 100%;
  .list {
    padding: 20px;
  }
}

상위 선택자 참조

중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환한다.

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

/* 컴파일 후 */
.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

at-root (중첩 벗어나기)

중첩에서 벗어나고 싶을 때 @at-root 키워드를 사용한다.
중첩 안에서 생성해서 중첩 밖에서 사용해야 하는 경우 유용

.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

/* 컴파일 후 */
.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

중첩 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 다음과 같이 사용할 수 있다.

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  }
}

/* 컴파일 후 */
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
}

변수

반복적으로 사용되는 값을 변수로 지정할 수 있다.
변수 이릅 앞에는 항상 $를 붙인다.

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

/* 컴파일 후 */
.box {
  width: 200px;
  margin-left: 200px;
  background: #e96900 url("/assets/images/bg.jpg");
}

유효 범위

변수는 선언된 블록 {} 내에서만 유효범위를 가진다.

변수 재 할당

한 번 할당한 변수를 다른 변수에 다시 재 할당할 수 있다.

!global (전역 설정)

!global 플래그를 사용하면 변수의 유효범위를 전역으로 설정할 수 있다.

!default (초깃값 설정)

!default 플래그는 할당되지 않은 변수의 초깃값을 설정한다.
할당되어있는 변수가 있다면 변수가 기존 할당 값을 사용한다.
변수의 값을 설정하겠지만, 기존 변수가 있을 경우에는 적용하지 않겠다는 의미와 같다.

#{} 문자 보간

문자 보간법을 이용해서 코드의 어디든지 변수 값을 넣을 수 있다.

가져오기(Import)

@import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합된다.
가져온 파일에 정의된 모든 변수 또한 Mixins 등을 주 파일에서 사용할 수 있다.
Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있다.
- 파일 확장자가 .css일 때
- 파일 이름이 http://로 시작되는 경우
- url()이 붙었을 경우
- 미디어쿼리가 있는 경우
파일 이름을 ,로 구분하여 여러 파일을 가져올 수도 있다.

파일 분할

프로젝트 규모가 커지면 파일을 나눠서 관리하는데, 모든 파일 컴파일 시 각각의 .css 파일로 나눠서 저장된다면 문제가 될 수 있다.
그래서 파일 이름 앞에 _를 붙여 _header.scss와 같이 가져오면 컴파일 시 ~.css 파일로 컴파일 하지 않는다.

연산

Sass는 기본적인 연산 기능을 지원한다.
산술 연산자 : +, -, *, /, % - 곱하기는 하나 이상의 값이 반드시 숫자여야 하고, 나누기는 오른쪽 값이 반드시 숫자
비교 연산자 : ==, !=, <, >, <=, >=
논리 연산자 : and, or, not

숫자

일반적으로 px 단위로 연산을 합니다만, 상대적 단위(%, em)의 연산의 경우 CSS calc()로 연산해야 함
나누기 연산의 경우 다음과 같은 조건을 충족해야 함
- 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환
- 값이 ()로 묶여있는 경우
- 값이 다른 산술 표현식의 일부로 사용

문자

문자 연산에는 +가 사용
문자 연산의 첫 번째 피연산자에 따옴표가 붙어있다면 연산 결과에 따옴표로 묶는다.
첫 번째 피연산자에 따옴표가 붙어있지 않다면 연산 결과도 따옴표를 처리하지 않는다.

색상

rgba에서 alpha 값은 연산되지 않으며 서로 동일해야 다른 값의 연산이 가능
alpha 값을 연산하기 위한 색상 함수를 사용해야 한다.

재활용(Mixins)

스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 기능

선언

// SCSS
@mixin 믹스인이름 {
	스타일;
}

// Sass
=믹스인이름
	스타일

@include

선언된 믹스인을 사용하기 위해서 필요

// SCSS
@include 믹스인이름;

// Sass
+믹스인이름

인수

Mixin은 함수처럼 인수를 가질 수 있다.
하나의 Mixin으로 다양한 결과를 만들 수 있다.
인수는 기본값을 가질 수 있다.
@include 포함 단계에서 별도의 인수가 전달되지 않으면 기본값이 사용된다.
전달할 인수를 입력할 때 명시적으로 키워드를 입력하여 작성할 수 있다.
입력할 인수의 개수가 불확실한 경우 가변 인수 …를 사용할 수 있다.

// SCSS
@mixin 믹스인이름($매개변수: 기본값) {
  스타일;
}
@include 믹스인이름(인수);

// Sass
=믹스인이름($매개변수: 기본값)
  스타일

+믹스인이름(인수)

@content

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있다.

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  }
}

확장

특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우 사용

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

부작용을 가지고 있을 수 있기 때문에 사용을 권장하지 않는다.

함수

함수는 Mixins와 거의 유사하지만 반환되는 내용이 다르다.
Mixin은 지정한 스타일을 반환하는 반면, 함수는 보통 연산된 특정 값을 @return 지시어를 통해 반환

$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns);
}

.box_group {
  width: $max-width;

  .box1 {
    width: columns(); // 1
  }
  .box2 {
    width: columns(8);
  }
  .box3 {
    width: columns(3);
  }
}

조건과 반복

if (함수)

조건의 값에 따라 표현식 중 하나만 반환.
조건의 값이 true 이면 표현식1을, false이면 표현식2를 실행

$width: 555px;
div {
  width: if($width > 300px, $width, null);
}

if(지시어)

조건에 따른 분기 처리가 가능하며, @else, if와 같이 사용할 수 있다.

@for

스타일을 반복적으로 출력
through를 사용하는 방식은 through까지, to는 주어진 값 직전까지만 반복해서 사용

// 1부터 3번 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width: 20px * $i;
  }
}

// 1부터 3 직전까지만 반복(2번 반복)
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width: 20px * $i;
  }
}

each

List와 Map 데이터를 반복할 때 사용

// List Data
$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    li.#{$fruit} {
      background: url("/images/#{$fruit}.png");
    }
  }
}

$fruits-data: (
  apple: korea,
  orange: china,
  banana: japan,
);

@each $fruit, $country in $fruits-data {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

Map 데이터를 반복할 경우 하나의 데이터에 두 개의 변수가 필요

@while

조건이 false로 평가될 때까지 내용을 반복

$i: 6;

@while $i > 0 {
  .item-#{$i} {
    width: 2px * $i;
  }
  $i: $i - 2;
}

0604

역량테스트를 마치며

이번 테스트를 준비하며 HTML, CSS에 대한 기본 개념을 확실히 잡았다.
또한 자기소개서를 작성하며 새로운 경험을 한 것 같다.
이전에 이런 프로그램에 지원했을 때에 비해 쓸 내용이 많아진 것으로 봐서는 지금까지 열심히 해왔다는 생각이 들어서 뿌듯했다.
최선을 다한만큼 좋은 결과가 있으면 좋겠다고 기대해본다.

0605

MongoDB

데이터베이스 파티셔닝

데이터베이스를 분리하여 여러 서버에 분산 저장 및 관리하는 기술

파티셔닝의 2가지 유형

수직 파티셔닝

하나의 테이블의 컬럼들을 여러 테이블로 분리하는 방법
RDB에서 많이 사용하는 방법

수평 파티셔닝(= 샤딩)

로우 별로 데이터베이스를 분할하는 방법
샤드 : 분할된 각 데이터 조각을 의미하며 둘 이상의 서버에 분산 저장

0606

Sharding in mongoDB

a method for distributing data across multiple machines by horizontal scaling to meet the demands of data growth
adds more machines (scale out) to support data growth and the demands of read and write operations
for storage and load distribution

샤드 클러스터

shards
- contains a subset of the shared data and can be deployed as a replica set
config servers
- store metadata persistently and configuration settings for the cluster
routers (mongos)
- cache the cluster metadata from config servers and act as a query router, providing an interface between client applications and the shared cluster.
샤드 키
- used to distribute the collections’s documents across shards
- consists of a field or fields that exist in every document in the target collection
청크
- a contiguous range of shard key values within a particular shard
- each chunk has an inclusive lower and exclusive upper range based on the shard key

Twitter Facebook LinkedIn

이정훈

0531

역량테스트 준비 7일차

박스 모델

길이 및 크기 속성

width, height

max-width, max-height

min-width, min-height

margin

마진 중복

마진 중복 계산법

padding

크기 증가

border

border-width

border-style

border-color

box-sizing

display

overflow

opacity

글꼴, 문자

font

font-style

font-weight

상대적 두께

font-size

line-height

font-family

글꼴 계열

문자(Text) 관련 속성

color

색상 표현

text-align

text-decoration

text-indent

letter-spacing

word-spacing

띄움, 위치

float

float 해제

display 수정

clear

position

top, bottom

left, right

relative

absolute

fixed

sticky

요소 쌓임 순서

0601

역량테스트 준비 8일차

배경

background

background-color

background-image

background-repeat

background-position

background-attachment

background-size

전환 & 변환

transition

타이밍 함수

transform

transform 2D 속성

transform 3D 변환 함수

변환 속성

transform-origin

transform-style

perspective

perspective 속성과 함수의 차이점

perspective-origin

backface-visibility

matrix()

애니메이션 & 다단

animation

@keyframes

animation-name

animation-duration