Crafting My Future with Code

auto : Default 값, 원본 이미지의 크기를 유지하며, 이미지가 요소보다 크면 자동으로 축소되고, 작으면 확대됩니다.

왜곡이 발생할 수 있습니다

px px  : 너비, 높이의 크기를 지정합니다. 이미지가 해당 크기로 고정됩니다. 원본 이미지와 크기가 다르면 왜곡이 발생합니다. 

px : 너비만 크기를 지정하며, 높이는 자동으로 조정됩니다. 원본 이미지와의 비율을 유지하므로 왜곡이 발생하지 않습니다. 

100% 100%: 너비와 높이를 각각 요소의 100%로 지정합니다. 이미지가 부모요소와 동일한 크기로 확대됩니다. 왜곡이 발생할 수 있습니다. 

50% : 너비와 높이를 각각 요소의 50%로 지정합니다. 이미지가 부모요소의 반만큼 크기로 축소됩니다. 비율을 유지하므로 왜곡이 발생하지 않습니다. 

(background-size의 백분율 값은 해당 속성이 적용된 요소의 부모요소와의 관계를 나타내는 수치입니다)

cover : 배경 이미지가 요소를 완전히 덮도록 크기를 조절합니다. 이미지의 일부가 잘릴 수 있지만 왜곡이 발생하지 않습니다. 

contain : 배경 이미지가 요소 안에 딱 맞도록 크기를 조절합니다. 이미지의 일부가 보일 수 있지만 왜곡이 발생하지 않습니다. 

initial : 기본값으로 설정하며, 원본 이미지의 크기를 유지합니다. 이미지가 요소보다 크면 자동으로 축소되고, 작으면 확대됩니다.

왜곡이 발생할 수 있습니다. 

https://www.w3schools.com/cssref/playit.php?filename=playcss_background-size&preval=cover

Transform

2D변환 함수

• translateX : X축을 기준으로 지정한 값만큼 이동한다. (%, px ,vh 등)
• translateY :위와 동일
• translate : X ,Y를 동시 이용가능
• scale : 크기 조절가능 
  • scale(x,y) , scaleX(), scaleY() 등이 있다.
• rotate : 방향전환 (단위 : deg)
• skew : 기울임
  • skew(x, y) , skewX(), skewY() 등이 있다.

3D 변환 함수

• translateZ(z) : Z축 이동
• translate3d(x,y,z)  x, y ,z 축 이동
• scaleZ(z) : z축의 크기
  • sclae3D(x,y,z)
• rotateZ(z) : z축의 방향전환
  • rotate3d(x,y,z,a) x,y,z축 +  각도
• perspective(n) 원근법(거리),  단위 px

그 외

backface-visibility

• visible (기본값) : 뒷면이 보인다.
• hidden : 뒷면이 보이지 않는다.

See the Pen Untitled by J-Plum (@J-Plum) on CodePen.

6번과 7번을 보자면 backface-visibility의 기본값인 visible인 경우 뒷면이 보이지만.

7번의 경우 backface-visibility : hidden을 사용시 뒷면이 보이지 않습니다.

트랜지션

transition : 

• property : 어떠한 속성에 적용할 것인가..
  • all ( 기본값 ) : 모든 속성에 적용
  • 속성이름
• duration : 얼마 동안 할것인지. 단위는 s, ms (필수 옵션)
• timing-function
  
  • ease (기본값) : 느리게  => 빠르게 => 느리게
  • ease-in : 느리게 => 빠르게
  • ease-out :  빠르게 => 느리게
  • ease-in-out  : 느리게 => 빠르게 => 느리게 (ease 보다는 변화가 더 심하다)
  • linear : 일정한 속도로 애니메이션을 진행
  • steps : 입력한 만큼 나누어서 ex) timing-function : steps(5,end) 5번에 나누어서 끝까지
  • cubic-bezier : 자신만의 값을 정의
  • 위의 동작들도 한번에 가능하다
  • easings.net/ko 에서 다른 timing-function도 확인 가능

/*
transition-property: background-color;
transition-duration : 300ms;
transition-timing-function : linear;
*/

/*아래처럼 한줄로 줄일 수 있다.*/
transition : background-color 300ms linear;

See the Pen transition by J-Plum (@J-Plum) on CodePen.

1. 위의 코드에서 transition : 1s는 active(클릭시)시
     width 가 100px 이던 div가 300px까지 변하는 시간이 1초가 걸린다는 의미이다

