[HTML/CSS] 레이아웃, 색상과 배경, transform, transition

2. CSS CH 10-11

CH6. 레이아웃

1) display

• inline요소와 block요소를 바꿀 수 있음

inline

• width, height, margin, padding을 지정할 수 없음
• 여러 요소가 가로 배치됨

block

• width를 지정하지 않으면 가로 전체를 차지함
• width, height, margin, padding을 지정할 수 있음
• 여러 요소가 세로 배치됨

inline-block

• width, height, margin, padding을 지정할 수 있음
• 여러 요소가 가로 배치됨
• inline과 block의 특성 모두를 갖고 있음
  - EX ⬇

	display: inline-block;

2) 요소를 없애는 방법

display none

• 눈에 보이지 않음
• 요소를 레이아웃 자체에서 없앰

visibility hidden

• 레이아웃을 변경하지 않고 보이지 않게 함
• 영역은 유지하되, 요소의 컨텐츠나 색상이 보이지 않게 함

3) float

• 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정
  글자처럼 취급 느낌
• none : 원래 요소의 특징 (block이면 block 특징, inline이면 inline 특징)
• left : 글의 왼쪽에 위치
• right : 글의 오른쪽에 위치
• 별도의 레이어로 떠 있음(기본 태그의 위에 위치, 영역이 겹침)

4) position

• 기본값: static
• 일반적인 문서의 흐름에 따라 배치
• top, right, bottom, left을 설정할 수 없음

normal flow

• 요소의 레이아웃을 변경하지 않을 시, 웹페이지 요소가 자기 자신을 배치하는 방법

position: relative

• 일반적인 문서 흐름에 따라 배치 후,
• 자기자신(static)을 기준으로 top, right, bottom, left의 값에 따라 오프셋 적용
• 자기자신의 위치로부터 절대적으로 이동할 수 있음
• top, bottom이 동시에 있으면 bottom 무시, left, right가 동시에 있으면 right 무시됨

position: absolute

• 일반적인 문서 흐름에서 제거,
• 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치
• 공중에 뜬 형태 (float처럼)
• top, right, bottom, left값을 줄 수 있음

⚠ 조상 중에서 position이 static이 아닌 요소를 찾아 기준점을 삼음

position: fixed

• 일반적인 문서 흐름에서 제거,
• 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치
• 위치가 고정되어 스크롤을 해도 그 자리에 존재

position: sticky

• 일반적인 문서 흐름에 따라 배치
• 본래 위치에 있다가 스크롤하여 지정한 위치에 도달한다면, fixed처럼 고정되어 보임
• 스크롤하는 대상(body)의 바로 하위에 설정해주어야함

5) overflow

• 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법
• 말 그대로 넘쳐흐를 때
• visible : 크기에 상관없이 내용이 모두 보임
• hidden : 요소 크기를 벗어나면 벗어나는 요소는 보이지 않음
• scroll : 요소 안에 scroll이 생김
• auto : 넘치지 않을 때에는 visible, 넘치는 경우 scroll을 적용한 것과 같음

6) z-index

• Z축 순서를 지정
• auto : 기본 순서
• 정수값 : 정수 값이 클 수록 위에 뜨게 됨

---

CH7.색상과 배경

1) 색상

HEX

• 16진수 표기법
• #ffffff : 각각 R G B가 2개씩 16진수로 작성됨

rgb

• rgb(12, 130, 250) : 각각 R G B

rgba

• rgba(12, 50, 85, 0.8) : rgb + 투명도(0~1의 값)

2) opacity

• 요소의 불투명도 설정
• 내부에 있는 모든 요소가 투명도에 영향을 받음(색상, 글씨 전부)
• 0~1까지의 숫자를 지정할 수 있음
• 0은 눈에 보이지 않음(투명한 상태)

3) background

background-color

• 배경색

background-image

• 배경에 이미지 파일을 넣을 수 있음
• background-color보다 위에 위치함

background-image: url("image url");

background-repeat

• 요소의 배경 영역을 채울 때까지 image를 반복함

background-image: url("image url");
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

background-position

• background image의 위치를 변경시킬 수 있음

background-image: url("image url");
background-repeat: no-repeat;
/* 시작하는 위치를 지정할 수 있음 ➡ 반복일 경우, 그 지점부터 주변 방향으로 배치 */
background-position: x좌표 y좌표;
/* 키워드로 사용할 수도 있음 ➡ right left top bottom center */

background-origin

• 배경 이미지의 영역을 설정

