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

ktmihs·2021년 10월 4일
0

HTML-CSS

목록 보기
9/14
post-thumbnail

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
profile
💛

0개의 댓글