본문 바로가기
가변이미지에서 고려할 사항 가변이미지에서 고려할 사항 레티나급의 이미지를 크기만 줄여서 모바일 기기에 표시한다고생각해 보세요. 화면에 보여지는 모습은 작아 보여도 이미지 파일을 다운로드 하는데 꽤 오랜 시간이 걸립니다. 브라우저 에서는 사이트에 포함된 모든 이미지를 일단 불러온(preload) 후 기기에 따라 어떤 이미지는 감추고 어떤 이미지는 표시하는 방법을 사용합니다. 따라서 모바일 기기 입장에서는 불필요한 레티나 이미지파일까지 로딩하게 됩니다. 더보기
부트스트랩(bootstrap.css) 그리드 시스템 그리드 시스템(bootstrap) 부트스트랩에서는 12칼럽을 기본으로 하기 때문에 12칼럼에만 맞춘다면 1칼럼씩 세로로 또는 가로로 나열할 수 있습니다. 그리드시스템을 이용한 레이아웃을 만들 때 .col-이라는 키워드 다음에 화면종류를 나타내는 키워드 그리고 하나의 영역으로 묶을 칼럼개수를 숫자로 표시하여 하나의 클래스 스타일을 만듭니다. .col- 화면종류- 한영역으로 묶을 칼럼 개수 스마트 폰태블릿데스크탑큰화면.col-xs- 768px 미만 (x-small).col-sm- 768px 이상 ( small ).col-md-992px 이상 ( medium ).col-lg- 768px 1200px 이상 ( large ) 위와 같이 바깥부분을 로 묶어주어야 하고, 가장 바깥 부분은 로.. 더보기
미디어 쿼리 구문 - @media : 스타일시트 안에서 미디어 쿼리를 시작하는 속성 - only : 미디어 쿼리를 지원하지 않는 브라우저에서 미디어 쿼리문을 건너뛰도록 하기 위해 사용하는 접두어(prefix)입니다. 기본값이 only 이므로 생략해도 됩니다. - not : only 접두어 대신 not을 사용하면 그 뒤로 오는 모든 조건을 부정합니다.즉 조건에 맞지 않을 경우에 스타일 시트를 적용합니다. - 미디어 유형 : 화면인지 프린터인지, TV인지 등 미디어 쿼리를 적용할 기기를 지정하는 부분입니다. 쉼표(,)를 사용해 여러가지 미디어 유형을 나열 할 수 있습니다. 기본값은 all 입니다. 더보기

티스토리툴바