CSS 선택자(Selector) 게임으로 재미있게 배워보기 | 전체문제 풀이

CSS 학습 사이트 소개 오늘은 CSS Diner사이트의 문제들을 풀어보겠습니다. 이 사이트는 CSS 선택자(Selector)에 대한 문법을 공부해 볼 수 있습니다. CSS라는 게 내용이 많지는 않은 거 같으면서도 막상 코딩을 하면서 Selector의 개념이 부족해서 검색을 통해 답답한 부분을 해결하는데 시간을 많이 소모하기도 합니다. CSS Diner사이트는 여러가지의 HTML 요소(Element)중에서 셀렉터(Selector) 문법을 통하여 일부 문제에서 해당하는 요소를 선택하면 됩니다. 단순해 보이면서도 겹쳐져있는 요소들이 있거나 헷갈리는 요소들이 있기때문에 직접 문제를 풀어보면서 Selector에 대해 이해하고 실력을 향상할 수 있습니다. CSS Diner사이트(링크)에 접속하게되면 좌측에는 CS..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2024. 3. 10.
• textsms

구글드라이브에 업로드된 사진을 HTML에 삽입하는 방법

웹페이지의 프로젝트파일이나 기타 소스파일을 웹에 업로드해놓고 HTML에서 불러와 페이지에 표시되게끔 코드를 작성하는 경우가 많은데요 클라우드 서비스인 구글드라이브에 이미지, 동영상, PDF, 응용프로그램 파일 등을 업로드하고 불러올 수 있다면 파일관리도 편하고 용량이 많은 소스파일도 로컬저장공간을 차지하지 않고 불러와있을 수 있는 장점이 있습니다 일부 웹페이지에서는 구글드라이브의 파일을 업로드한후 링크를 복사하여 img src태그를 사용하여 불러오려고 하면 구글에서 접근을 차단하여 파일을 보호하기 때문에 이미지가 정상적으로 불러와지지 않습니다 즉 업로드한 이미지파일은 구글드라이브에서만 업로드한 이미지를 열어볼 수 있습니다 하지만 HTML페이지에서도 구글드라이브에 업로드한 이미지 파일을 사용할 수 있는 방..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2023. 1. 9.
• textsms

a태그 클릭시 이메일 보내기

1 email cs HTML에서 a태그 클릭 시 이메일 전송으로 바로 이동하게 만들려면 a태그 안에 주소부분에 mailto를 사용하면 됩니다 name부분만 본인의 이메일로 변경하여 저장하면 email이라는 a태그 클릭 시 설정한 이메일로 메일전송 바로가기가 가능합니다 제 블로그 좌측 메뉴에 있는 문의버튼 또한 a태그로 이루어져 있는데 해당 a태그를 클릭 시 사용할 메일전송앱을 사용하여 이메일전송이 가능합니다

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2023. 1. 7.
• textsms

코드 한줄로 자신의 웹사이트에 지렁이게임을 추가하는법

지렁이 키우기 게임 인터넷 게임을 좋아한다면 어릴 적 한 번쯤 해봤을 만한 지렁이 키우기 게임 에너지를 먹어 지렁이의 길이를 늘이고 상대방의 진로를 차단하여 상대방의 에너지를 흡수하여 전 세계 사람들과 경쟁할 수 있는 중독성 있는 게임입니다 이게임의 장점은 웹사이트에서 플레이가 가능하기 때문에 따로 게임을 위한 프로그램 설치가 없습니다 즉 언제 어디에서든 웹브라우저로 플레이가 가능하다는 장점이 있죠 지렁이 게임 html웹사이트에 추가하기 자신이 만든 html페이지에 미니 게임으로 이 지렁이 게임을 추가하는 방법이 있어서 소개해드리려고 합니다 ifram태그를 사용하여 해당 웹사이트를 불러와주면 됩니다 작동 테스트를 진행해보겠습니다 브라우저에 접속하여 확인해보니깐 정상적으로 지렁이 키우기 게임이 출력됩니다!..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2022. 12. 15.
• textsms

자바스크립트(JavaScript) 매트릭스 효과

data:text/html, 이전에 메모장에서 사용했던 data:texrt/html 형태로 브라우저에 붙여넣을경우 매트릭스 효과를 볼수있음

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2022. 12. 11.
• textsms

div요소에 세로 스크롤바 넣는법

구현 내용 위의 이미지처럼 div 영역 안에 텍스트가 있을 경우 텍스트가 div영역 안을 벗어나지 않고 div영역 안에 세로 스크롤바를 넣어주는 방법에 대해서 알아보겠습니다 HTML body태그 안에 클래스 이름이 scroll인 div태그를 생성해주고 안에는 아주 긴 내용의 텍스트를 입력해주었습니다 웹페이지에서 확인되면 브라우저의 가로 사이즈에 따라서 텍스트가 끝까지 표시되고 공간이 부족할경우 다음 줄로 넘어갑니다 CSS 이제 css로 넘어가서 박스 영역을 생성해보겠습니다 배경색상은 노란색으로 설정하였고 가로세로 div의 영역과 테두리를 생성해주었습니다 div영역을 벗어날 정도로 텍스트의 내용이 많을 경우 잘리지 않고 그대로 밑으로 글씨가 출력되어 보기 지저분합니다 저희가 원하는건 div영역 내에서 텍스..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2022. 12. 3.
• textsms