본문 바로가기

개발

[CSS]not 선택자 선택 안 됐던 이유 개발 도중 not 선택자가 안 돼서 한 번 실험해보았다. 문제가 됐던 코드 안녕하세요 반갑습니다 실행결과 간단한 코드인데 뭐가 문제가 된건지 모르겠다. 띄어쓰기를 붙이니까 해결됨 안녕하세요 반갑습니다 결론 : 선택자 사용할 때 띄어쓰기 주의하자
[2019 프로그래밍입문 기말프로젝트]라면 가이드 라면을 끓일 때마다 손고자라서 고생한다면? 평소에 라면을 끓이면 항상 다른 일에 집중하다가 겨우 조리하기 때문에 면이 불어 있거나 너무 싱겁거나 짜서 맛이 없었습니다. 라면을 끓일 때마다 이번에는 맛있는 라면을 먹기 위해서는 라면만을 바라봐야 한다는 것이 스트레스가 심했습니다. 맛있는 라면을 위하여 조력자가 되어 줄 가이드를 만들기로 하였습니다. 개인적으로 라면을 끓일 때 문제점을 3가지로 요약할 수 있었습니다. 적절하지 않은 물의 양 적절하지 않는 조리 타이밍 레시피를 따르지 않고 제멋대로 조리 이 세가지를 지킬 수 있게 도와주는 가이드를 만들어 볼 생각입니다. 비빔면을 끓인다고 가정해보겠습니다 우선 라면 가이드를 킵니다. 화면에서 비빔면을 선택하였습니다. 라면 1개를 선택합니다 넣는다를 선택합니다 비..
[2019 웹프로그래밍기초]#결과 보고서 주제 기획의도 목표 방문자 메뉴 구조 및 트리 주제 게임 "오버워치"를 좋아하는 사람들이 즐길 수 있는 페이지 기획의도 오버워치를 좋아하는 게이머로써 오버워치를 웹페이지로 만들어보고 싶은 마음이 있었고 또한 다양한 요소들(리그, 스킨 등)을 한 눈에 볼 수 있는 페이지를 만들고 싶었습니다. 누군가의 계정으로 접속한다고 가정하고 웹페이지를 구상해보았습니다. 목표 방문자 오버워치에 관심을 가지고 있거나 오버워치 리그를 좋아하는 사람, 오버워치 캐릭터를 좋아하는 사람 등 오버워치를 좋아하는 사람들을 대상으로 만들었습니다. 메뉴 구조 및 트리 login.html 에서는 특정 아이디/비번으로 접속할 수 있습니다. main.php 에서는 다른 메뉴에 접속할 수 있습니다. play.html 에서는 오버워치 리그 영상..
[CSS]grid 전체 화면 문제 아이디 .login_grid { display : grid; grid-template-columns : repeat(16, 1fr); grid-template-rows : repeat(9, 1fr); } /*적당히 배치한 것(나중에 수정할 예정이었음)*/ #login_id { grid-area : 3/4/4/5; } #login_src { grid-area : 6/5/7/9; } #login_btn { grid-area : 10/8/11/12; } /*background setting*/ .login_bg { background-image: url("login.png"); background-size: cover; background-repeat: no-repeat; } 개발자도구로 확인해본 결과 bod..
2019 겨울방학 프로젝트#결과
2019겨울방학 프로젝트#구상 스케치 배경화면 플레이 창 플레이 창 - 영웅 이미지 + 정보 확인 영웅 갤러리 창 - 미구현 영웅 갤러리는 각 영웅을 선택하면 그 영웅의 스킨을 선택할 수 있는 창 영웅 갤러리 - 스킨 변경 - 미구현 스킨을 변경한 후 플레이 창에서 영웅을 선택하면 다른 스킨을 확인할 수 있다 리그 창 리그 창 - 코멘트 확인 팀원은 구현하지 않음 그 외에도 감정표현이나 대사를 들을 수 있는 페이지를 만들면 좋겠다 - 미구현
2019겨울방학 프로젝트#4 * 배경화면에서 오버워치 리그 선택 시 * 오버워치 리그 화면에서 원하는 팀을 선택 시 리그 팀을 선택하면 그에 대한 코멘트가 출력되도록 하였다. CODE HTML 코멘트가 들어갈 공간과 버튼이 들어갈 공간을 div 태그로 마련하였다. +) 자바스크립트를 이용하여 클릭하면 beg() 함수가 실행되고, id가 각각 "b"+i인 버튼 20개를 한 번에 구현할 수 있었다 CSS .league{ /*배경화면*/ background-image: url("bg3.jpg"); background-size:cover; } .select_league{ /*리그 코멘트 및 버튼의 위치, 투명도 설정*/ position:fixed; text-align: center; top:60%; opacity:0.8; } .icon{ ..
2019겨울방학 프로젝트#3 영웅 이미지 + 정보 표시 * 배경화면에서 플레이 선택 시 * 플레이 화면에서 원하는 영웅 정보 선택 시 화면에서 영웅을 클릭하면 전체 이미지와 그에 대한 정보가 출력되도록 하였다 CODE HTML 전체 이미지와 그에 대한 정보를 표현할 공간을 img와 div 태그를 이용하여 마련하였다. 그 다음 select_hero 클래스인 div로 클릭할 버튼의 공간을 마련하였다. 버튼을 구현할 때 필요한 자바스크립트는 모두 한 문서로 모으려고 했지만 동적인 웹페이지 구현이 필요하여 html 문서에 마련하였다. +) 자바스크립트를 이용하여 클릭하면 output() 함수가 실행되고, id가 각각 "a"+i인 버튼 29개를 한 번에 구현할 수 있었다 CSS .selection{/*배경화면*/ background-imag..