웹개발 웹언어 CSS 웹꾸미기 반응하는 웹, 반응형 웹 디자인, 오픈소스 사이트 공유
반응형 웹 디자인 개요
PC, 노트북, 스마트폰 등에서 최적화하여 웹 사이트를 개별로 만들기에는 많은 시간과 노력이 소모되기 때문에 브라우저 환경이 다양하게 바뀜에도 웹사이트의 내용을 다양한 화면 크게에 맞도록 표시할 수 있도록 구현하는 것이 반응형 웹 디자인 입니다.
! 알아두세요 !
반응형 웹은 CSS3을 지원하는 최신형 브라우저에서만 사용할 수 있습니다.
반응형 웹 디자인을 위해서는 선행으로 다양한 브라우저 환경에서 알맞게 내용을 표시할 수 있어야 하는 조건을 갖추어야 합니다.
이를 위해 알아 두어야 하는 것이 뷰포트!
기기별 뷰포트의 영역이 다 다르기 때문에 뷰포트에 대해 잠시 알아보도록 하겠습니다.
| 기기 | 타입 | 범위 |
| 스마트폰 | small to large handset | <600px |
| 태블릿 | small to medium tablet | 600px><960px |
| 랩탑 | large talbet to laptop | 960px><1264px |
| 데스크탑 | desktop | 1264px><1904px |
| 울트라와이드 | 4k & ultra-wides | >1904px |
뷰포트를 지정하는 방법
<head>
<meta name="viewport" content="속성=값", "속성=값", "..."(반복)>
</head>
| 속성 | 값 |
| width (너비) | device-width or 크기 |
| height (높이) | device-height or 크기 |
| user-scalable (확대 축소 가능 여부) | yes or no |
| initial-scale (초기 확대 축소 값) | 1~10 |
뷰포인트의 단위 해석
※ vw(viewport width)
1vw = 1%
※ vh(viewport height)
1vh = 1%
※ vmin(viewport minimum)
너비와 높이 중 작은 값의 1%와 같음
※ vmax(viewport maximum)
너비와 높이 중에서 큰 값의 1%와 같음
프로그래밍을 위한 소스코드 사이트 모음
CodeGuru - Microsoft developers related ideas, articles, tips, tricks, comments, downloads, and so much more related to programm
C# Sharp for Beginners This developer tutorial teaches you the basics of how to program in the .Net programming language, C#. Code along with our examples to learn more.
www.codeguru.com
보시는 것과 같이 다양한 메뉴들을 가지고 있는 것을 알 수 있습니다.
정말 다양한 소스코드들이 공유되고 있습니다.
CodeProject - For those who code
Filter articles, news and messages Just Published Artificial Intelligence DevOps IoT
www.codeproject.com
소스코드 뿐만 아니라 튜토리얼 까지 제공을 해주고 있습니다.
Google Code
Google Code Archive From 2006-2016, Google Code Project Hosting offered a free collaborative development environment for open source projects. Projects hosted on Google Code remain available in the Google Code Archive.
code.google.com
말이 필요 없습니다. 구글에서 제공하는 오픈소스 사이트 입니다.
SourceForge - Download, Develop and Publish Free Open Source Software
ConnectWise Control is a remote support solution for Managed Service Providers (MSP), Value Added Resellers (VAR), internal IT teams, and managed security providers. Fast, reliable, secure, and simple to use, ConnectWise Control helps businesses solve thei
sourceforge.net
프로젝트 단위의 소스코드를 제공해주는 사이트 입니다.
https://developer.apple.com/opensource/index.html
Open Source - Apple Developer
Open Source Open source software is at the heart of Apple platforms and developer tools, and Apple continues to contribute and release significant quantities of open source code.
developer.apple.com
애플사용자들을 위한 오픈 소스 사이트 입니다.
::데브피아::
www.devpia.com
한국사이트 입니다.
| 그밖의 사이트 링크 | |
| https://opensource.org/ | OSI 정보 |
| http://www.gnu.org/licenses/gpl-3.0.html | 라이센스 관련 |
| https://www.developer.com/web-services/ | 개발자 포럼 및 소스 공유 |