2. 두번째 div의 경우 변화는 0.3초만에 끝나지만 색상이 바뀌는데 2초가 걸립니다.

    설명을 하자면 active(클릭시) width가 300px가 되는 것을 300ms로 , 그후 별도로 지정해준  background-color  2s로

    background-color 가 2초에 걸쳐서 바뀝니다.

3. 마지막 div의 경우 transition : 2s 1s; 로 되어있습니다.

    첫 번째 2s는 변화하는데 걸리는 시간이 2초, 그리고 그 뒤의 1s의 경우는 지연시간입니다.
    마우스에서 클릭할 때와 손을 때도 변화하기까지 1초의 지연시간이 생깁니다.

정렬을 하기위한 요소의 부모 요소에 display: flex를 사용한다.

display : flex

• flex box로 만든다. flex는 기본적으로 왼쪽에서 오른쪽으로 정렬됨.

flex-direction (중심축 지정..?)

• reverse 같은경우 item의 순서또한 바뀐다.
• row : 왼쪽끝에서 오른쪽 (중심축 x축)

• row-reverse: 오른쪽 끝에서 왼쪽 (중심축 x축)

• column : 좌측 상단에서 아래로 (중심축 y축)

• column-reverse : 좌측 하단에서 위로 (중심축 y축)

flex-warp

• nowrap : 기본값으로써 아이탬이 가득 차도 줄구분이 되지 않는다.flexbox 내부에서 아이템이 벗어나지 못하도록 한다

• wrap : 가득 차게되면 자동으로 넘어간다. (reverse 도 있다)

flex-flow

flex-flow : 위의 direction과 wrap를 합친것

• ex) flex-flow : column nowrap; 등으로 사용 가능

justify-content

중심축에서 아이탬을 어떻게 배치할 것인지 (기본값 flex-start;)

flex line에서 정렬

justify의 경우 flex-direction 랑 다르게 reverse의 경우에 item의 순서가 바뀌지 않는다

말 그대로 배치방향만을 조정한다.

• flex-start : 중심축을 기준으로
  x축기준 왼쪽 → 오른쪽
  y축기준 위 → 아래

• flex-end : 중심축을 기준으로
  x축 기준 오른쪽 → 왼쪽 
  y축기준 아래 → 위

• center : item을 가운대로 맞춘다.

• space-around : item 좌우에 공간을 만든다 (item별 좌우 같은 공간)

• space-evenly : item사이의 간격이 같은 공간을 만든다. 

• space-between : 좌우 item은 좌우에 딱 붙고 사이의 item만 간격을 만든다.

align-content

반대축에서 아이탬을 어떻게 배치할 것인지 (기본값 stretch)

flex line에서 정렬 nowarp인 경우 의미가 없다.

(한줄에 그리기 때문에 그 줄에서 정렬을 해도 의미가없다.)

• space-around : item을 상하에 공간을 만든다
• space-evenly : item사이의 간격이 같은 공간을 만든다.
• space-between : 상하 item은 상하에 딱 붙고 사이의 item을 기준으로 간격을 만든다.

align-items

반대축을 기준으로 item을 정렬한다.

• center : 반대축 가운대 정렬

• baseline : text가 모두 균등하게 보여질 수 있도록 베이스라인에 맞춰 정렬

item에 들어가는 속성값

item에 지정되는 속성값

• order : 배치 순서를 지정해준다. (잘 안씀.. 알고만 있자.)
  • 기본값은 0

• flex-grow(중요) : container를 가득 채우려고한다. 기본값은 0

• flex-shrink : container 가 작아질 때의 비율
  값이 클수록 container 작아질때 그만큼 더 작아진다

• flex-basis : item들이 어느정도의 공간을 차지할지 세부적으로 조절해준다.

align-self : justify,align

Flex box가 아닐때의 정렬

margin : auto

• margin : auto를 사용하면 브라우저에서 블럭레벨의 margin을 좌우로 골고루 나누어준다.
• div는 블럭레벨이기 때문에 자동적으로 margin이 들어와있다. 블럭은 한줄에 하나만 들어가야하기 때문에 자동으로 margin이 들어있다. (오른쪽으로)
• 한줄에 하나만 가능 , 수평적 가운대 정렬만 가능하다.

text-align : center

• 수직정렬은 불가능하다.
• 텍스트가 아닌 경우에도 정렬이 가능하다.
• 블럭레벨은 기본적으로 margin이 들어있어 변하지 않는다.
• 즉, 블럭레벨이 아닌 인라인 레벨인 경우에는 가능하다 (<a>, <button>, <img>,<span>등..)

Flex box가 아닐때의 수직정렬방법

