오늘은 이미지 타입의 레이아웃을 만들어보겠습니다~!! 이미지 유형 페이지 만들기 피그마에서 만든 디자이늘 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정해주기 CSS 리셋(CSS Reset)은 웹 사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩 값이 먹혀서 편하겠죠? 이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다. 그리고 바디 안쪽에 섹션들을 나누어주겠습니다. 바디 부분에 이미지 타입 섹션들을 지정해주고 CSS를 설정해줍니다. (제목, 설명글 등등) 구역을 잘 나눠주고 이름을 지정해줘야 나중에 CSS를 설정할 때 효율성이 좋습니다! section태그와 h2태그, p태그, div태그에 각각 class로 이름을 지..

한 달 주기로 오늘의점심을 올리려했으나 너무 많아질 거 같아서 .. 매주 금욜마다 써보려 한다 ^____^👍 맛집 추천받습니다 💭 아마 스터디 카페에서 코딩 공부하는 사람은 나밖에 없을 거야 ... 노트북존에는 다행히 사람이 별루 없다 쾌적해서 넘나 좋은 것 👍 주말에 화랑유원지 순회~~ 친구랑 만나서 수다떨면서 걷다보니 2시간 훌쩍.. 아몬드브리즈는 초코맛이 존맛 밤에오면 이뻐유 얼른 봄 오면 벚꽃 보러 가야지🌺🌺🌺 토스트 냠 아침에 걸어갈 때 노래 듣는데 이제 들을 노래가 점점 없어진다.. 하도 듣다보니 질려버렸어~~ 하지만 역시 스엠 비트는 너무 좋다. 플리 추천 드갑니다 https://youtu.be/YUMgmHVvfPw https://youtu.be/Oltiad54Euw 젊은이의 초밥~~ 점심특..

오늘은 자바스크립트 시험 오답노트를 작성해보겠습니다!! 이번엔 정말 최악의 점수를 ... 😂😂 헷갈리는 문제도 넘 많았고 사실 공부를 열심히 안했습니다 👍🤣 틀린 문제를 꼼꼼하게 살펴보고 오답노트를 작성해보겠습니다!! 자바스크립트 오답노트 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } ✔답 확인하기 false 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } ✔답 확인하기 12456 오답노트 num에는 변수 0을 설정해주고, while문과 if문을 이용해 반복문과 조건식을 걸어줍니다. num++을 먼저 실행하기..

오늘은 어제 이어서 다른 퀴즈 이펙트를 풀어보겠습니다! 어제는 정답만 나오는 퀴즈 효과였다면 이번엔 사용자가 답을 입력하고 정답인지 오답인지 판별하는 스크립트를 짜보겠습니다!! 자바스크립트 퀴즈 이펙트(두 번째) 만들기 어제와 비슷한 구조로 작업하겠습니다! 영역 지정해주기 Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 yds43557340@gmail.com 완성된 화면과 페이지 https://yeodaseul4355.github.io/web2023/javascirpt/quiz/quizEffect02.html 도움이 되셨다면~~ 많은 공감과 댓글 부탁드립니다 ^__________^ 퀴즈 이펙트의 다른 유형 보러가기 퀴즈 이펙트 1: https://duektmf34.tistory.co..

자바스크립트 퀴즈 이펙트 만들기 오늘은 자바스크립트에서 배운 내용들을 기반으로 퀴즈 이펙트를 만들어보겠습니다~!! 완성화면은 이런 화면! CSS설정한 부분은 너무 길고 복잡하니 패스하겠습니다! 스크립트 부분만 짚고 넘어가겠어요 📝 선택자 만들기 // 선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title span"); const quizTime = quizWrap.querySelector(".quiz__title em"); const quizQuestion = quizWrap.querySelector(".quiz__question span"); const ..

오늘은 카드 타입의 레이아웃을 만들어보겠습니다~!! 카드 유형 페이지 만들기 피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정해주기 CSS 리셋(CSS Reset)은 웹 사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠?? 이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다. 그리고 바디 안쪽에 섹션들을 나누어주겠습니다. 카드 타입 섹션들을 지정해주고 CSS를 설정해줍니다. (제목, 설명글 등등) 향수, 그 날의 기분 향수는 보통 향기로 연결되어 있는데, 향수의 이미지는 여러 가지로 표현될 수 있습니다.향수나 화장품의 조향은 소비자에게 매우 중요한 요소 중 하나입니다. 좋은 ..