CSS 학습 사이트 소개 오늘은 CSS Diner사이트의 문제들을 풀어보겠습니다. 이 사이트는 CSS 선택자(Selector)에 대한 문법을 공부해 볼 수 있습니다. CSS라는 게 내용이 많지는 않은 거 같으면서도 막상 코딩을 하면서 Selector의 개념이 부족해서 검색을 통해 답답한 부분을 해결하는데 시간을 많이 소모하기도 합니다. CSS Diner사이트는 여러가지의 HTML 요소(Element)중에서 셀렉터(Selector) 문법을 통하여 일부 문제에서 해당하는 요소를 선택하면 됩니다. 단순해 보이면서도 겹쳐져있는 요소들이 있거나 헷갈리는 요소들이 있기때문에 직접 문제를 풀어보면서 Selector에 대해 이해하고 실력을 향상할 수 있습니다. CSS Diner사이트(링크)에 접속하게되면 좌측에는 CS..
웹페이지의 프로젝트파일이나 기타 소스파일을 웹에 업로드해놓고 HTML에서 불러와 페이지에 표시되게끔 코드를 작성하는 경우가 많은데요 클라우드 서비스인 구글드라이브에 이미지, 동영상, PDF, 응용프로그램 파일 등을 업로드하고 불러올 수 있다면 파일관리도 편하고 용량이 많은 소스파일도 로컬저장공간을 차지하지 않고 불러와있을 수 있는 장점이 있습니다 일부 웹페이지에서는 구글드라이브의 파일을 업로드한후 링크를 복사하여 img src태그를 사용하여 불러오려고 하면 구글에서 접근을 차단하여 파일을 보호하기 때문에 이미지가 정상적으로 불러와지지 않습니다 즉 업로드한 이미지파일은 구글드라이브에서만 업로드한 이미지를 열어볼 수 있습니다 하지만 HTML페이지에서도 구글드라이브에 업로드한 이미지 파일을 사용할 수 있는 방..
1 email cs HTML에서 a태그 클릭 시 이메일 전송으로 바로 이동하게 만들려면 a태그 안에 주소부분에 mailto를 사용하면 됩니다 name부분만 본인의 이메일로 변경하여 저장하면 email이라는 a태그 클릭 시 설정한 이메일로 메일전송 바로가기가 가능합니다 제 블로그 좌측 메뉴에 있는 문의버튼 또한 a태그로 이루어져 있는데 해당 a태그를 클릭 시 사용할 메일전송앱을 사용하여 이메일전송이 가능합니다
지렁이 키우기 게임 인터넷 게임을 좋아한다면 어릴 적 한 번쯤 해봤을 만한 지렁이 키우기 게임 에너지를 먹어 지렁이의 길이를 늘이고 상대방의 진로를 차단하여 상대방의 에너지를 흡수하여 전 세계 사람들과 경쟁할 수 있는 중독성 있는 게임입니다 이게임의 장점은 웹사이트에서 플레이가 가능하기 때문에 따로 게임을 위한 프로그램 설치가 없습니다 즉 언제 어디에서든 웹브라우저로 플레이가 가능하다는 장점이 있죠 지렁이 게임 html웹사이트에 추가하기 자신이 만든 html페이지에 미니 게임으로 이 지렁이 게임을 추가하는 방법이 있어서 소개해드리려고 합니다 ifram태그를 사용하여 해당 웹사이트를 불러와주면 됩니다 작동 테스트를 진행해보겠습니다 브라우저에 접속하여 확인해보니깐 정상적으로 지렁이 키우기 게임이 출력됩니다!..
구현 내용 위의 이미지처럼 div 영역 안에 텍스트가 있을 경우 텍스트가 div영역 안을 벗어나지 않고 div영역 안에 세로 스크롤바를 넣어주는 방법에 대해서 알아보겠습니다 HTML body태그 안에 클래스 이름이 scroll인 div태그를 생성해주고 안에는 아주 긴 내용의 텍스트를 입력해주었습니다 웹페이지에서 확인되면 브라우저의 가로 사이즈에 따라서 텍스트가 끝까지 표시되고 공간이 부족할경우 다음 줄로 넘어갑니다 CSS 이제 css로 넘어가서 박스 영역을 생성해보겠습니다 배경색상은 노란색으로 설정하였고 가로세로 div의 영역과 테두리를 생성해주었습니다 div영역을 벗어날 정도로 텍스트의 내용이 많을 경우 잘리지 않고 그대로 밑으로 글씨가 출력되어 보기 지저분합니다 저희가 원하는건 div영역 내에서 텍스..
웹 클론코딩을 함으로써 코드 이해력과 응용력을 기르려고 주제를 찾아보던중 간단한 음악 플레이어를 만들고자 하였습니다 자바스크립트부분은 아직 많이 미흡하여 기존에 있는 음악 재생구현부분을 가져다가 부가기능을 추가하거나 구현하고자하는 내용은 구글링을 많이 하였습니다 해당사이트는 데스크톱 환경에 맞추어 제작되었습니다 버튼이 작동하지않거나 스크립트부분에서 자잘한 오류들을 고치고 위와같은 사이트를 제작하였습니다 웹 이미지파일을 가져왔지만 이미지도 음악부분도 저작권을 피해갈순 없어서 개인 사이트 제작용도로만 사용하였습니다 비상업적 용도이지만 저작권 당사자로부터 삭제요청이 있을경우 해당소스 삭제하겠습니다 현재까지 작동되는 기능은 리플레이 이전,다음곡 재생 플레이리스트 재생목록 보기와 볼륨조절까지 가능합니다 음악자체는..
:root 가상 클래스란? css에서 :root 가상 클래스는 HTML 문서의 루트 요소를 선택합니다 html의 루트 요소는 이기 때문에 root와 선택자와 동일합니다 CSS :root 변수 css에서 :root를 이용하여 재사용할 값을 담아줄 변수를 저장하여 변수로 불러올 수 있습니다 시스템 유지보수를 하려면 웹페이지의 여러 색상들이 담겨있는데 매번 하나하나 해당 클래스의 색의 코드를 검색하여 변경하려면 어렵기 때문에 색뿐만 아니라 재사용 가능한 다양한 값들을 변수에 저장하고 필요한 곳에서 불러와 재사용이 가능합니다 CSS :root 전역변수 선언하기 :root를 사용하여 CSS전역 변수로 설정하면 변수 안에 담긴 값을 원하는 곳에서 언제든 불러올 수 있습니다 *전역변수는 함수외부를 포함하여 모든함수에..
온라인 컴파일러 컴퓨터에 따로 컴파일러 설치 없이 온라인 페이지에서 코딩 후에 컴파일러를 통해 코드 작동이 가능한 온라인 컴파일러에 관해서 지난번에 게시물을 작성한 내용이 있는데요 JDoodle - Online Compiler, Editor for Java, C/C++, etc JDoodle is an Online Compiler, Editor, IDE for Java, C, C++, PHP, Perl, Python, Ruby and many more. You can run your programs on the fly online, and you can save and share them with others. Quick and Easy way to compile and run programs onlin..
지난번에 방문자의 user-agent를 확인하는 사이트를 제작한적이 있는데 접속한 사용자의 아이피를 확인하거나 언어정보나 다양한 정보를 확인하기위해 $_SERVER함수를 사용하였습니다 PHP에서 프로그래밍하다보면 REMOTE_ADDR라던가 자주사용하는 경우가있어서 $_SERVER함수의 일부분을 정리해놓았습니다 $_SERVER['DOCUMENT_ROOT'] = 현재 사이트의 서버상 위치 //xampp/html $_SERVER['HTTP_ACCEPT_ENCODING'] = 인코딩 방식 //gzip,deflate $_SERVER['HTTP_ACCEPT_LANGUAGE'] = 언어 //ko,en $_SERVER['HTTP_USER_AGENT'] = 사용자 정보(User-agent) //Mozilla/5.0 (W..
