HTML - CSS 42

[CSS] transform 속성: 회전, 이동, 확대

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 속성명 전환시간; 속성이 전환시..

[CSS] animation 애니메이션 효과

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..

[html] day2_div, pre, button tag

DOCTYPE html> div tag - P 태그와 비슷 - block 속성의 태그 (새 라인에서 시작하는 태그) - p태그는 기본 시작의 위/아래에 여백(마진)이 있고, div는 없음 - 원하는 컨텐츠를 묶어서 사용할 때 쓰임 - 시멘틱 태그의 형태로 여러가지 말로 바뀌여서 쓰이고 있음 안녕 반가워 DOCTYPE html> pre 안녕하세요 홍길동입니다. 홍 길 동 안녕하세요 홍길동입니다. 홍 길 동 DOCTYPE html> button 일반버튼 전송버튼 리셋버튼 메뉴버튼

[html] day1_a_싱커

1번위치 2번위치 3번위치 2번 3번 " 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="width=device-width, initial-scale=1.0">    title>a 싱커(책갈피)title>head>body>        : 책갈피 기능 = 도움말에서 해당 목차를 클릭하면 그 위치로 이동하는 요소  ..

[html] day1_tag종류

DOCTYPE html> tag 종류 inline 속성 : 줄바꿈이 안되는 속성 - 엘리먼트들이 전 후 줄바꿈 없이 한줄로 다른 엘리먼트들과 나란히 배치 - i, ins, del, span(상품명을 적는 경우 사용), a, em block 속성 : 줄바꿈이 되는 속성 - 엘리먼트들이 전 후 줄바꿈이 들어가는 형태 - 다른 엘리먼트들을 밀어내고 혼자 한줄을 차지 - div, h1, p, hr inline-block 속성 : 하이브리드 모드처럼 작동 - inline 엘리먼트들이 가질 수 있는 속성, block 엘리먼트들이 가질 수 있는 속성을 모두 가짐