coding 89
TCP SCHOOL 코딩 배우기 좋은 사이트
TCP SCHOOL 사이트에 대해 알아봅시다! 1. TCP SCHOOL http://www.tcpschool.com/ 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com TCP SCHOOL 메뉴 TCP SCHOOL의 메뉴를 살펴보면 정말 다양한 언어를 설명해주고 있는 걸 볼 수 있습니다. W3C school이나 MDN 사이트처럼 이용하면 좋습니다. - MDN 사이트 사용하기 - 2. TCP SCHOOL 사용법 TCP SCHOOL에서 Python 살펴보기 상단의 메뉴와 동일한데 메인에 있는 게 잘 보여서 메인에서 설명합니다. 배우고 싶은 언어를 하나 골라서 선택합니다. 파이썬을 배우고 싶다면 파이썬을 선택해볼게요. - 파이..
css 변수 사용 방법
홈페이지 제작 시 컬러, 패딩, 마진 등등 반복해서 같은 값을 사용해야 하는 경우가 많습니다. 여기에 변수를 사용하면 웹 페이지의 통일성을 유지하는 것은 물론이고 유지보수도 손쉽게 관리할 수 있습니다. :root :root는 문서의 가장 상단 요소를 선택하는 가상 클래스입니다만, 벌써부터 설명이 어려워졌죠. 간단히 말해 html에서 html 선택자 역할을 합니다. 그런데 변수의 범위를 전체에 적용하기 위해 html 선택자 역할을 하는 가상 클래스를 사용한다고 생각해주세요. ▼ 자세한 설명은 아래 문서를 참고해주세요. https://developer.mozilla.org/ko/docs/Web/CSS/:root :root - CSS: Cascading Style Sheets | MDN CSS :root 의사..
css 선택자 게임
css를 처음 접하시는 분들은 Select. 즉, 선택자를 잡는 것이 어려울 거예요. 저도 처음에는 냅다 외우기만 해 가지고 이해하 하나도 안 됐었거든요. 그런데 이게 게임으로 쉽게 이해하는 방법이 있다고 합니다. 1. 접시 선택하기 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 접시를 선택하면 되는 게임이에요. 보기에는 어려워 보이는 데 막상 하면 생각보다 쉽답니다. 오른쪽에 보시면 설명도 나와있어서 살펴보시면 좋아요. 영어 기는 하지만 그래도 대충 해석이 없어도 알 수 있어요. 이렇게 마우스를 올리면 자기가 어떤 태그 인지도 알려줘요 귀엽죠. 접..
마우스를 올리면 그려지는 테두리 애니메이션 구조를 살펴보자(html)
기능보다 디자인 측면에 비중을 두는 작업인 오늘의 포스팅입니다. 어떤 홈페이지에 들어갔을 때, 마우스를 올리면 안쪽에 테두리가 천천히 그려지는 모습을 혹시 본 적 있으신가요? 저는 그게 멋있어 보였거든요. 그래서 css로 구현을 해보려고 합니다!! 오늘은 html 구조부터 살펴볼게요. 1. 미리 보기 ① 효과 이해하기 - 마우스를 올렸을 때 표시된 저부분이 한 번에 나타나는 것이 아니라 - 왼쪽에서부터 천천히 오른쪽으로 그려져서 테두리를 그리는 효과를 만들 거예요. http://ssimplay.com/ SSIMPLAY ssimplay.com 실제 적용 모습은 포트폴리오 사이트에서 확인해주세요. 2. html 구조 생각하기 설명하기에 앞서 이 모든 내용은 제가 했던 방법을 알려드리는 것으로 정답이 아니라 ..
[PHP] php 설치하기 (윈도우)
오늘은 php를 설치해보겠습니다. 1. bitnami bitnami.com/stack/wamp WAMP Bitnami WAMP Stack provides a complete, fully-integrated and ready to run WAMP development environment. In addition to PHP, MySQL and Apache, it includes FastCGI, OpenSSL, phpMyAdmin, ModSecurity, SQLite, ImageMagick, xDebug, Xcache, OpenLDAP, ModSecurity, bitnami.com ① WAMP bitnami WAMP를 검색하시거나 위의 주소로 접속해주세요. 위의 이미지처럼 WAMP가 적혀있다면 잘 찾아오신 ..