필요없는 목록/CSS 스타일 38

패럴렉스 효과 6 / 7

HTML 삽입 미리보기할 수 없는 소스 이번에 배운 패럴렉스 효과는 글씨가 밑에서부터 위로 올라옵니다. 그리고 글씨가 위로 올라올떄 몇몇 글씨는 시간차를 주어서 나중에 나오게 했습니다. HTML코드 01 Section1 성공은 준비된 기회와 만나는 것이다. 훌륭한 기회가 없다면, 자신의 능력을 끌어내는 기회를 만들어야 한다. 02 Section2 자신을 믿고 당당하게 꿈을 향해 나아가라. 당신이 믿는다면, 누구나 당신을 믿게 될 것이다. 03 Section3 가장 큰 위험은 위험을 감수하지 않는 것이다. 더 나은 미래를 향해 나아가려면 불확실성과 위험을 감수하며 도전해야 한다. 04 Section4 최선을 다하고 실패하더라도, 실패하는 것보다 아무것도 하지 않는 것이 훨씬 더 낫다. 05 Section5..

간단한 게임 만들기 음악 리스트 페이지 꾸며보기 2 / 5

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 만들었던 메인페이지 제작을 완료 한 뒤에 음악 리스트 페이지를 만들었습니다. 음악리스트 넣은 모습 JAVASCRIPT코드 const musicWrap = document.querySelector(".music__wrap"); const musicName = musicWrap.querySelector(".music__control .title h3"); const musicArtist = musicWrap.querySelector(".music__control .title p"); const musicView = musicWrap.querySelector(".music__view .image img"); const musicAudio = mu..

간단한 게임 만들기 전에 메인 페이지 꾸며보기 1 / 5

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 테트리기나 지렁이 게임을 만들기 전에 메인 페이지를 만드는 작업을 했습니다. 그리고 학원에서 다시 미션을 주네요. -_-; 1.시간 구현 2 OS 크기 구현 3. 아이콘 클릭 + 해더 배경 체인지 4. 현재 뮤직듣기를 클릭했습니다. HTML코드 WEBS GAME WORLD 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 현재 맥을 사용하고 있으면, 화면 크기는 1920X760입니다. 코드 설명 1.div태그 .cursor은 화면에서 움직이는 마우스 모양이 들어갑니다. 2.div태그 #header에는 로고, 드래그시 메시지, 현재 시간이 나옵니다. 3.div태그 .icon__box은 4개의 이미지 파일이 들어갑니다. 4.footer태그 #foot..

패럴렉스 효과 2 / 7 (닷버튼 클릭 애니메이션)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 패럴렉스 2단계는 닷버튼을 클릭하면 애니메이션 효과를 부여합니다. 브라우저에서 scroll을 하면 scroll값을 갖고와서 그 값으로 애니메이션을 부여합니다. HTML코드 Javascript Parallax Effect01 패럴랙스 이팩트 : 사이드 메뉴 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 성공은 준비된 기회와 만나는 것이다. 훌륭한 기회가 없다면, 자신의 능력을 끌어내는 기회를 만들어야 한다. 01 Section1 자신을 믿고 당당하게 꿈을 향해 나아가라. 당신이 믿는다면, 누구나 당신을 믿게 될 것이다. 03 Section3 가장 큰 위험은 위험을 감수하지 않는 것이다...

패럴렉스 효과 1 / 7 (고정된 화면, 공간 이동)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 포트폴리오 준비도 할겸. 사이트를 만들때 효과를 더 주기 위해서 패럴렉스 고정된 방식을 배웠습니다. HTML코드+CSS코드 Javascript Parallax Effect01 패럴랙스 이팩트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 성공은 준비된 기회와 만나는 것이다. 훌륭한 기회가 없다면, 자신의 능력을 끌어내는 기회를 만들어야 한다. 01 Section1 자신을 믿고 당당하게 꿈을 향해 나아가라. 당신이 믿는다면, 누구나 당신을 믿게 될 것이다. 03 Section3 가장 큰 위험은 위험을 감수하지 않는 것이다. 더 나은 미래를 향해 나아가려면 불확실성..

