HTML 자세히 보기 CSS 자세히 보기 JAVASCRIPT 자세히 보기 광고 준비 중 CSS17 [CSS] 애니메이션 Eye roll See the Pen Untitled by damin0842 (@damin0842) on CodePen. 2022. 9. 26. [CSS] 애니메이션 Loading... See the Pen loading by damin0842 (@damin0842) on CodePen. 2022. 9. 25. [CSS] 애니메이션 3D Cube See the Pen rotateSQ by damin0842 (@damin0842) on CodePen. 2022. 9. 22. [CSS] 마우스 오버 애니메이션 See the Pen Untitled by damin0842 (@damin0842) on CodePen. 2022. 9. 21. [CSS] SVG 애니메이션 레퍼런스 2022. 9. 13. [CSS] CSS 애니메이션 레퍼런스 2022. 9. 13. [CSS] 걷기 애니메이션 2022. 9. 7. CSS 애니메이션 효과 circle animation 애니메이션 효과 서클 CSS 애니메이션 효과로 공 두개가 돌아가는 모습을 만들었습니다. HTML 회전축이 될 loading 박스와 공 두개를 만듭니다. 코드 보기 CSS 애니메이션 효과를 줍니다. 코드 보기 body{ height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); } .loading{ position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: load 0.6s linear infinite; } .loading .circle1{ width: 20px; height: 20px; border-radius: 50%; backg.. 2022. 8. 29. CSS 애니메이션 공 굴리기 Square Animation 애니메이션 효과 사각형 굴리기 CSS 애니메이션 효과로 굴러가는 사각형을 만들었습니다. HTML div 박스만 있으면 됩니다. 코드 보기 CSS box와 그림자에 애니메이션 효과를 줍니다. 코드 보기 body { height: 100vh; background-image: linear-gradient(to top, skyblue, #3cba92); } .box { width: 49px; height: 49px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ""; width: 49px; height: 5px; background: #000; position: absolute; t.. 2022. 8. 29. CSS 색상표현방법 CSS 색상 표현 CSS에서 색을 나타내려면 우선 "색"이라는 개념을, 원색이나 밝기 등 구성 요소를 분리해 수치로 표기하는 등 컴퓨터가 이해할 수 있는 디지털 형태로 변환해야 합니다. 변환 방법이 여러 가지이듯 CSS가 색을 표현하는 방법도 여러 가지입니다. 키워드 CSS 표준은 다수의 색 키워드를 사전에 정의하고 있으므로, 원하는 색을 가리키는 키워드가 있다면 숫자형 표현 대신 사용할 수 있습니다. 색 키워드는 원색과 2차색(red, blue, orange 등), 단계별 무채색(black에서 white까지, darkgray와 lightgrey 등) 외에도 lightseagreen, cornflowerblue, rebeccapurple처럼 다양한 종류의 혼합색을 포함하고 있습니다. 16진수 문자열 표기.. 2022. 8. 23. CSS 길이 단위 CSS 길이 단위 가장 자주 사용되는 숫자 형식은 입니다. 예를 들면 10px (픽셀) 또는30em. CSS 에서 사용되는 길이는 — 상대 및 절대의 두 가지 유형이 있습니다. 얼마나 커질지 알기 위해서는 차이를 이해하는 것이 중요합니다. 절대 길이 단위 다음은 모두 절대 길이 단위이며 — 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다. 단위 이름 다음과 동일함 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th.. 2022. 8. 23. 이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 / IR 효과 / 백그라운드 표현 IR 효과 IR 기법이란? 이미지의 대체 텍스트를 제공하기 위한 CSS 기법이다. 디자인적으로는 보이지 않지만 스크린 리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법을 배워보자. 네이버가 사용하는 방법 .blind { position:absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } Sprite 기법 여러가지 이미지를 하나의 이미지 파일안에 배치하여 이미지 로드 부담을 줄이는 방법이다. 백그라운드 표현 36px의 버튼 이미지를 50px씩 잘라서 만든 영역에 넣고 백그라운드 포지션을 이용해 50픽셀씩 이동하여 하나씩.. 2022. 8. 22. SCSS 기초 01 SCSS 기초 01 CSS는 그 자체로 재미있을 수 있지만 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있습니다. 여기서 SCSS가 도움이 될 수 있습니다. SCSS에는 중첩, 믹스인, 상속 및 강력하고 유지 관리 가능한 CSS를 작성하는데 도움이 되는 기타 유용한 기능과 같이 아직 CSS 에는 존재하지 않는 기능이 있습니다. 변수 변수를 스타일시트 전체에서 재사용하려는 정보를 저장하는 방법으로 생각하십시오. 색상, 글꼴 스택 또는 재사용하고 싶은 CSS 값과 같은 항목을 저장할 수 있습니다. Sass는 $ 기호를 사용하여 무언가를 변수로 만듭니다. 다음은 예입니다. SCSS $font-stack: Helvetica, sans-serif; $primary-color: #333; bod.. 2022. 8. 18. CSS 강아지 애니메이션 효과 애니메이션 효과 강아지 CSS 애니메이션 효과로 움직이는 강아지를 만들었습니다. HTML HTML 문서를 Pug를 이용하여 단순화 하였습니다. 들여쓰기로 박스 경로가 바뀌니 정렬에 주의 하여야 합니다. Pug 코드 보기 .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 CSS 문서를 SCSS를 이용하여 단순화 하였습니다. SCSS 코드 보기 body { display: flex; flex-directi.. 2022. 8. 18. CSS 미디어 쿼리 미디어 쿼리(media query) 미디어 쿼리는 뷰포트의 해상도에 따라 CSS를 분기시키는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 모델별 해상도 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,7,8 plus 414 736 iPhone 5 320 568 Galaxy S5,S8 360 640 Galaxy Note 8 360 640 .. 2022. 8. 16. CSS 기본 문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트 만으로 사용할 수도 있습니다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한경우 편리하게 사용할 수 있습니다. CSS에서 주석은 /* */로 표현합니다. 내부 스타일 시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 예시 // 예시입니다. 우리를 기쁘게 하는 것들. 결과 우리를 기쁘게 하는 것들. 외부 스타일 시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은.. 2022. 8. 16. 벡터방식/비트맵방식 비트맵(Bitmap) 그래픽 비트맵 그래픽은 간단히 말해 서로 다른 점(픽셀)들의 조합으로 그려지는 이미지 표현 방식입니다. 비트맵 이미지는 정교하고 화려한 표현이 가능하여, 주로 사진 이미지에 주로 사용됩니다. 비트맵 이미지는 크기를 늘리거나 줄이면 원본 이미지에 손상이 가는 것이 특징이며, 우리는 흔히 이것을 '이미지가 깨졌다'라고 표현합니다. 비트맵 이미지는 이미지를 표시하는 방식에서 컴퓨터에 부담을 덜 주는 구조를 갖고 있기 때문에, 웹에서 이미지를 표시할 때는 주로 비트맵 이미지를 사용합니다. 우리가 흔히 보고 다루는 .jpg, .jpeg, .png, .gif 가 모두 비트맵 방식입니다. 벡터(Vector) 그래픽 벡터 이미지는 점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식을 말합니.. 2022. 8. 10. 이전 1 다음 728x90 반응형
