전체 글
-
Calculator 만들기) 2. css 스타일 완성하기HTML & CSS & JAVASCRIPT 2021. 1. 22. 19:37
1. index.html AC DEL ÷ 1 2 3 * 4 5 6 + 7 8 9 - . 0 = 2. styles.css *, *::before, *::after { box-sizing: border-box; font-family: Arial, sans-serif ; font-weight: normal; } body { padding: 0; margin: 0; background: linear-gradient(to right,#ffa585,#ffeda0); } .calculator-grid { display: grid; justify-content: center; align-content: center; min-height: 100vh; grid-template-columns: repeat(4, 100px..
-
이것이 코딩테스트다 - 5) DFS/BFS알고리즘 2021. 1. 22. 19:33
DFS : (재귀용법을 이용해서) 모든 노드를 방문할 때 - (stack) BFS : 두개의 노드를 최단거리로 방문할 때 (최단거리 구하기 문제) - (가까운 노드부터 방문한다, queue) 5.1) 음료수 얼려먹기 #include #include #include #include #include #include using namespace std; int n, m; int Ice[1000][1000]; bool dfs(int x, int y) { if (x = n || y = m)//범위내 충족하는지 확인 { return false; } if (Ice[x][y] == 0)//갈수 있는 공간이라면 { Ice[x][y] = 1;//방문표시 남기고 dfs(x + 1, y);//상하좌우 방문 dfs(x - 1,..
-
이것이 코딩테스트다 - 4) 구현알고리즘 2021. 1. 21. 20:05
깃허브에 올리는게 11일만이라서 너무 민망...😂 죄책감 어쩔 것이여...😭 아예 안한건 아니고 자바기초를 다시 보고 스프링 강의를 시작해서 그런거다. (그러하다) 알고리즘도 빼지 말고 다시 달리자! 4.1) 상하좌우 #include #include #include #include #include #include using namespace std; int n; string A; int x = 1; int y = 1; int dx[4] = { 0,0,-1,1 }; int dy[4] = { -1,1,0,0 }; char movetypes[4] = { 'L', 'R', 'U', 'D' }; int main() { cin >> n; cin.ignore();//버퍼 비우기 getline(cin, A); for ..
-
Calculator 만들기) 1. 기본 html, button 디자인 만들기HTML & CSS & JAVASCRIPT 2021. 1. 21. 19:57
javascript 기본 예제로 생각한 calculator 만들기 유튜브의 강의를 보고 따라하기로 했다. https://www.youtube.com/watch?v=j59qQ7YWLxw 1. index.html AC DEL ÷ 1 2 3 * 4 5 6 + 7 8 9 - . 0 = 2. styles.css *, *::before, *::after { box-sizing: border-box; font-family: Arial, sans-serif ; font-weight: normal; } body { padding: 0; margin: 0; background: linear-gradient(to right,#ffa585,#ffeda0); } .calculator-grid { display: grid; ju..
-
Blooger Website) 8. 애니메이션 추가하기HTML & CSS & JAVASCRIPT 2021. 1. 9. 16:54
만든 반응형 웹사이트에는 애니메이션이 추가되어있지 않은데, 이를 수정하여 애니메이션이 작동되도록 추가해보자. 먼저 aos 라는 사이트에 들어가서 스크롤 애니메이션 코드를 받아야 한다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 여기서 다운로드한 파일에서 aos.css, aos.js파일을 프로젝트의 css, js 파일로 옮겨준다. 이후 main.js와 index.html파일에 aos구간을 추가하여 작동하도록 한다. 1. main.js 다음과 같은 구문을 추가해준다. (사용하기 위해서 인스턴스 생성) //AOS instan..
-
Blooger Website) 7. 반응형 웹사이트로 만들기HTML & CSS & JAVASCRIPT 2021. 1. 9. 16:30
일반적인 웹사이트 사이즈에 대해서는 디자인을 맞췄지만, 여러가지 사이즈를 적용해보면 아래와 같은 식으로 전혀 반응하지 않음을 알 수 있다. 이러한 웹사이트를 사이즈에 따라서 잘 작동하도록 맞줘보자 . 1. main.js 일단 const responsive로 사이즈에 따라서 몇개의 아이템을 구성할 것인지, 설정해준다. owlcarousel 안에 responsive를 넣어서 실행한다. const responsive ={ 0:{ items:1 }, 320:{ items:1 }, 414:{ items:2 }, 1024:{ items:3 } } $(document).ready(function(){ $nav=$('.nav'); $toggleCollapse =$('.toggle-collapse'); /*click e..
-
Blooger Website) 6. footer 섹션 만들기HTML & CSS & JAVASCRIPT 2021. 1. 9. 15:55
페이지의 제일 말단부분을 작성한다. 4개의 영역으로 나누고, about-us, newsletter, follow, instagram을 각각 설정한 후, 하단부분에 copyright부분과 오른쪽중앙부분에 top버튼을 작성하여 클릭시 페이지의 상단부분으로 이동하도록 설정한다. 1. index. html About us Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, ullam sit at consectetur deserunt quae doloribus. Velit officia libero suscipit! Newsletter Stay update with our latest Instagram Follow us Let us be Social Co..
-
Blooger Website) 5. sidebar 만들기HTML & CSS & JAVASCRIPT 2021. 1. 9. 15:48
사이드바 생성을 위해서 카테고리를 만들어주고 그에 따른 정보를 넣어주도록 만들었다. 1. index. html 반복적 내용은 복사 붙여넣기 Category Software (05) Technology (02) Lifestyle (07) Shopping (01) Food (08) Popular Post Admin January 14, 2019 2 comments New data recording system to better analyse road accidents Admin January 14, 2019 2 comments New data recording system to better analyse road accidents Admin January 14, 2019 2 comments New data ..