web55 미디어커리, 뷰포트에 관하여 배워보기 웹키트(webkit)기반인 모바일 브러우저들의 기본 뷰포트 너비는 980px이다. 그래서 스마트폰의 모바일 브라우저에 맞춰 웹페이지는 980px로 표시된다. 웹키트 기반의 브라우저란 브라우저를 동작시키는 실행 엔진이 '웹키드(webkit)'엔진이기 때문에 붙은 이름이다. 스마트폰 브라우저는 대부분 웹키트 엔진을 기반으로 하는 브라우저이다. 뷰포트는 태그를 이용해서 태그 사이에 작성해 넣는다. 뷰포트의 너비를 스마트폰화면 너비에 맞추고 초기 화면 배율을 1로 지정한 것으로 가장 많이 사용하는 형태. width: 뷰포트 너비, device-width(브라우저 기본 값) initial-scale: 초기 확대/축소 값 (기본값 1) 크롬 브라우저 F12: 개발자 도구 창. 390x844 아래쪽에 있는 회색 바를.. 2022. 3. 7. 뷰포트와 미디어 쿼리에 관하여 미디어 쿼리는 접속하는 브라우저의 너비에 따라 사이트 레이아웃을 바꾸기 때문에 반응형 웹 사이트를 제작하는 가장 기본적인 방법이다. 뷰포트(viewport)는 스마트 폰에서 실제 콘텐츠가 표시되는 부분을 가리키는 말이다. 문서의 콘텐츠를 스마트폰 화면 너비에 맞춰 표시해야 한다. 이때 사용하는 것이 태그이며, 다음 소스가 가장 기본으로 사용하는 뷰포트 설정 소스다. width=device-width: 문서 너비를 현재 기기의 너비에 맞춘다. initial-scale=1: 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정한다. 태그에서 뷰포트를 설정하기 위한 속성 width height initial-scale user-scalable minimum-scale maximum-scale target-d.. 2021. 10. 25. 크롬 브라우저에 사용중인 서체 확인하는 방법과 변경하는방법 크롬 브라우저를 설치하고 난 뒤에 그냥 기본값으로 셋팅된 서체를 사용하는데 그 기본값 서체가 뭔지 궁금해서 찾아봤다. 크롬브라우저를 실행 후 cmd+ , 설정창이 뜨면 좌측의 [모양]-[글꼴맞춤 설정]을 클릭하면 위와 같은 화면이 뜬다. 나는 아이맥을 사용중이라 기본 한글서체로 지정된 산돌고딕Neo가 브라우저에서도 기본 서체로 적용되어있었다. 본인이 원하는 다른 서체가 있다면 '표준 글꼴'에 나와 있는 서체를 클릭 후 원하는 폰트로 변경해주면 된다. 2021. 10. 21. 배경색과 글자색의 대비 정도를 측정해주는 사이트 색상이 있는 배경위에 어떤 컬러의 텍스트를 얹혀야 잘 보이는지를 수치로 측정해주는 사이트 https://webaim.org/resources/contrastchecker/ WebAIM: Contrast Checker Contrast Checker You are here: Home > Resources > Contrast Checker This tool requires Javascript. Normal Text The five boxing wizards jump quickly. Large Text The five boxing wizards jump quickly. Graphical Objects and User Interface Components image/svg+x webaim.org 2021. 10. 18. 동영상 풀스크린 배경 html5에는 태그가 있어서 플러그인 프로그램 없이도 웹 브라우저에서 직접 동영상을 재생할 수 있다. 아직까지는 모바일 브라우저에서는 동영상 풀 스크린 배경을 사용할 수 없기 때문에 모바일 기기로 접속하는 사용자를 위해 동영상 풀 스크린 배경 대신 표시할 이미지를 함께 사용한다. (언제까지 안될까?!) 최신 웹 브라우저에서는 mp4형식의 파일을 재생할 수 있도록 지원한다. 동영상파일은 재생 시간이 20~20초 정도로 짧고, 파일 용량은 5MB 이하인 것을 사용하는것이 좋다. 동영상 파일을 로딩하는 동안 동영상 대신 표시할 이미지를 포스터 이미지(poster image)라고 한다. 포스터 이미지는 태그를 인식하지 못하는 브라우저에서 동영상 대시 표시되고, 동영상을 풀 스크린 배경으로 사용할 수 없는 모바일.. 2021. 10. 12. 풀 스크린화면의 웹페이지를 만들때 이미지로 풀 스크린 배경을 만들고 싶다면 어떤 스마트 기기에서도 배경 이미지를 볼 수 있게 설정해야 한다. 화면 크기에 따라 적절하게 배경 이미지를 조정할 수 있어야 한다. 풀스크린 이미지는 주로 1100~1200px의 사진을 많이 사용한다. 이미지 풀 스크린 배경은 배경 이미지 삽입을 위한 CSS에 background-size속성을 추가해서 사용한다. 배경을 슬라이드 쇼로 표현하고 싶다면 jQuery 플러그인을 사용하면 된다. 2021. 10. 7. 플랫 Flat 디자인. Canvas와 SVG는 프로그래밍을 이용해 비트맵 그래픽과 벡터 그래픽을 표현하는 기술입니다. 코잉으로 해결하기 때문에 이미지보다 로딩 속도가 빠르고 다양하게 활용할 수 있습니다. 플랫 디자인에서 가장 중요하게 생각하는 것은 '직관성'입니다. 플랫 디자인에서 색상은 중요한 역할을 합니다. 단순한 도형을 사용하는 대신 밝고 화려한 색상을 선택합니다. 일반적으로 플랫 디자인의 웹 사이트는 6~8가지 색상을 메인 색상으로 사용합니다. 메인 색상을 고르기 어렵다면 Flat UI Colors www.flatuicolors.com 을 참고. 2021. 9. 9. 미디어쿼리 Media Queries 미디어 쿼리(Media Queries)는 CSS3의 모듈 중 하나로, 사이트에 접속하는 기기별로 적용할 CSS파일을 다르게 지정해 주는 기술입니다. 각 기기마다 서로 다른 레이아웃을 표시할 수 있습니다. 따로 모바일용 사이트를 제작하지 않고, 하나의 사이트로 모바일 기기 및 PC기기까지 대응할 수 있게 만드는 방법이 바로 미디어 쿼리입니다. www.mediaqueri.es Media Queries mediaqueri.es 미디어쿼리를 사용한 사이트를 소개하는 사이트 반응형 웹을 만드는 기본 기술인 가변 그리드와 미디어 쿼리는 모두 CSS로 작성하는데, 반응형 웹이 대중화되면서 이 두 가지 기술을 쉽게 사용할 수 있게 하나로 묶은 CSS 프레임워크가 여러 가지 등장했습니다. 그중에서 가장 많이 사용하는 것.. 2021. 9. 8. 자바스크립트 제어문 조건 연산자를 사용할 때는 ?왼쪽에 조건을 넣는다. :왼쪽에는 조건이 true일 때 실행할 명령을 넣고 :오른쪽에는 조건이 false일 때 실행할 명령을 넣는다. + 지금 이걸 할때가 아닌것 같아 잠시 보류!!! html먼저하자 javascript는 인터리어 같은 느낌이다. html, css로 뼈대부터 먼저 잡자! 건축을 먼저해야 할것 같다. 2021. 9. 7. 자바스크립트 변수, 상수 variable, constant 변수는 컴퓨터가 구별할 수 있게 이름을 붙여줘야 한다. var 변수이름; var apple; 규칙1. 변수의 이름은 의미 있게 짓는다. 규칙2. 여러단어를 연결한 변수 이름은 낙타 모양으로 만들어 준다. (Camel Case) 규칙3. 변수 이름의 첫 글자는 반드시 문자나 밑줄(_) 또는 달러기호($)로 시작해야 한다. 변수에 값을 저장하려면 변수 오른쪽에 = 기호를 붙이고 값이나 식을 쓰면 된다. var apple = "yammy"; //변수를 선언하면서 값을 저장 var banana; banana = "long and yummy"; //변수를 선언한 다음에 값을 저장 let으로 선언한 변수는 블록{}을 벗어나면 사용할 수 없다. const는 상숫값을 선언할 때 사용한다. 자료형(data type)이란.. 2021. 9. 6. 비주얼 스튜디오 코드 다운, 설치하는 방법 비주얼 스튜디오 코드. 홈페이지에서 다운 받고 한글판으로 변경. https://code.visualstudio.com/docs/?dv=osx Documentation for Visual Studio Code Find out how to set-up and get the most from Visual Studio Code. Optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 여기 사이트로 들어가면 본인이 사용하는 OS에 맞.. 2021. 9. 2. 자바스크립트 배워보기 웹에서 할 수 있는 모든 동작을 바로 자바스크립트로 만듭니다. 웹 개발 세상에 들어가기 위해 반드시 배워야 하는 언어. 프로그래밍은 실행과 반복이 중요하다. 웹을 다루려면 웹 브라우저가 사용하는 언어인 '자바스크립트'를 공부해야 합니다. 서버(server): 사용자의 검색 요청을 처리해 알맞은 정보를 전달해 주는 컴퓨터. 클라이언트(client): 웹 브라우저를 보여 주는 PC나 노트북, 모바일 기기 등. 웹 프로그래밍은 서버에서 사용자의 요청을 처리하거나 데이터를 관리하는 '백엔드 개발(back-end)'과 서버에서 받아 온 정보를 웹 브라우저에서 어떻게 보여 줄 것인지를 프로그래밍하는 '프런트엔드 개발(front-end)'로 나뉩니다. 프런트엔드: HTML, CSS, JAVAscript 백엔드: PH.. 2021. 8. 30. 이전 1 2 3 4 5 다음
