CSS8 CSS 애니메이션 - 걷기 애니메이션 CSS 애니메이션 연습하기 오늘은 걸어가는듯한 애니메이션을 만들어보겠습니다. 결과 See the Pen walkingAnimation by younghwan12 (@younghwan12) on CodePen. HTML 버튼을 두개 만들어줍니다. & Start Stop CSS 사진을 쭉 가로로 길게 만들어주고 800px씩 우에서 좌로 이동하는거로 만들어줍니다. .step { height: 700px; background: #43dcf6; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(img/ani1.jpg); border-radius: 0; position: absolute; left: 50%; top:.. 2022. 9. 7. CSS - 애니메이션의 모든것 animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝.. 2022. 9. 7. CSS 단위 CSS 단위 오늘은 CSS의 단위와 값에대해서 설명드리겠습니다. rem(root em) 가장 익숙할 수 있는 단위로 시작해 보자면 em은 현재의 font-size를 정의합니다. 예시로 body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다. 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 됩니다. 결과적으로 16.8px의 크기가 됩니다.1.2em씩 크기가 커지는 예제를 보여드리겠습니다. See the Pen rem_ex by younghwan12 (@younghwan12) on CodePen. 대부분의 경우, 단순하게 단일 사이즈로 표현하기도 합니다. 이런 경우 바로 rem 단위를 사용하면 됩니다. rem의 "r"은 바로 "root(최상위).. 2022. 8. 23. CSS 강아지 만들기 CSS 이용해서 강아지 만들기 오늘은 css의 에니메이션 효과를 이용해서 강아지를 만들어보겠습니다 결과 See the Pen CSS Dog by younghwan12 (@younghwan12) on CodePen. HTML(Pug) HTML에서 Pug를 이용해서 만들었습니다. Pug코드와 컴파일한 HTML코드는 다음과 같습니다. .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue CSS(SCSS) CSS에서 S.. 2022. 8. 18. Search Effect02 Search Effect02 검색기능 예제2번입니다. indexOf로 만든 1번과는 다르게 includes()를 사용해서 제작하였습니다.includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. 그래서 사용자가 입력한 값을 미리 만들어놓은 input박스의 요소를 포함하고 있다면 보이게, 없다면 숨겨서 제작하였습니다. 원본 소스 보기 원본 사이트 보기 HTML 작성 searchEffect01 번과 마찬가지로 사용자가 이용 하기 위한 input 박스를 만들어 줍니다. 검색 대상도 데이터 이름으로 설정해 둡니다. includes()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해보세요! 전체 속성 갯수 : 0 align-colo.. 2022. 8. 17. CSS 미디어 쿼리 미디어 쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 ㅇ기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이 (http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPho.. 2022. 8. 13. CSS 기본문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트 만으로 사용할 수도 있습니다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한경우 편리하게 사용할 수 있습니다. CSS에서 주석은 /* */로 표현합니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 예시 // 예시입니다. 우리를 기쁘게 하는 것들. 결과 우리를 기쁘게 하는 것들 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *... 2022. 8. 13. 벡터와 비트맵 벡터와 비트맵 컴퓨터 그래픽에서 이미지 표현방식은 크게 두가지로 구분되는데, 백터와 비트맵 방식입니다. 이 둘에 대해서 알아봅시다. 벡터 벡터 방식은 점과 점을 연결함으로써 수학적 함수관계에 의해 이미지를 표현하여 선과 면을 만들어냅니다. 이렇게 만들어진 선이 두껫값과 색상 값, 곡률값을 갖거나 면이 색상 값을 가지면서 이런 점, 선, 면의 요소들이 모여 그래픽을 만들게 되는 것입니다. 여기서 벡터의 점은 좌표계(x,y)로 구성되기 때문에 비트맵의 픽셀과 달리 이미지의 크기 조절이나 변형 때문에 해상도가 깨지지 않습니다. 돋보기로 봐야 할 만큼 크기를 줄이거나 건물에 붙일 만큼 크기를 키워도 깨짐 현상이 없습니다. 그러므로 크기조절이 자유로워야 하는 로고나 여러 포인트로 조정되어야 하는 서체, 캐릭터 등.. 2022. 8. 9. 이전 1 다음