(업그레이드) 랜덤으로 30개의 명언 출력하기 + 배경 이미지 변환

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 저번에 문제를 풀었던 명언 30개에다가 추가하라는 미션을 받았습니다. 배경 이미지가 계속 변하게 만들라는 것입니다. (밑에가 랜덤 30개 미션이었습니다.) https://skadldldl123.tistory.com/manage/newpost/78?type=post&returnURL=https%3A%2F%2Fskadldldl123.tistory.com%2Fmanage%2Fposts HTML+CSS+JAVASCRIPT코드 2초만 기달려주세요 코드 설명 1. img태그를 하나 만듭니다. 2. let Img = document.querySelector("img"); querySelector("img");로 img태그를 찾습니다. 3. setInterval..

로또 번호를 set()을 이용해서 만들라는 문제입니다.

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 ㅠ_ㅠ... set()을 이용해 보라고해서 이용했어요. 처음에 set으로 중복을 지우는데 중복이 계속 삭제가 되는거애요. 그래서 중복이 제거된 부분에 값들을 추가를 해봐도 중복이 계속 겹치더라고요. 그래서 다시 중복을 지우니간 중복이 제거가 되는겁니다.ㅠ_ㅠ (머리가 아파왔습니다.) 6시간 헤매고 난다음. 구글링 30분 하고나서야 set()의 비밀을 알았어요... for()을 이용해서 만들면 중복을 제거한다고 하더군요.. -_- 6시간을 뺏겼지만. 이전보다 배열에 대해 좀 더 알게 되어서 괜찮네요 (공부해야 하는데.. 못했어요.) 문제내용 자바스크립트를 사용해서 자동으로 복권 번호를 생성해주는 프로그램을 작성하세요. set()을 꼭 이용할 것 / ..

자바스크립트 fetch를 활용한 문제 풀어봐요.~~~

