모래알 반응형웹

웹페이지 작업을 할 때 반드시 알아두어야 할 크롬(Chrome)의 개발자도구, 즉 검사기능이다.크롬 개발자 도구에 대하여 많은 글들이 있다. 하지만 전문성을 곁들여 설명을 하고 있어 대체로 처음 사용자에게는 어렵게 느껴진다.여기에서는 크롬 개발자 도구에서 늘 사용하는 기능만 간단하게 소개하겠다. 크롬의 개발자도구는 F12, Ctrl+Shift+I, 마우스오른쪽 메뉴 '검사'로 실행할 수 있다. 크롬의 개발자 도구는 HTML 소스영역, 적용된 CSS 영역, 페이지의 에러메시지를 보여주는 Console 영역으로 삼분할되어 있다. 이미 이전 포스팅 반응형 테스트 (Responsive Tester), http://passauer1083.tistory.com/19에서 소개한 바 있는 브라우저의 크기를 테스트할 수..

반응형 홈페이지를 만들 때 각각의 화면 너비에 맞게 반응형이 잘 되고 있는 지 확인할 필요가 있다.수많은 모바일 기기들을 모두 준비해서 하나하나 확인하는 것이 최상이겠지만 (실제로 이렇게 하는 사람들을 본 적이 있다.) 크롬 브라우저에서 간단하게 확인할 수 있다. 아래에 2개의 크롬 확장프로그램과 다음에서 제공하는 사이트를 소개한다. 하지만 가장 정확한 브라우저 사이즈 조절은 크롬의 개발자도구(F12) 에서 반응형을 체크하는 것이다.먼저 크롬 개발자 도구에 있는 내용을 살펴보자. 현재 화면에서 F12눌러서 개발자 도구를 띄우고 왼쪽 위의 아이콘을 클릭. 아래 화면에서 빨갛게 표시된 부분에 화면의 크기를 입력하면 가장 정확한 브라우저 사이즈로 현재의 웹페이지를 체크할 수 있다. Responsive Web ..

부트스트랩의 격자형 레이아웃시스템(Grid Layout System)은 이전에 포스팅한 내용이 주로 사용된다.오늘 설명할 부분은 Bootstrap 4에서 추가된 기능들로 이런 것도 있다는 것을 알고 필요에 따라 사용하면 된다.그러므로 아래 링크의 격자형 레이아웃시스템 (1/2)를 먼저 충분히 이해하는 것이 중요하다. Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (1/2)http://passauer1083.tistory.com/18Variable width content컨텐츠의 내용에 따라 너비가 가변적으로 변한다. 1 of 3Variable width content3 of 31 of 3Variable width content3 of 3 1 of 3 Variable widt..

난 막걸리만 마시면 머리가 아프다. 일반적인 쌀막걸리보다 생막걸리의 경우 머리 아픈 현상이 더 심하다. 그래서 막걸리에 대해 나름 조사를 해봤다. 우리나라의 술은 대개 쌀과 누룩, 물을 원료로 해서 빚는다. 쌀과 누룩 물로 만든 수를 체에 부어 거르면 탁주가 된다. 탁주를 또 다시 걸러서 맑은 술만 떠내면 맑은 술, 청주가 된다. 탁주에 열을 가해서 증류시키면 정류주인 소주가 되고 탁주에서 청주를 걸러내고 남은 술에 물을 더 넣어서 거칠게 걸러낸 술이 '막걸리'다. 막걸리 먹으면 머리가 아픈 숙취의 원인은 아직 과학적으로 규명되지 않고 있다. 일반적으로 알코올의 분해과정에서 생성되는 '아세트알데히드'와 발효과정에서 생성되는 메탄올 등이 숙취의 원인으로 알려져 있다. 이는 막걸리 뿐만 아니라 다른 술도 마..

부트스트랩 (Bootstrap)은 화면의 너비를 12 분할(12 격자, Grid)하여 웹페이지를 만든다. Bootstrap 3의 격자형 레이아웃 시스템(Grid Layout System)은 4 가지 화면 너비를 기준으로 반응하도록 정의되어 있었다. 768px 미만(스마트폰), 768px 이상(태블릿), 992px 이상(작은 화면의 데스크탑), 1200px이상(큰 화면의 데스크탑)에 따라 신축성있게 화면이 바뀌어 반응형이 가능하도록 했다. Bootstrap 4부터는 이 격자형 레이아웃시스템이 더 정교하고 세밀하게 발전했다.화면의 너비를 12 분할하는 것은 동일하지만 반응하는 화면의 기준너비는 4가지 에서 5가지로 세분화되었다. Extra small col-md-4 col-md-4 col-md-4 col-m..

