아래 사항을 변형시킬 수 있음
영문 | 한글 |
---|---|
px | 픽셀 |
% | (상대적으로 적용) 상대적 백분율 |
em | 요소의 글꼴 크기 (요소가 10px이면 10em은 100px |
rem | 루트 요소(html)의 글꼴 크기를 보고 크기 설정 |
vw | 뷰포느 가로 너비의 백분율 |
vh | 뷰보트 세로 너비의 백분율 |
deg | degree, 즉 각도의 축약어 |
각각 아래와 같이 기재 가능(시계방향으로 생각하기)
{margin or padding}-{방향(top, bottom, left, right}
기재 가능
margin이 클 수록 요소의 크기가 커짐
border: {border-width} {border=style} {border-color}
가 기본 틀색상이름 | 브라우저에서 제공하는 색상 이름 | 실제 기재 |
---|---|---|
Hex 색상 코드 | 16진수 색상 | #000 #FFFFFF |
RGB | 빛의 삼원색 | rgb(255, 255, 255) |
RGBA | 빛의 삼원색 + 투명도(0~1) | rgba(255, 255, 255, 0.5) |
border-radius
를 통해 모서리를 둥글게 만들기 가능box-sizing
을 통해 박스 요소의 크기를 어느 곳에 맞출 지 가능overflow-{x}or{y}
로 각 축의 넘침을 제어가능 또는 아래를 기재하여 제어 가능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: static
기준 없음position: relative
요소 자신을 기준, 자신이 어디로 움직일지 지정하거나 그의 자식 또는 후손 요소가 자신을 기준으로 움직일 수 있도록 지정해줌position: absolute
위치 상 부모 요소를 기준(블럭요소로 자동 전환), 또한 독립적으로 표시가 되기에 해당 문구가 선언된 요소의 다음은 바로 부모 뒤이에 연결다음 순서로 요소가 사용자와 더 가깝세 있는지 결정
- 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값은 static)
- 1번의 조건이 같은 경우, z-index 속성값이 높을 수록 위에 쌓임
- 숫자는 양수부터 음수 가능하나 되도록이면 999값은 큰 요소 기재하면 유지보수 어려우니 주의
- 1번과 2번이 같은 경우, HTML에 나중에 작성될 수록 위에 쌓임
부모요소에 diplay:flex
선언 시 부모는 "Flex container"가 자식은 "Flex Items"로 규정
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}
위와 다르게 한 줄만 정렬
order
기재 시 그 값에 따라서 시작점에서 요소 값대로 출력(오름차수)- 'flex-grow: {숫자}` item이 부모의 빈 공간에 얼마나 차지할 것인지 기재
- `flex-shrink: {숫자}
flex-basis: {숫자 or auto or 단위}
: 공간 배분 전에 기본 너비를 지정하는 항목 (만약 흔하게 박스크기로 비율이 1: 1 : 2가 되길 원하면 "0"을 입력)
요소의 전환 효과를 지적ㅇ하는 단축 속성
transition: {속성명} {지속시간*필수*} {타이밍함수} {대기시간}
{속성명}
은 전환효과를 적용시킬 이름을 지정 (all or 지정대상){지속시간}
전환효과의 지속시간{타이밍함수}
전환효과의 타이밍(easing)함수 지정 (구글에서 "easing funtion" 검색 시 다양한 함수 탐색 가능){대기시간}
전환효과가 몇 초 뒤에 시작할지 지정transform: {변환함수} {변환함수2} ....... ;
translate(translateX or translateY): {단위 숫자}
해당 px만큼 움직임 (x축 또는 y축 지정)scale(sacleX or scaleY): {숫자}
배수(숫자)로 커짐rotate: {deg}
돌려야 하는 각도를 기재skewX or skewY: {deg}
요소를 기울여 마름모 형태로 지정 (음수 가능)
rotateX or rotateY: {deg}
이 두개는 3D 변환함수
- 단,
perspective: {단위 as px}
라는 원근값을 가정 먼저 기재해야하여야 뷰포트에서 표현됨- (속성으로써)
perspective: {단위 as px}
: 부모요소에 기재하는 속성으로 앞으로 나와있는 자식요소와 상호작용하여 3D를 표현backface-visibility: {visilbe or hidden}
한 요소가 180도로 뒤집어졌을 때 그 뒤집어진 요소를 숨길 지 또는 보일 지 표현
[장점]
개인적으로 강의 내용이 매우 좋다고 판단, 왜냐하면 중요한 것은 2번 이상 언급 및 코드를 치면서 강조하기 때문
[단점]
없음
[신경쓸 것]
되도록이면 하루에 내가 나눈 파트보다 조금 더 들어서 다음 날의 부담을 줄여보자
이제부터 실습 및 적용하는 것이니 본 과정의 오버워치 선택 예제를 한번 복습해보자
실습코치님이 올려준 것 끝 level까지 끝내기