웹/포토폴리오
-
[바닐라 JS] FAQ 사이트 제작하기 - 0. js 헤멤웹/포토폴리오 2023. 1. 19. 21:49
2023.1.19.목 1. html, css 2. javascript 헤매는 과정 1. javascript 문제) a. 버튼을 클릭하면 아이콘이 두개가 뜸 b. 코드 let show_contents = document.querySelectorAll(".show_content"); let hide_contents = document.querySelectorAll(".hide_content"); // console.log(hide_contents) const btns = document.querySelectorAll(".question-btn"); btns.forEach(function(btn) { btn.addEventListener('click',function() { show_contents = doc..
-
[바닐라 JS] 카운터 프로젝트 제작웹/포토폴리오 2023. 1. 18. 23:47
2023.1.18(수) - html - css - javascript - 블로그 - github 코드 GitHub - JudithHopps/Vanilla-JS: 바닐라 자바스크립트로 작성한 토이 프로젝트 모음집입니다. (리뷰) 바닐라 자바스크립트로 작성한 토이 프로젝트 모음집입니다. (리뷰). Contribute to JudithHopps/Vanilla-JS development by creating an account on GitHub. github.com 전체 구조 1. html a. head style,javascript,view타입 설정 b. body title, num, btn 구조로 되어 있음 Counter 0 DECREASE RESET INCREASE 전체 구조 2. css a. 폰트 구글 ..
-
[바닐라 JS] 책 평가하는 사이트 제작하기 - 2웹/포토폴리오 2023. 1. 17. 22:30
오늘의 목표 왼쪽 / 오른쪽 / 랜덤 버튼 클릭시 컨텐츠 전환 추가 1. html a. fontawesome 폰트에서 icon 추가 b. 버튼 (이전 / 다음 / 랜덤) 추가 random 2. css a. 버튼 (이전 / 다음 / 랜덤) css 추가 /* 버튼 */ .prev-btn, .next-btn { color: var(--color-main); font-size: 1.25rem; background: transparent; border-color: transparent; margin: 0 ; transition: var(--transition); cursor: pointer; } .prev-btn:hover, .next-btn:hover { color: var(--color-author); } ...
-
[바닐라 JS] 책 평가하는 사이트 제작하기 - 1웹/포토폴리오 2023. 1. 16. 23:42
2023.1.16 한 것 - html 코드 작성 - css 코드 작성 2023.1.17 - 블로그 수정 더보기 전체 구조 1. html a. 하나의 index.html로 설정한다. b. head 뷰포트 관련 정보를 적어두었다. title은 Book Review style은 외부 스타일 시트를 링크한다. javascript는 defer 명령어를 통해 head 부분에 첨부한다. c. body body는 main과 footer로 구성되어 있다. (header는 제외하였다.) main 태크 안에 section, article로 구성되어 있고 BEM(Block Element Modifier)을 사용하여 가독성 있는 이름을 이용했다. footer 태그 안에는 sr-only 클래스를 이용하여 스크린 리더를 이용하여 ..
-
[2023년 로드맵] 2023년 목표웹/포토폴리오 2023. 1. 8. 12:05
1월 - html/ css 복습 (~1/8) : 1월 8일 완강 제대로 파는 HTML & CSS - by 얄코 - 인프런 | 강의 코알못도 따라올 수 있는 친절하고 쉬운 강좌! 현업 개발자는 HTML & CSS 박사로 들어주는 끝판왕 강좌!, - 강의 소개 | 인프런... www.inflearn.com - javascript 복습 (~1/ 15) 1월 15일 완강 제대로 파는 자바스크립트(JavaScript) - by 얄코 - 인프런 | 강의 코알못도 따라올 수 있는 친절하고 쉬운 강좌! 현업 개발자는 자바스크립트 박사로 들어주는 끝판왕 강좌!, - 강의 소개 | 인프런... www.inflearn.com - javascript 프로그래머스 Lv.0 100문제 (~1/24) 1월 26일 문제풀이 완성 -..