Jam's story

[미디어타입] CSS2 도입 미디어타입 (유형) ? 다른 미디어 (컴퓨터, 프린터, 스마트폰, TV 등등) 에 서로 다른 스타일 적용 규칙 정의 CSS2 도입 미디어타입 (유형) CSS2 미디어유형 + 확장 (인쇄) [미디어 쿼리] 뷰포트의 너비와 높이 장치의 너비와 높이 방향 (가로/세로모드) 반응형 웹 [미디어 쿼리] 는 여러장치 (미디어) 에 맞춤형 스타일시트를 제공하기 위해서 사용되는 기술... [미디어 쿼리 형식] @media not|only mediatype and (expressions 참, 거짓 - 여러개 표현식) { css 코딩; } mediatype all print screen speech not 특정 미디어타입만 적용 X only 특정 미디어타입만 적용 O all 기본값. 480 미..

로딩이미지 HTML 삽입 미리보기할 수 없는 소스 이미지 흔들기 HTML 삽입 미리보기할 수 없는 소스

한 스타일에서 다른 스타일로 점차적으로 변환되는 것. @keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode animation 첫 단계: @keyframes 키프레임을 지정 키프레임 - 특정 시간에 요소가 가지는 스타일 속성 예제 4초동안 점차적으로 빨->노 애니메이션 효과 애니메이션 효과 한 스타일에서 다른 스타일로 점차적으로 변환되는 것. @keyframes animation-name animation-duration animation-delay animation-iteration-co..

[2D/3D 변환] 변환: 요소크기 조정/이동/기울기/회전 transform 속성 전환: 주어진 기간동안 속성값을 매끄럽게 변경 transition 속성 transition-delay 전환 연기시간 속성 transition-duration 지속시간 속성 transition-property CSS 속성 transition-timing-function ease 전환속도 곡선 속성 ease(기본값) 천천히(시작) -> 빨라 -> 천천히(종료) linear 등속 (시작~종료) ease-in 천천히 (시작) ease-out 천천히 (종료) ease-in-out 등등 trainsition css 2D/3D 변환작업 css전환 전환: 주어진 기간동안 속성값을 부드럽게 변경 [2D/3D 변환] 변환: 요소크기 조정/이..

2D 변환] 요소를 이동, 회전, 크기조정 및 기울기 transform 속성 2D 변환방법 translate() 요소를 이동 rotate() 요소를 회전 scaleX() 요소의 크기조정 - X축 scaleY() 요소의 크기조정 -Y축 scale() 요소의 크기조정 - X, Y축 skewX() 요소를 기울어지게... X축 skewY() 요소를 기울어지게... Y축 skew() 요소를 기울어지게 matrix() 이동/회전/크기조정/기울어지게 translate() 이동 transform: translate(50px, 100px); -ms-transform: translate(50px, 100px); rotate 회전 transform: rotate(20deg); -ms-transform: rotate(20de..

글꼴 파일은 ttf 트루타입글꼴 :1980년대 후반 Apple/MS 개발한 표준 글꼴 otf 오픈타입글꼴 woff 웹 오픈글꼴 형식 웹 글꼴 사용: 클라이언트에 설치되지 않은 글꼴을 웹 서버에서 글꼴 파일 자동으로 다운로드 -> 사용자 사용 font-face Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit est laudantium ut quo neque exercitationem optio quod alias expedita, mollitia fugit excepturi sapiente minus voluptatibus, temporibus, id esse repudiandae. NoteLorem, ipsum d..

text-overflow 문자 넘쳤을 때 word-wrap 단어 부수기 word-break 단어 부수기 writing-mode 쓰기모드 (가로/세로) white-space 줄바꿈금지 white-space :nowrap; 줄바꿈 하지 않는다. overflow:hidden 오버플로 된 부분 감추기 text-overflow 표시되지 않는 오버플로 콘텐츠가 사용자에게 어떻게 신호되어질 지 지정 clip p.text1{ overflow:hidden; text-overflow:clip; } ellipsis p.text2{ overflow:hidden; text-overflow:ellipsis; } word-wrap: break-word p.text3{ word-wrap: break-word; } p.text3{ w..

text-shadow:수평 그림자 , 수직 그림자 번짐효과 색상 예) text-shadow: 5px 5px 10px red; box-shadow: 0 0 3px red; box-shadow: 0 0 10px blue, 3px 3px 20px red; 그림자 색상을 두개 줄 수 있다. 그림자효과 (text-shadow) 박스 그림자 효과(box-shadow) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 h1{ color:white; text-shadow: -3px 0 black, 0 3px blue, 3px 0 red, 0 -3px green; } writing-mode: 가로로 쓰기, 세로로 쓰기 horizontal-tb; 가로로 쓰기 vertical-lr ,vertic..