분류 전체보기 130

사이트를 만들어 봅시다. - 최종합본(01)

- 사이트를 만들면서 블로그를 적으면서 제목이 좀 이상하다는 것을 느꼈지만 어쩔 수 없었습니다. - 다음엔 좀 더 깔쌈하게 만들어 보도록하죠 ㅎㅎ - 오늘 할 것은 그 동안 만든 것들을 하나로 합쳐주는 일 입니다. - 반응형 까지 해주었습니다. - https://kebab000.github.io/web2023/site/site1/index.html 반응형 보고 싶으시면 해당 주소로 가시면 보실 수 있습니다. - 오늘은 전체 코드를 보는 것 보다 부분부분 코드를 보겠습니다. - 헤드 부분입니다. - CSS는 모두 링크를 통해서 가져오는 형식으로 index.heml은 깔끔하게 해주었습니다. - CSS는 원래의 것들을 가져왔고 미디어쿼리 부분만 이따 보도록 하겠습니다. - SEO라는 처음보는 부분이 보이는데 ..

Archive/HTML 2023.03.28

Javascript를 이용한 사이트 만들기! - 퀴즈 효과 사이트 만들기06

- 오늘은 퀴즈효과 6번째 입니다. - 문제를 풀 때 마다 정답과 해설이 나오며 다음문제로 넘어가기를 누르면 다음문제가 나오는 형식입니다. - 전체코드를 먼저 보고 스크립트 부분을 보겠습니다. Quiz 주관식 확인하기(여러문제) 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음문제 im.kebab00@gmail.com - 크게 달라진 부분은 많이 없습니다. 정답확인 부분이 다음문제 버튼으로 바뀐 정도가 있겠네요 - 큰 틀은 main안에 넣어두고 그외 안에 들어가는 부분은 innnerHTML를 통해서 넣어주었습니다. - 스크립트를 보시죠 - 저번처럼 배열안에 객체를 넣어 문제 정보를 저장하였습니다. - 그건 쉬운니까 생략하겠습니다. - 문제를 출력하는데 저번과 차이가 있습니다. - 저번에는 모든 ..

Archive/Javascript 2023.03.27

사이트를 만들어 봅시다. - Header Type(01)

- 헤더 유형을 만들어 보겠습니다. - 좌측에 로고가 있고 가운데 메뉴부분이 있고 우측 로그인 버튼이 있는 형식입니다. Plant Planner 소개 이로운 점 주의할 점 관리방법 공지사항 연락방법 로그인 - reset 부분은 다른 것들과 비슷합니다. - 로고가 들어갈 div박스 하나와 메뉴가 나열될 a태그들을 li과ul로 감싸서 만들고 로그인 창으로 이동할 a태그가 있는 div 박스를 만들어 줍니다. - CSS 헤드워랩 부분을 보겠습니다. /* header__wrap */ .header__inner { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #ccc;..

Archive/HTML 2023.03.26

Javascript를 이용한 사이트 만들기! - 퀴즈 효과 사이트 만들기05

- 5번째는 문제가 60개 있는 사이트를 만들어 보았습니다. - 정답확인을 눌렀을 때 틀렸는지 맞았는지와 함께 점수를 알려주는 버튼도 만들었습니다. - 바로 스크립트 코드로 넘어가 보도록하죠 const quizInfo = [ { infoType : "정보처리 기능사" , infoTime : "2011년 4회" , infoNumber : "20110401", infoQuestion : "일반적으로 명령어의 패치 사이클 중에는 현재 수행하고 있는 명령어의 위치를 가리키고, 실행 사이클 중에는 바로 다음에 실행할 명령어의 위치를 가리키는 Register는?", infoChoice : { 1: "누산기(accumulator)", 2: "프로그램 카운터(program counter)", 3: "명령어 레지스터(i..

Archive/Javascript 2023.03.25