먼저 transform에 대해 알아봅시다

transform : translate

• translateX : X축을 기준으로 지정한 값만큼 이동한다. (%, px ,vh 등)
• translateY :위와 동일
• translate : X ,Y를 동시 이용가능
• scale : 크기 조절가능
• rotate : 방향전환 (단위 : deg)

위의 동작들은 한번에 가능하다

transform : translate(100px, 100px) salce(2) rotate(45deg);

1. transform 을 이용한 수직 정렬 방법

1. 자식의 크기가 부모의 절반일 경우
   transform(50%,50%) 시 가운대 정렬 가능
2. 자식의 크기가 부모의 절반이 아닌경우
    absolute 적용 후 left와 top를 50%를 준다(position은 부모기준 이동)

            top, left 이기때문에 좌측 상단을 기준으로 합니다.
            top : 50% :윗 면을 기준으로 부모 컨테이너의 50%만큼 이동
            left : 50% :  좌측 면을 기준으로 부모 컨테이너의 50만큼 이동

           그리고 transform: translate(-50%,-50%)을 사용합니다.

           translate는 해당 item의 중앙을 기준으로 합니다.

See the Pen 수직 수평 정렬 by J-Plum (@J-Plum) on CodePen.

위의 코드는 예제와 반대인 bottom : 50%;, right :50%; 입니다.

line-height

부모의 크기만큼 값을 주면 수직정렬이 된다.

text-align : center와 같이 사용해서 수직 수평 가운대정렬이 가능하다.

※자세한건 폰트 메트릭스 찾아보기

position

static (기본값) : 기준 X

1. relative : 요소 자신을 기준으로 합니다. 
2. position 변경시 기존의 위치에 없더라도 존재 하는것 처럼 다른 요소에 영향을 끼칩니다.

See the Pen position by J-Plum (@J-Plum) on CodePen.

3. absolute : 부모 요소를 기준으로 합니다

    position 변경시 relative와 다르게  기존요소의 빈 자리에 다른 요소가 들어올 수 있습니다.

See the Pen position2 by J-Plum (@J-Plum) on CodePen.

4. fixed : 뷰포트를 기준으로 합니다.

5. absolute, fixed로 지정된 요소는 display 속성이 block으로 변경이 됩니다.

See the Pen Untitled by J-Plum (@J-Plum) on CodePen.

z-index

요소의 쌓임 정도를 지정합니다.

• auto (기본값) : 부모 자식의 관계처럼 동일한 쌓임 정도를 나타냅니다.
• 숫자 : 숫자가 높을 수록 위에 쌓입니다.

요소 쌓임 순서

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

• 요소에 position 속성의 값이 있는 경우 위에 쌓임.
• 1번과 조건이 같은경우, z-index 속성의 숫자 값이 높을수록 위에 쌓임.
• 1번과 2번까지 같은경우 html다음 구조가 위에 쌓임

See the Pen 요소 쌓임 순서 by J-Plum (@J-Plum) on CodePen.

3개의 div가 있습니다.

1. 첫번째 item과 2번째 item은 position값이 둘다 있고, z-index 속성도 별도로 지정하지 않았지만

html구조가 2번이 더 나중에 작성되었기 때문에 2번이 위로 올라왔습니다.

2. 세번째 item 또한 position 이 있고, z-index가 별도로 지정되지 않아 기본값 0인 상태입니다.

이 또한 html구조가 더 나중에 작성되어 2번이 위로 올라왔습니다.

See the Pen 요소 쌓임 순서 2 by J-Plum (@J-Plum) on CodePen.

1. 3개다 position 값이 있기 때문에 z-index로 비교를 하게 됩니다.
1, 3번의 item은 z-index가 1이며 2번째 item의 경우에는 z-index가 지정되지 않아 기본값 0입니다.
그래서 1번과 3번이 위로 2번 위로 올라왔습니다.

(서로 겹치지는 않지만 1번과 3번이 겹친다면 3번이 위로 올라옵니다 , html구조가 더 나중에 작성됨.)

background-attachment

배경 이미지의 스크롤 관련..

1. scroll (기본값) : 이미지가 요소를 따라서 같이 스크롤이 된다.
2. fixed : 이미지가 뷰 포트에 고정, 스크롤 되지 않음

See the Pen Parallax by J-Plum (@J-Plum) on CodePen.

color

글자의 색상

• rgb() : color : rgb(0,0,0) // 검정
• 색상의 이름 : color : red;

text-align

문자의 정렬 방식

• left, right, center : 왼쪽, 오른쪽, 가운데 정렬
• justify : 양쪽 정렬