background-origin: content-box;
/* padding 안쪽으로 위치 */
background-origin: padding-box;
/* padding 부터 위치 ✔기본값✔ */
background-origin: border-box;
/* border 부터 위치 */

background-size

• 배경 이미지의 크기
• 기본값: auto (이미지의 원래 크기)
• contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정, 비율 유지
• cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정 (빈 공간이 생기지 않도록 !), 비율 유지
• length : 직접 값 설정
• 100% : 가로에 맞춰 꽉 채움 (빈 공간 생길 수 있음)

background (shorthand)

• background의 속성을 한 번에 작성할 수 있음

⚠ 주의 사항

• color는 맨 마지막에 위치해야 함
• size 값은 position 바로 뒤에만 위치할 수 있음 ➡ position / size형태로 구분

---

CH8. transform

1) transform 개요

• 회전, 크기 조절, 기울이기, 이동 효과 부여
• 속성은 transform 하나
• 속성값으로 함수를 사용하여 다양하게 적용 가능

2) 크기 - scale

• 크기를 2D로 조절할 수 있음
• scale(num) 또는 scale(num, num)
• num배가 됨
• 태그의 영역은 그대로 존재하나, 이미지의 크기만 줄어들거나 커짐 ➡ width를 조절하는 것과 다름 !

  transform: scale(0.4, 0.8)
  /* 값을 하나만 입력할 경우, x와 y에 동일하게 적용됨 */
  transform: scalex(0.3)
  
  transform: scaley(1)

3) 회전 - rotate

• 양수는 시계방향으로 회전 (음수는 반대)
• deg : 각도
• turn : 1 turn == 한 바퀴

4) 이동 - translate

• 기본 위치로부터 x, y축으로 이동
• % 로 입력한 값은 이미지 크기의 비율
• 레이아웃은 달라지지 않음

transform: translate(0.4, 0.8)
/* 값을 하나만 입력할 경우, x값만 설정, y값은 0이 됨 */
transform: translatex(0.3)

transform: translatey(1)

5) 기울이기 - skew

• 모양이 기울어짐 (평행사변형 모양)
• 90도로 기울인다면 완전히 기울어져 보이지 않음 (or 45deg, 45deg)

transform: skew(40deg, 80deg)
/* 값을 하나만 입력할 경우, x값만 설정, y값은 0이 됨 */
transform: skewx(30deg)

transform: skewy(10deg)

6) 기준점 - transform-origin

• transform에 적용되는 속성의 기준점을 변경시킴
• 기본값: 50% 50% (==center)
• % px top 등으로 설정할 수 있음

transform-origin: top left;

---

CH9. transition

transition 개요

• 변환되는 상태를 보여줌
• A➡B를 할 때, A의 css가 B의 css로 바뀜
• 시간에 대한 개념이 추가됨
• 어떤 요소가, 얼마만큼의 시간이 걸리는지가 필요함

transition-property

• 변경할 속성을 입력함
• all : 모든 속성값에 대해 변경
• 특정값 : 해당 값에 대해서만 변경

transition-duration

• 변경되는데 걸리는 시간
• s : 1초
• ms : 1s==1000ms

.box {
	background-color: yellow;

	transition-property: all;
	/* property에 추가하지 않은 다른 속성들은 시간이 적용되지 않음 */
	transition-duration: 2s;
	/* 변경하고 싶은 곳에 작성 */
}

.box:hover{
	background-color: red;
}

transition-delay

• 변경되는 시간을 지연시킴

.box {
	background-color: yellow;

	transition-property: all;
	/* property에 추가하지 않은 다른 속성들은 시간이 적용되지 않음 */
	transition-duration: 2s;
	/* 변경하고 싶은 곳에 작성 */
	transition-delay: 1s;
	/* 1초 뒤에 변경 */
}

.box:hover{
	background-color: red;
}

transition-timing-function

• 중간과정의 시간을 조정 ex) 처음에는 빠르게, 나중에는 느리게
  
• 기본값: ease

.box {
	background-color: yellow;

	transition-property: all;
	/* property에 추가하지 않은 다른 속성들은 시간이 적용되지 않음 */
	transition-duration: 2s;
	/* 변경하고 싶은 곳에 작성 */
	transition-timing-function: ease-out;
	/* 처음에는 빠르게, 나중에는 느리게 */
}

.box:hover{
	background-color: red;
}

transition (shorthand)

• 네 가지를 모두 사용할 경우, 앞쪽에 오는 시간이 duration, 뒤쪽에 오는 시간이 delay
• 되도록 순서를 지켜서 작성하는 것이 좋음 property, duration, timing, delay