coding with cong

transform : 회전, 이동, 확대등을 할 때 사용 translate(x,y) : x축으로 x만큼, y축으로 y만큼 이동 translateX(x) : x축만 이동 translateY(y) : y축만 이동 scale(w, h) : 가로로 w배, 세로로 h배만큼 커짐, 값을 0으로 하면 안보임 scaleX(w) : 가로만 확대 scaleY(h) : 세로만 확대 rotate(a) : a 각도만큼 시계방향 회전, 단위 : deg skaw(xa, ya) : 기울림, 단위 : deg skawX(xa) : x축으로 xa만큼 기울림 skawY(ya) : y축으로 ya만큼 기울림 특징 다른 속성값이 변화할때 서서히 변화하여 애니메이션이 발생하는 것처럼 보이게 함. transition 속성명 전환시간; 속성이 전환시..

1. 애니메이션 등록(@keyframes) - 시간비율은 0~100%, 0% = from, 100% = to로 대체가능 @keyframes 애니메이션 명{ 시간비율{ 스타일; } 시간비율{ 스타일; } } 2. 애니메이션 적용 animation-name : 동작할 애니메이션 이름 animation-duration : 애니메이션 동작시간 animation-iteration-count : 애니메이션 반복 횟수, 숫자 or infinite(무한) == 사용예시 == 가장 앞의 화면이 흐려졌다가 밝아졌다하는 애니메이션 DOCTYPE html> opacity사용 .bg, .front{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .bg{ backgro..

keyboard ▼ search " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스      DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta http-equiv="X-UA-Compatible" content="IE=edge">    meta name="viewport" content=..

display : flex ; // 속성 선택 사용 justify-content : ____; align-items : ____; flex-direction : ____; order: ___; justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. align-items flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 ..

cursor : pointer : 커서가 올라가면 손가락 모양의 커서로 변경됨 무료 아이콘 사이트 https://fontawesome.com/kits/3d5e691692/setup?welcome=yes Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap..

box-shadow * text-shadow도 동일 box-shadow : 수평 수직 번짐정도 그림자크기 색상 방향 순 입력 (번짐정도,그림자크기,색상,방향 생략가능) - 방향 : insert = 안쪽 그림자 설정 box-shadow: 10px 10px 5px black ; 생성 예시

background 배경 속성 배경색과 이미지를 같이 넣는 경우 : 배경 이미지가 우선출력 -> 이미지가 출력되지 않은 부분에 색상 출력 background-color 배경 색상 background-color : pink ; background: linear-gradient(방향, 시작 색상, 끝 색상) ; 배경 색상 그라데이션 background: linear-gradient(to right, white,pink); background-size 배경 이미지 크기 background-size: 200px 200px; background-repeat 배경 이미지 반복 no-repeat : 반복없음 repeat-x : x축 반복 repeat-y : y축 반복 round : 양쪽 반복 기본값(공백) : 반복 ..

inline 태그들의 가로 길이 = 컨텐츠의 길이 (변경X) 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어있음! width 가로 길이 block 태그의 기본 가로는 100%으로 설정되어 있음 보통 부모크기의 100% 항상 자식 값의 가로길이를 늘려도, 부모값의 길이가 작으면 커지지 않는다는 것을 생각! min-width : 최소 가로길이 설정 max-width : 최대 가로 길이 설정 min, max를 이용하여 페이지 크기 조절 범위 설정 height 세로 길이 컨텐츠가 없는 경우) 0으로 자동 설정 컨텐츠가 있는 경우) 컨텐츠의 높이만큼 세로길이 자동할당 중앙에 오게 하려면 padding을 이용하여 밀어주는 방법밖에 없음!

border 태두리 border-radius 둥근 테두리 지정 border-radius: _px; 네 모서리의 반지름이 _px border-radius: _px__px__px__px; 각각 반지름 지정 border-radius: _px__px__px; 좌측부터 시계방향 지정 border-radius: _px__px; 대각선 지정 (좌상단-우하단,우하단-좌상단) border-top-right-radius: _px; 우상단 반지름 지정 border-style 테두리 선 모양 dotted : 모서리를 점선으로 지정 border-width 테두리 두께 border-width(border-??-width) border-color 테두리 색상 border-color(border-??-color) 예시

폰트 (font) 1. font-family : 글자체를 여러개 지정 - 지정하려는 폰트를 , 으로 나열 - 한글 폰트의 경우) 한글 이름과 영어 이름을 같이 사용 - 마지막은 기본형으로 지정 - "폰트명" - 폰트 이름이 굴림, Arial 등 띄어쓰기가 없는 경우) "" 따옴표 생략가능 -serif : 유사한 값으로 설정 -https://fonts.google.com/ 무료제공폰트 예) p { font-family : "맑은 고딕", "malgan gothic", serif } => 맑은 고딕이 없다면 malgan gothic- > malgan gothic이 없다면 -> serif 설정 2. css3 표준 단위 em : 배수, 부모 값 기준배수 (부모의 상대적인 값) 1em : 부모와 동일한 값 2em..