text-decoration

문자의 장식(선을 의미함)

• none : 없음
• underline : 밑줄
• overline : 윗줄
• line-through : 중앙 선

text-indent

첫 줄의 들여쓰기  (inline 요소에는 적용되지 않습니다)

• 0 : 들여쓰기 없음
• 단위 : 단위로 지정(px, rem , em)
• % : 요소의 가로 너비에 대한 비율

See the Pen 문자 관련 css by J-Plum (@J-Plum) on CodePen.

1. 첫번째 a태그는 기본적으로 밑줄이 있지만 text-decoration으로 지운 상태입니다.

2. 밑줄이 생겼습니다.

3. 윗줄이 생겼습니다.

4. 중앙에 선이 생겼습니다.

5. text-indent로 들여쓰기를 했습니다.
  (codePen 에서는 재대로 보이는데.. 여기선 잘 안보이네요.. 아래 링크 첨부했습니다.)

https://codepen.io/J-Plum/pen/RwYLMWO

font-style

1. normal (기본값) : 기울기 없음
2. italic : 이텔릭체
3. oblique : 기울어진 글자 (이텔릭체를 더 많이 사용함)

font-weight

글자의 두께

1. normal(기본값, 400) : 기본두께
2. bold (700) : 두껍게
3. 100~900 : 100단위의 숫자

font-size

글자의 크기

1. 16px (기본값) : 기본값
2. 단위: px, em, rem

line-height

한 줄의 높이를 의미합니다

1. normal : 브라우저의 기본 속성
2. 숫자 : 요소의 글꼴 크기의 배수로 지정 ex) line-height : 1.2 는 16px * 1.2 를 한줄의 높이로
3. 단위: px, em, rem

font-family

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

• 띄어쓰기, 특수문자 가 포함된 경우 글골 이름은 큰따옴표로 묶어야합니다.
• 글꼴 계열은 필수로 작성해야합니다.
• 브라우저는 앞의 글꼴부터 먼저 시도를 하며, 사용할 수 없는 경우엔 그 다음에 명시된 글꼴을 시도합니다.
• 모두 사용 불가능 할 경우 글꼴 계열중 하나를 사용합니다.

See the Pen font by J-Plum (@J-Plum) on CodePen.

1. serif : 바탕체 계열
2. sans-serif : 고딕체 계열
3. monospace : 고정너비(가로폭이 동등) 글꼴 계역
4. cursive : 필기체 계열
5. fantasy : 장식 글꼴 계열

display의 속성

1. block (태그별 기본값) : 상자 요소
2. inline (태그별 기본값) : 글자 요소
3. inline-block(태그별 기본값) : 글자 + 상자 요소
4. flex : 플렉스 박스 (1차원 레이아웃) 수평정렬, 수직정렬중 하나를 사용합니다
5. grid : 그리드 (2차원 레이아웃) 행과 열 두가지를 사용합니다.
6. none : 화면에서 사라짐
7. table, table-row, table-cell 등등..

See the Pen display by J-Plum (@J-Plum) on CodePen.

span 태그는 기본적으로 inline입니다. inline의 특성상 width와 height를 가질 수 없습니다.

하지만 display: block를 사용하면서, width와 height를 가질 수 있게 되었습니다.

overflow

요소의 크기 이상으로 컨텐츠가 넘칠 때, 어떻게 보여질지에 대한 속성

1. visible(기본값) : 넘친 그대로 보여준다.
2. hidden : 넘친 내용을 잘라낸다
3. scroll : 넘친 내용을 잘라내고 스크롤바를 생성한다.
4. auto : 넘친 내용이 있는경우에만 스크롤을 생성한다. (scroll과 조금 다름, 아래의 코드 확인)

See the Pen overflow by J-Plum (@J-Plum) on CodePen.

1. 첫 번째 div는 자식 요소가 더 커서 부모 밖으로 넘친 걸 볼 수 있습니다.

2. 두 번째는 자식 요소가 넘쳤지만, hidden 옵션으로 인해 넘친 내용이 잘린 걸 볼 수 있습니다.

3. 세 번째 overflow : scroll은 넘친 자식요소는 잘리고 스크롤이 생긴걸 볼 수 있습니다.

4. 마지막 auto의 경우는 scroll처럼 넘친 자식 요소는 잘리고 스크롤이 생긴 것 까지는 같지만
    넘치지 않은 y 축은 스크롤이 생기지 않은 걸 볼 수 있습니다.

(overflow-x , overflow-y로  x축 y축 별도로 지정 가능합니다)