목록전체 글 (89)
Leeyanggoo
[JS] JSON 데이터 가져오기!! URL 새로고침으로 배경을 다양하게!
* { margin: 0; padding: 0; } body { width: 100%; height: 100vh; align-items: center; justify-content: center; display: flex; } .opacity { animation: opacity 2s ease-in-out; } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } #result { width: 50%; } .quote { color: #fff; font-size: 2rem; margin: 1rem 0; font-weight: bold; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;..
[JS] JSON 데이터 가져오기!! 명언 소환술!
* { margin: 0; padding: 0; } body { width: 100%; height: 100vh; align-items: center; justify-content: center; display: flex; } .opacity { animation: opacity 2s ease-in-out; } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } #result { width: 50%; } .quote { color: #fff; font-size: 2rem; margin: 1rem 0; font-weight: bold; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;..
[JS] 자바스크립트 슬라이드 7 !! 썸네일 슬라이드 만들기
#header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800px; height: 450px; box-shadow: 0 50px 100px rgba(0,0,0,0.5); } .slider__img { position: relative; width: 100%; height: 100%; overflow: hidden; ..
[JS] 자바스크립트 슬라이드 6!! 버튼으로 슬라이드 넘기기!
#header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 ..
[JS] 자바스크립트로 슬라이드 만들기 5!! 끝없는 세로 슬라이드
cloneNode()와 appendChild() 알고 가자! #header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } ...
[JS] 자바스크립트로 슬라이드 만들기 4!! 끝없는 가로 슬라이드
cloneNode()와 appendChild() 알고 가자! #header ul a:hover { background-color: #000; color: #fff; transform: scale(1.2); transition: all 0.5s; } #header li { margin: 0 2px; } /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } ...
[JS] 자바스크립트로 슬라이드 만들기 3!! 세로 슬라이드!
다양한 스크립트를 활용해보자!! /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 박스 : 움직이는 영역 */ /* display: flex; flex-wrap: wrap; */ width: 100%; height: 520px; } .slider { /* 개별적인 이미지 */ position..
[JS] 자바스크립트로 슬라이드 만들기 2!! 가로 슬라이드!
다양한 스크립트를 활용해보자!! /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 전체 이미지를 감싸고 있는 박스 : 움직이는 영역 */ display: flex; flex-wrap: wrap; width: 4000px; height: 520px; } .slider { /* 개별적인 이미지 */ position: re..
[JS] 자바스크립트로 슬라이드 만들기 1!! opacity와 transition을 이용해보자
opacity와 transition을 알아보자!! opacity 속성은 요소의 투명도를 지정하는 데 사용됩니다. 이 속성은 0~1 사이의 값을 가질 수 있으며, 0에 가까울수록 요소가 투명해지고, 1에 가까울수록 불투명해집니다. opacity 속성은 다양한 요소에 적용될 수 있으며, 텍스트, 이미지, 배경 등에도 적용할 수 있습니다. transition 속성은 요소의 애니메이션 효과의 지속 시간을 정하는 데 사용됩니다. 이 속성을 사용하면 요소의 상태가 변할 때 부드러운 애니메이션 효과를 적용할 수 있습니다. transition 속성은 다양한 속성에 적용될 수 있으며, 이동, 회전, 크기 변경 등 다양한 애니메이션을 구현할 수 있습니다. 즉, opacity와 transition 속성을 이용하면 마치 레이..
정보처리기능사 오답노트2
2011년 07월 31일 3. 다음 중 제어장치에서 명령어의 실행 사이클에 해당하지 않는 것은? 1.인출 주기(fetch cycle) 2.직접 주기(direct cycle) 3.간접 주기(indirect cycle) 4.실행 주기(execute cycle) 정답 : 2 제어장치의 명령어 실행 사이클은 기계주기(Machine Cycle)라 하며, 다음과 같다. 인출사이클(Fetch Cycle) - 중앙처리장치가 기억장치에서 다음에 실행할 명령을 가져오는 주기) 명령사이클(Instruction Cycle) - 기억장치의 번지를 확인하여 명령을 읽어 낼 때까지의 단계 실행사이클(Execution Cycle) - 명령에 따라 필요한 신호를 만들어 결과를 얻을 때까지의 단계 인출 - 간접 - 실행 - 인터럽트 4..