완성된 모습 HTML 삽입 미리보기할 수 없는 소스 문제 내용 json파일에 배열로 생성한 내용이 30개가 있습니다. ("명언"과 "사람 이름" 입니다.) 여기에 저장된 내용들을 랜덤하게 출력을 하라는 문제입니다. 저는 2개로 만들어 봤어요. 1) 1개씩 차례대로 추출하는 방법입니다. (문제를 잘못 봐서 만들었어요. 지우기가 아깝네요.) 2) 랜덤으로 추출하는 방법입니다. 1) 1개씩 차례대로 추출하는 코드입니다. 3초만 기달려주세요 코드설명 1. fetch()로 json파일을 불러옵니다. 2. let Result, let Quote, let What은 명언, 사람 이름, 몇번인지 출력할 변수입니다. 3. setInterval은 주어진 시간만큼 반복적으로 실행합니다. 4. result.quotes[num..

슬라이드 API 없이 코드로 하기 7 / 10 (버튼 클릭 + 썸네일 클릭)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에는 닷버튼 대신 썸네일이 있습니다. 썸네일을 클릭하면 슬라이드가 이동합니다 그리고 NEXT와 PREV버튼을 누르면 이동합니다. HTML+CSS코드 Javascript Slider Effect07 슬라이드 이펙트 : 이미지 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next mailto: skadldldl123@gmail.com 코드설명 1.div태그인 .slider__wrap은 안에 있는 내용물들을 전부 이동 시켜줍니다. 2.div태그인 .slider__img는 이제 슬라이드에 들어갈 이미지가 들어갑니다 (이것은 JAVASCRIPT로 넣어줄 예정입니다.) 3.div태그인 .slider__thumb은 이제 닷버튼 대신 들어갈 썸..

슬라이드 API 없이 코드로 하기 6 / 10 (버튼 클릭)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 닷버튼을 클릭하면 슬라이드가 이동을 합니다. Next와 Prev버튼은 선생님이 해주셨습니다. HTML+CSS코드 Javascript Slider Effect07 슬라이드 이펙트 : 이미지 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next mailto: skadldldl123@gmail.com 코드설명 (이번것도 HTML을 슬라이드 2번을 활용해서 만들어서 중복이네요) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 overflow로 잘..

슬라이드 API 없이 코드로 하기 5 / 10 (연속적으로 "위"로 이동)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번거는 슬라이드 4번을 이용해서 위로 올라가는 것을 만들어 보라는 미션입니다. (JAVASCRIPT, GSAP, JQUERY) HTML+CSS코드 Javascript Slider Effect05 슬라이드 이팩트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 mailto:skadldldl123@gmail.com 코드 설명 (역시나 슬라이드 2번을 재탕 중이네요) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 overflow로 잘라줍니다. (주렁 ..

슬라이드 API 없이 코드로 하기 4 / 10 (연속적으로 "좌"로 이동)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 이번에도 슬라이드를 API 없이 코드를 입력하는 것 입니다. 이번에는 슬라이드가 연속적으로 자연스럽게 이동하는 것을 배웠습니다. (JAVASCRIPT, GSAP, JQUERY)를 활용했습니다. HTML+CSS코드 Javascript Slider Effect04 슬라이드 이팩트 : 좌로 움직이기(연속적으로) 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (슬라이드 2번과 똑같은 HTML과 CSS라 설명이 중복이 됩니다.) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 sli..

슬라이드 API 없이 코드로 하기 3 / 10 (자동으로 "위"로 이동)

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 이번 슬라이드도 API 없이 코드로 작성합니다. 이번거는 위로 이동하는 슬라이드 입니다. (1번과 2번을 활용해서 만들어보기 미션이었네요) HTML+CSS코드 Javascript Slider Effect02 슬라이드 이팩트 : 위로 움직이기 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (이번것은 2번을 활용하여서 HTML내용이 슬라이드 2번과 똑같습니다.) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼만 주고 ov..

슬라이드 API 없이 코드로 하기 2 / 10 (자동으로 "좌"로 이동)

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 이번에도 API없이 코드로 만들어보는 슬라이드 유형입니다. 이번에는 absolute없이 사용하는 방법입니다. (JAVASCRIPT, GSAP, jQuery를 사용했습니다.) HTML+CSS코드 Javascript Slider Effect02 슬라이드 이팩트 : 좌로 움직이기 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (이번거가 특히 이해가 안가서 1시간 쳐보고 이해가 갔습니다.) 1.div태그인 slider__wrap은 전체 내용물을 이동 시켜줍니다. (이번것도 align-items는 먹히지 않아서 height값을 부여해서 가운데로 이동하였습니다.) 2.div태그인 slider__img는 이제 보여줄 width만큼..

슬라이드 API 없이 코드로 하기 1 / 10 (자동으로 "이미지"가 이동)

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 오늘은 슬라이드 만들기를 배웠습니다. API 없이 직접 코드로 짜는 연습을 먼저 했습니다. HTML + CSS 코드 Javascript Slider Effect01 슬라이드 이팩터 1 2 3 4 5 mailto:skadldldl123@gmail.com 코드 설명 (처음이라 슬라이드 배치 방법이 이해가 안가서 쳐보고 이해를 했습니다.) 1.div태그인 .slider__wrap은 전체적인 내용물들을 가운데로 배치해줍니다. (align-items는 안먹혀서 height값을 줬습니다.) 2.div태그 .slider__img는 .slider의 보여줄 만큼의 width를 주고 overflow를 줍니다. (여기에서는 이제 보여줄 width의 값만큼 지정해주고 ove..

CBT퀴즈에서 배운것들 활용하기(점수, 시간에 00:00으로 만들기, 이름입력)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 어제 완성된 코드에 3가지를 추가하라는 미션을 받았습니다. 1.문제를 맞추거나 틀렸으면 그것들을 표시해줄 것 2. 시간을 00:00으로 만들어 볼 것 3.input type="text"에 이름을 입력하면 "수험자"에 표시하기 1번 문제 : HTML코드+ JAVASCRIPT코드 맞춘개수 : 0 틀린개수 : 0 코드설명 1. em태그인 .cbt__score는 문제를 맞추면 갯수를 표시해줄겁니다. 2. em태그인 .cbt__wrong은 문제를 틀렸다면 틀린 갯수를 표시해줄겁니다. let wrong = 60; let hap = 0; if(numberAnswer == question.answer){ console.log("정답"); cbtselects[nu..

(보충)CBT퀴즈 따라 만들기

보충 작업 완성물 HTML 삽입 미리보기할 수 없는 소스 최종 완성된 사이트 어제가 지나고 화가 가라 앉으니간 어느정도 따라가기 시작하네요. HTML코드 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2011년 1회 웹디자인기능사 기출문제 남은 시간 59분 10초 답안지 제출하기 59분 10초 답안지 제출하기 수험자 : 안교남 전체 문제수 : 0 남은 문제수 : 0 1 1 2 3 4 필기 시험 공부하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 200..

(부족)CBT 퀴즈 따라 만들기

최종 완성본 HTML 삽입 미리보기할 수 없는 소스 오늘은 CBT퀴즈 만들기를 따라 만들었습니다. 초반에는 이해가 갔다가 마지막에 너무 헷갈렸습니다. HTML코드 Quiz 객관식 확인 CBT 유형 1 2 3 4 5 6 7 2011년 1회 웹디자인기능사 기출문제 남은 시간 59분 10초 답안지 제출하기 59분 10초 답안지 제출하기 수험자 : 안교남 전체 문제수 : 60문항 남은 문제수 : 59문항 1 1 2 3 4 코드설명 1. div태그 .container은 내용물들을 가운데로 옮겨주고. 반응형을 위해서 특정 max-width에서 퍼센트(%)을 줍니다. 2. div태그 .cbt__header은 "시험 종목", "남은 시간", "답안지 제출하기"를 담고 있습니다. 3. div태그 .cbt__header안..

간단한 문제 2개를 풀어봤습니다.~

1번 문제. 이미지 위에 마우스 포인터를 올려 놓으면 다른 이미지로 변하고. 마우스가 밖으로 이동하면 원래의 이미지가 돌아옵니다. (자바스크립트는 mouseover와 mouseout을 사용해야합니다.) 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 HTML+CSS코드 코드 설명 1. div태그 .img1을 만듭니다.(여기는 재가 좋아하는 교촌치킨 윙봉 사진이 들어갑니다.) 2. div태그 .img2을 만듭니다.(여기도 재가 좋아하는 교촌치킨 닭다리만 사진이 들어갑니다.) 3. CSS에서는 .img1에다가 background-image로 이미지를 불러오고 width값과 height값을 줍니다. 4. .img2에다가 똑같이 background-image로 이미지를 불러오고 width값과 height값을..

사이트 합치기(section, header, banner, footer)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 링크 이번에는 여태까지 배웠던 header, section, slide, footer을 쪼개서 만들고 리액트를 배우기 전에 이것들을 하나하나 합치는 작업을 했습니다. 처음으로 복붙해서 CSS를 만들다보니 공통 요소의 중복된 이름 때문에 문제가 있었는데 해결했네요. 으으으으..... HTML코드 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 사이트 로고 pizza 소개 훈련방법 교육방법 주의할점 공지사항 연락처 로그인 슬라이드 영역 event 야채, 과일, 고기의 좋은 점 영양가가 높다. 야채는 비타민, 미네랄..

quiz웹사이트 만들기6(간단한 자바스크립 + HTML + CSS)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 주소 이번 퀴즈 사이트는 "다음 문제" 버튼을 누르면 정답체크와 다음 문제가 나오는 형태입니다. HTML코드 Quiz객관식 확인하기(여러문제) 유형 1 2 3 4 5 6 정답입니다. 틀렸습니다. 다음 문제 맞춘개수 0개 / 총 : 0점 현재 : 1번 mailto:skadldldl123@gmail.com 코드 설명 1. div태그 중 .quiz__wrap은 "시험 종류", "시험 문제", "문제 내용", "버튼" 전부다 가지는 div태그 입니다. 2. div태그 중 .quiz__title은 "시험종류"와 "시험회차"를 가지고 있습니다. 3. div태그 중 .quiz__question은 "시험 번호"와 "시험 문제"를 가지고 있습니다. ..

quiz웹사이트 만들기5(간단한 자바스크립 + HTML + CSS)

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 주소 이번에는 html에 쓰던 코드를 자바스크립트로 작성하는 것을 배웠습니다. 그리고 퀴즈를 활용하는 것도 같이 배웠습니다. JAVASCRIPT코드 코드 설명 1. const quizInfo에는 "시험 종류", "회차", "문제 번호", "문제", "문제 내용", "문제 답", "문제 설명"이 들어갑니다. 2. const quizWrap은 .quiz__wrap의 클래스를 찾습니다. 3. const exam = []; quizInfo.forEach((question, number) => { // 탬플럿 리터럴 방식 exam.push( ` ${question.infoType} ${question.infoTime} ${number + 1}..

맞는 단어 찾는 프로그램 만들어보기

최종 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 주소 이번에 배운 것은 css 명령어들을 213개 저장시켜 놓고 이것들을 찾는 것을 만들었습니다. HTML코드 1 2 3 4 5 자바스크립트 자바스크립트 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지..

footer 타입(6번째 footer부분 웹퍼블리싱 작업)

footer type 완성본 HTML 삽입 미리보기할 수 없는 소스 footer type 사이트 주소 사이트를 보다보면 맨밑에 회사 주소?와 회사 소개 등이 써져있는 부분을 제작해 보았습니다. HTML코드 푸터 음식 소개 음식 종류 음식 재료 음식 만들기 음식 추가 음식 구매 온라인 구매 오프라인 구매 밀키트 구매 음식 재료 판매처 원산지 유통 기한 인사말 CEO 소개글 인사말 추가 소개 건강식품 효능 면역력 건강증진 고객센터 전화 문의 온라인 문의 이메일 문의 2023 피그마로 만들어본 사이트 Portfollo is Power All Right Reserved 코드 설명 1. footer태그의 #footer__wrap은 "메뉴"와 "맨밑에 소개글"을 담고 있습니다. 2. div태그 중 .containe..

마우스 효과 3 / 5

마우스 효과 3번째 완성 HTML 삽입 미리보기할 수 없는 소스 마우스 효과 3번째 완성 주소 이번 3번째 효과는 뒤에 배경 이미지가 1개 있습니다. 그리고 div태그로 width값, height값을 주고 background-image로 1개 넣었습니다. 그리고 fixed로 고정을 시켜놓고 마우스를 움직일때마다 배경의 이미지가 나오게 했습니다. HTML코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 The most important thing in life is not how it ends, but how it starts. 인생에서 가장 중요한 것은 그것이 어떻게 끝나느냐가 아니라, 어떻게 시작하는가이다 mailto:skadldldl123@gma..

마우스 효과 2/ 5

마우스 효과 2번째 완성본 HTML 삽입 미리보기할 수 없는 소스 마우스 효과 2번째 이동 이번 작업은 2개의 div가 마우스를 따라오는 형태입니다. HTML코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Set a goal and try to achieve it. Don't be afraid of failure and try more. 목표를 세우고 그것을 이루기 위해 노력하라. 실패를 두려워하지 말고 더 많이 시도하라 mailto:skadldldl123@gmail.com 코드설명 1. div태그 중 .mouse__wrap은 "마우스를 따라다니는 div태그 2개와" / "가운데에 들어가는 Text"를 담고 있습니다. 2. .mouse__curso..

마우스 효과 1 / 5

마우스 효과 1번 완성본 HTML 삽입 미리보기할 수 없는 소스 완성본 주소 마우스가 움직이면은 제작한 모양이 마우스를 따라오는 효과를 만들어봤습니다. HTML코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 To accomplish the impossible, let's start with the possible. 불가능한 일을 해내려면, 가능한 일부터 시작 하자 clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px mailto:skadldldl123@gmail.com 코드설명 1. div태그 .mouse__c..

이미지텍스트 타입(5번째 section부분 웹퍼블리싱 작업)

이미지 텍스트 유형1 완성본 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 보기 이번에는 기존 section태그와는 다르게 가상태그(before, after)를 사용하여 만들었습니다. HTML+CSS코드 NOTICE 치킨의 종류 후라이드 치킨 바삭하고 고소한 맛이 좋다는 것: 후라이드 치킨은 바삭하고 고소한 맛이 특징입니다. 특히, 바삭한 피부와 부드러운 고기의 조화로 인해 많은 사람들이 즐기는 음식입니다. 더보기 양념 치킨 맛있다는 것: 양념 치킨은 매운 맛과 달콤한 맛이 조화로워서 많은 사람들에게 인기가 있습니다. 특히, 매운 맛을 좋아하는 사람들에게는 더욱 좋은 선택이 됩니다. 더보기 간장 치킨 고소하고 짭쪼름한 맛이 좋다는 것: 간장치킨은 간장과 고추장을 사용하여 고소하고 짭쪼름한 맛을 내..

quiz웹사이트 만들기4(간단한 자바스크립 + HTML + CSS)

퀴즈 4번 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 페이지 주소 퀴즈 4번은 radio버튼으로 만든 것들을 클릭하고 그거에 대한 "정답"과 "오답"을 보여줍니다. HTML코드 정답입니다. 틀렸습니다. 정답 확인하기 설명 mailto:skadldldl123@gmail.com 코드 설명 이번에는 raio버튼을 통해서 선택을 하는 퀴즈 입니다. 1. main태그 안에는 퀴즈에 들어가는 "문제 번호", "문제 내용", "강이지 이미지", "radio 버튼"이 있습니다. 2. div태그 중 .quiz__header에 있는 h2태그 .quiz__title에는 "시험 종목"과 "회차"가 나옵니다. 3. div태그 중 .quiz__main에는 "문제 번호", "문제 내용", "강이지 이미지", "ra..