june blog

퀴즈 이펙트 5번 입니다. 완성된 화면 입니다. html코드입니다. Quiz객관식 확인하기(여러문제) 유형 1 2 3 4 5 ture403@gmail.com 다중으로 문제를 만들때 일일이 HTML에 입력해서 표출하는건 너무 노다가 작업입니다. 자바스크립트를 이용해서 반복을 해서 문제를 계속 표출하게 하는게 더 효율적일 것입니다. JS코드입니다. const quizInfo = [ { infoType : "정보처리 기능사", infoTime : "2011년도 5회", infoNumber : "20110501", infoQuection : "JK 플립플롭(Flip Flop)에서 보수가 출력되기 위한 J, K의 입력 상태는?", infoChoice : { 1: "J=1, K=0", 2: "J=0, K=1", 3..

search 이펙트 화면 입니다. HTML 코드입니다. 1 2 3 4 5 6 자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animation-direction : 애니메이션 움직임 방향을 설정합니다. animation-du..

완성된 사진입니다. HTML 코드 입니다. Quiz객관식 확인하기 1 2 3 4 5 정답입니다. 틀렸습니다! 정답 확인 하기 ture403@gmail.com div박스를 만들어서 quiz_choice 클래스를 만들어서 거기안에 4개의 inupt박스를 만들었습니다. input type을 라디오로 하고 그안에 이름을 choice로 설정 하고 각각 value값을 넣어주었습니다. 정답확인하기 버튼을 button태그를 써서 만들었습니다. quiz_desc 를 만들어서 해설을 넣었습니다. CSS코드 입니다. 강아지는 전에 있는 코드를 봐주세요 /* header */ #header { position: fixed; left: 0; top: 0; background-color: #262626; color: #fff; ..

위에는 완성된 화면입니다. HTML 코드입니다. Quiz객관식 확인하기 1 2 3 4 정답입니다. 틀렸습니다! 정답 확인 하기 ture403@gmail.com CSS 코드입니다. /* header */ #header { position: fixed; left: 0; top: 0; background-color: #262626; color: #fff; padding: 10px; margin-bottom: 100px; width: 100%; z-index: 1000; display: flex; justify-content: space-between; } #header::before { content: ""; border: 4px ridge #a3a3a3; position: absolute; left: 5px..

퀴즈 이펙트 02 번 결과 화면 입니다. HTML 코드입니다. Quiz주관식 확인하기 유형 1 2 . 정답 확인 하기 설명 ture403@gmail.com css 코드 입니다 (강아지 이미지는 전에 있는 퀴즈 블로그 를 참조 하세요.) /* header */ #header { position: fixed; left: 0; top: 0; background-color: #262626; color: #fff; padding: 10px; margin-bottom: 100px; width: 100%; z-index: 1000; display: flex; justify-content: space-between; } #header::before { content: ""; border: 4px ridge #a3a3a..

퀴즈 이펙트 초기 구성 만들기 HTML 코드 Quiz정답확인하기 유형 . 정답 확인 하기 ture403@gmail.com reset.css 코드 @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; color: #222; } h1,h2,h3,h4,h5,h6 { font-weight: normal; } ul,ol,li { list-style: none; } img { vertical-align: to..