이세계개발자의 개발일지

앞에서 살펴본 CSS 다단 칼럼은 원래 그리드 레이아웃을 위한 용도가 아니라 웹 화면을 여러개의 단으로 나누어 표시하기 위한 것이다 다양한 형태의 그리드 레이아웃을 만들려면 jQuery 플러그인을 사용하는 것이 편리하다.VGrid 플러그인을 사용한 카드 UIvGrid 플러그인은 그리드 레이아웃을 쉽게 만드는 플러그인으로 브라우저 화면 크기에 따라 화면 요소를 동적으로 옮겨준다 그리드 레이아웃이므로 사각 형태를 가지고 있어서 핀터레스트 같은 카드형 디자인 사이트를 만드는데 사용할 수 있고 여러가지 효과를 손쉽게 적용할 수 있는 장점도 있다 발리 - 따나롯 해상 사원 만조 때는 바닷물이 밀려들어 사원과 육지가 떨어지고 썰물이 되면 다시 육지와 연결된다. ..

일반적으로 신문을 보면 텍스트 단이 여러 개로 나뉘어 있는데 웹 문서에서도 이렇게 다단으로 편집할 수 있다다단칼럼으로 그리드 형태 만들기2개의 칼럼에 8개 이미지를 그리드 형태로 표시하고 반응형으로 동작하기 위해 960px 이상에서는 3개 칼럼으로, 1100px 이상에서는 4개 칼럼으로 표시하도록 만들었다 Yummy Yummy Roasted chicken breast with sage and spinach Colorful Italian cuisine ingredients Beef steaks Beef burger takeaway ..

패럴랙스 스크롤링 효과는 화면을 스크롤할 때 애니메이션 효과를 주는 것으로 pc 용 사이트에서 주로 사용한다원리 살펴보기패럴랙스 스크롤링의 기본은 배경과 화면 각 요소의 위치나 움직이는 방향, 움직이는 시간 등을 달리해 시차를 줌으로써 애니메이션 효과를 내는 것이다jQuery 소스를 추가해 패럴랙스 스크롤링 효과 만들기배경이미지가 삽입된 요소에 data-type나 data-speed 속성을 추가하여 페럴랙스 효과를 만든다 parallax-scroll 플러그인을 사용해 패럴랙스 스크롤링 효과 만들기 http://www.beanoclock.com>">Link 1Link 2Link 3It's bean o'clock더치커피와 원두커피 전문 쇼핑몰 빈어클락입니다. Cold b..

원페이지 사이트는 하나의 사이트를 한 화면에 담는 사이트이다. 페이스북이나 인스타그램처럼 화면을 스크롤해도 계속해서 이전 내용을 불러와 한화면에 보여주는 사이트가 대표적이다원페이지 사이트는 필요한 내용이 한페이지 안에 다 들어 있어야 한다 그래서 전체 콘텐츠의 양이 많지 않을 때 적합한 레이아웃이다CSS를 사용해 원페이지 사이트 만들기scroll.js 플러그인을 사용해 만든 예시 어디까지 가 봤니?유럽 미국 중국 일본EuropeUnited StatesChinaJapan* { margin:0; padding:0; } #container{ width:100%; margin:0 auto; padding:0; } header { position:relative; height:130px; margin-botto..

가변 이미지와 마찬가지로 동영상도 화면의 너비가 달라질 때마다 동영상의 너비가 늘어나거나 줄어들 수 있도록 설계해야 한다 태그를 사용할 경우HTML5 에서 동영상을 삽입할 때는 기본적으로 태그를 사용하므로 CSS 를 사용해 max-width: 100% 으로 지정하면 웹문서 안에서 크기가 적절히 조절된다Ex ... 동영상을 감싸고 있는 videoContainer의 너비는 화면 너비에 따르지만, 높이를 지정하는 것이 쉽지 않다이때 사용하는 속성이 padding-bottom 속성이다 이 속성은 박스모델의 아래 패딩값을 지정하는 속성인데 이 속성을 이용해 동영상의 높이값을 지정할 수 있다Ex동영상의 화면 비율이 16:9 이면 동영상 컨테이너의 padding-bottom 값을 (9/16) *..

반응형 웹사이트의 레이아웃은 브라우저 창의 너비에 따라 화면 요소의 너비도 늘어나거나 줄어든다크기가 고정되어 있는 이미지를 화면 너비에 따라 높이와 너비를 바뀌도록 하는 것이 가변 이미지다가변 이미지를 지정하는 기본 방법이미지와 같은 멀티미디어 요소는 값을 지정하지 않으면 원래 크기대로 삽입됨width: 100% 로 지정하면 화면 너빗값에 따라 이미지의 너비가 줄어들거나 늘어나게 되지만 원래 크기 이상으로 늘어났을 경우에는 화질이 깨지므로 원래 이미지의 너빗값 이상으로 늘어나지 않도록 max-width 속성을 사용함 height: auto 를 사용하면 너빗값에 따라 높이가 자동으로 조절됨기본방법img{ max-width:100%; height:auto;}예제 가변 이미지에서 생길 수 있는 문제점고화..

방법 1. 외부 CSS 파일로 정의하기 태그 사용하기외부 스타일 시트 파일을 연결할 때 태그를 이용하는 방법을 가장 많이 사용한다 태그는 태그 사이에 삽입한다기본형식Ex.css 폴더에 인쇄용 스타일 시트 print.css를 만들어 놓은 경우화면 너비가 768px 이하일 때 적용할 태블릿용 스타일 시트 파일을 만든 경우@import 구문 사용하기외부 CSS 파일을 연결할 때 태그 대신 @import 구문을 사용할 수 있다이 구문은 CSS를 정의하는 태그 사이에서 사용한다기본 형식@import url(css 파일 경로) 미디어 쿼리 조건예시@import url("css/tablet.css") screen and (min-width:321px) and (max-width:768px);방법 2. 웹 문서..

뷰포트뷰포트 : 스마트폰에서 실제 콘텐츠가 표시되는 부분설정하지 않을 경우, 데스크탑과 스마트폰의 1px가 같지 않기에 스마트폰의 글씨가 pc 대비 작아짐사용하는 태그 뷰포트 설정 소스 속성width 뷰포트의 너비 - 기본값 device-widthheight뷰포트의 높이 - 기본값 device-heightinital-scale초기 배율 - 기본값 1 (1보다 작은 값이면 축소 페이지, 크면 확대페이지를 표시)user-scalable사용자가 페이지를 확대/축소할 수 있는지 여부 지정 - 기본값 yesminimum-scale확대/축소할 수 있는 최솟값(가로기준) - 기본값 0.25maximum-scale확대/축소할 수 있는 최댓값(가로기준) - 기본값 5.0target-dendityDpi고해상도 단말기의 ..