홈페이지를 제작하는 중이거나 홈페이지의 특정 내용을 검색엔진이 가져가게 하고 싶지 않을 때다음과 같이 설정한 파일을 서버에 업로드 해두면 된다. 서버 루트에 다음과 같은 내용으로 robots.txt라는 이름을 가진 파일을 만들고 이 파일을 서버 루트에 두면 규정을 지키는 검색엔진들(구글 등)의 검색로봇이 서버의 웹사이트들을 뒤지지 못한다. [robots.txt 내용] User-agent: * Disallow: / 웹작업을 할 때 잠시 검색엔진 로봇이 웹페이지 내용을 가져가지 못하게 할 때,사이트를 다 만들고 나면 풀어야 한다.

크로스 브라우징(Cross Browsing)이란 웹페이지를 만들 때 W3C 의 web standard (웹규격: 흔히 웹표준이라고도 한다) 에 맞는 코딩을 함으로써 어느 브라우져에서나 기기에서 사이트가 제대로 보여지고 작동되도록 하는 것을 말한다. 인터넷 익스플로러가 크로스 브라우징에서 항상 문제를 일으키는 데 이유는 인터넷 익스플로러가 웹규격을 따르지 않기 때문이다. 실무에서 고객들은 그래도 "인터넷 익스플로러에서 홈페이지가 잘 돌아가야 하지 않느냐?"고 말한다. 인터넷 익스플로러의 점유율이 현저히 낮아지고 있고, 만3세 이상 인구의 88.5%가 모바일 인터넷이용자라는 사실을 명확하게 인식할 필요가 있다.인터넷 익스플로러를 고수할 것인지 모바일을 버릴 것인지? [참조]구글 크롬 점유율 60% 육박…IE..

반응형웹 뿐만 아니라 최신 HTML 기능을 모두 사용하기 위해서는 HTML5 를 사용해야 한다.는 주석을 달기 위해 사용. 이 태그 안에 있는 내용은 웹에서는 나타나지 않고 소스보기해야 볼 수 있다. 1. HTML 파일의 기본 구조HTML 파일은 "DOCTYPE 선언"/ html / head / body"로 구성된다. - DOCTYPE : (Document Type) HTML5를 사용할 지 HTML4를 사용할 지 선언.- html : 이 페이지가 HTML 페이지라는 것과 언어 선언 / 로 끝.- head : 페이지에 대한 설명 / 스타일(CSS) / 자바스크립트 등이 포함 / 로 끝.- body: 웹페이지의 컨텐츠 / 로 시작 ....로 끝. 2. HTML 구조에 들어가는 주요 내용 - HMTL5를 사용..

참배법도량에 들어가거나, 나올 때는 일주문 앞에서 합장을 하고 반배를 합니다. 도량에 들어서서는 큰 소리로 떠들고 웃으면 안됩니다.걸을 때는 차수를 하고 법당앞 어간문을 지날 때는 합장하고 머리를 숙이고 지나가야 합니다.도량 안에서는 술을 마셔도 안되고, 담배를 피워서도 안됩니다. 스님을 뵙거나 불자끼리 만났을 경우 합장하고 "성불하세요" 하고 반배로써 인사를 하여야 됩니다.법당에서법당의 중앙에 있는 문은 어간문이라고 하며 조실스님이나 공부를 많이 하신 큰스님께서만 출입을 하실 수 있습니다. 신도들은 어간문으로 출입하면 안됩니다. 법당 안에 들어갈 때는 좌.우측의 옆문으로 들어가야 합니다. 절하는 법큰절을 할 때는 엄숙하고 경건한 마음가짐으로 해야 합니다. 똑바로 선 자세에서 합장하고 허리를 60°쯤 굽..

파비콘(favicon, 'favorites + icon')인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘 아이콘 크기는 16x16, 32x32, 48x48, 64x64픽셀이 될 수 있고, 8비트, 24비트, 32비트 색상이 가능하다.파비콘은 ico 또는 png 파일로 만들 수 있다.인터넷 익스플로러, 파이어폭스, 크롬, 오페라에서 모두 지원한다. 파비콘은 내에 아래의 구문을 넣어서 적용한다.