CSS44 움직이는 애니메이션 1 애니메이션1 박스가 땅에닿으면 뭉게지는 애니메이션을 만들어봤습니다. HTML코드 css코드 body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); position: relative; overflow: hidden; } .box { width: 50px; height: 50px; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; margin: 0 auto; } .box::before { content: ''; width: 50px; height: 5px; position: absolute; top: 58px; left: 0; background-color: #00.. 2022. 8. 29. 퀴즈 이펙트 여섯 번재 웹디자인 기능사 퀴즈 풀기 웹 디자인 기능사 필기 기출문제를 JS를 이용해서 간단한 퀴즈 프로그램을 만들었습니다. 퀴즈의 답을 입력하고 정답 확인하기 버튼을 누르면 답이 나타나게 됩니다. 원본 소스 보기 원본 사이트 보기 1.js 코드 CSS는 앞서 마크업한 HTML 코드를 디자인및 js동작할때 태그에 추가할 class를 만듭니다. 코드 보기 //문제정보 const quizInfo = [ { answerType: "웹디자인기능사 기출문제 2016년 1회", answerNum: 1, answerAsk: "다음 중 디자인의 조건에 해당하지 않는 것은?", answerChoice: [ "대칭", "점증", "반복", "강조" ], answerResult: "대칭", answerEx: "디자인의 원리 : 균형,.. 2022. 8. 24. 퀴즈이펙트 다섯 번쨰 웹디자인 기능사 퀴즈 풀기 웹 디자인 기능사 필기 기출문제를 JS를 이용해서 간단한 퀴즈 프로그램을 만들었습니다. 퀴즈의 답을 입력하고 마지막에 정답 확인하기 버튼을 누르면 답이 나타나게 됩니다. 원본 소스 보기 원본 사이트 보기 1.js 코드 CSS는 앞서 마크업한 HTML 코드를 디자인및 js동작할때 태그에 추가할 class를 만듭니다. 코드 보기 //문제정보 const quizInfo = [ { answerType: "웹디자인기능사 기출문제 2016년 1회", answerNum: 1, answerAsk: "다음 중 디자인의 조건에 해당하지 않는 것은?", answerChoice: { 1: "대칭", 2: "점증", 3: "반복", 4: "강조" }, answerResult: "1", answerEx.. 2022. 8. 24. 색상표현 색상 표현 방법 CSS에서 색을 표현하는 방법에는 다음과 같이 세 가지 방법이 있습니다. 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 색상 이름으로 표현 색상 이름으로 표현이 가능하다. W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같습니다. aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현합니다. 따라서 HTML에서도 이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용합니다. RGB 색상의 기본색(Red, G.. 2022. 8. 24. 단위 CSS 단위! 글자 크기를 명시하지 않을 경우 16px 가 기본 값입니다. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위입니다. font-size: 120%; em 부모 요소의 글자 100% 기준으로 계산한 크기를 100 분의 1단위입니다. font-size: 1.5em; rem 최상의 요소의 크기를 100% 기준으로 100분의 1단위입니다. 즉 root, html 요소를 뜻하므로, html에서 지정한 글자 크기가 1rem 이 됨니다 font-size: 0.8rem; vw vw는 뷰포트 너비값의 100분의 1단위입니다. font-size: 3vw; vh vh는 뷰포트 높이값의 100분의 1단위입니다. .. 2022. 8. 24. 검색 이펙트 세번째 검색 이펙트 html 태그, css 속성, javascript 의 메서드 를 검색하여 찾아볼수있습니다. 원본 사이트 보기 원본 소스 보기 1.HTML 코드 HTML에서 js를 동작하기위한 class이름과 input등을 적절히 사용하여 사용자가 알아보기쉽게 표현해야합니다. 코드 보기 charAt()()를 이용하여 CSS 속성 검색하기 CSS 속성 첫글자 검색하기 a b c d e f g h i j k l m o p q r s t u v w x y z 속성 갯수 : accent-color : 특정 요소에 색상을 지정할 때 사용됩니다. align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-sel.. 2022. 8. 22. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형
