100S00

Quiz 주관식 확인하기 유형 1 2 3 4 . 정답입니다! 오답입니다! 정답 확인하기 . 정답입니다! 오답입니다! 정답 확인하기 . 정답입니다! 오답입니다! 정답 확인하기 esansi@naver.com // 선택자 const quizWrap = document.querySelector(".quiz__wrap") const quizTitle = quizWrap.querySelectorAll(".quiz__title") //시험종목 /시간 const quizQusetionNum = quizWrap.querySelectorAll(".quiz__question em") //문제번호 const quizQusetion = quizWrap.querySelectorAll(".quiz__question span") /..

설정 해 둔 리셋 값을 스타일에 넣고 폰트도 넣는다 그후 section 박스를 만들고 class값 image wrap 을 넣어준다. 텍스트를 가운데 넣어주는 리셋 값과 폰트를 적용시키기 위해 center 와 nexon를 넣어줍니다. 그후 섹션을 제목과 부제가 들어갈 container 와 이미지가 들어갈 image inner로 나눠준다. container는 리셋 값을 사용 하고 image inner는 style에 새로운 값을 설정해준다 그리고 이미지가 들어갈 div 박스를 두개 만들어 주고 image 라고 클래스 값을 줍니다. 그후 이미지가 들어갈 박스와 텍스트가 들어갈 박스 각 각 image header ,image body 로 클래스 값을 지정해 줍니다. img src 로 image header 에 이..

Quiz 주관식 확인하기 유형 1 2 . 설명 esansi@naver.com // 선택자 const quizWrap = document.querySelector(".quiz__wrap") const quizTitle = quizWrap.querySelector(".quiz__title span") const quizTime = quizWrap.querySelector(".quiz__title em") const quizQusetionNum = quizWrap.querySelector(".quiz__question em") const quizQusetion = quizWrap.querySelector(".quiz__question span") const quizAnswerConfirm = quizWrap...

퀴즈 효과 Quiz 정답 확인하기 유형 . esansi@naver.com position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. position: relative position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마..

카드 유형 정리 1. 피그마에서 레이아웃틀을 제작을 완성한다. 2. visual studio code 에서 div section를 만듭니다. 그 후 head에 스타일 태그를 추가 한 뒤 리셋 값을 설정합니다. 리셋값 이란? CSS 리셋(CSS reset)은 웹 브라우저의 기본 스타일을 초기화하고, 모든 HTML 요소가 동일한 시작점에서 시작하도록 설정하는 CSS 스타일 시트입니다. 리셋 값 폰트 를 다 설정해준다. 그 후 작업을 할 영역인 1200px의 구역을 만들기 위해 를 생성해준 뒤 h2와 p 를 이용하여 제목과 내용을 입력해주고 카드의 섹션인 artcle을 하나 더 생성 해줍니다. 카드가 3개이기 때문에 artcle 안에 div class card 를 3개 만들어 줍니다. 그 후 카드가 잘 정렬이..