음 아마 비둘기보단 똑똑할꺼야
준돌 Jundol / 2017.01.12 15:49 / CSS

table 태그에 td 컬럼에 font-size 속성이 적용되지 않는 문제가 발생했다.

인라인 속성으로 강제로 밀어넣으면 가능은했지만 퍼블리셔가 준 css 그대로 사용해야했기에 문제 해결을 해야했다.


웹페이지 최상단 DTD (Documenty type declaration) 선언이 되어있지 않아 발생하는 문제다.


user agent stylesheet 는 브라우저에서 제공하는 기본 style 인데 Doctype 이 선언되지 않아 발생하는 문제다.


실수로 페이지에 <html></html> 선언만하고 <!Doctype html> 선언은 빼먹은건 아닌지 다시 한번 확인해보면 된다.


여기서 Doctype 이나 usger agent stylesheet 에 대한 자세한 설명은 생략한다.


참고 : http://stackoverflow.com/questions/12582624/what-is-user-agent-stylesheet

준돌 Jundol / 2015.11.20 18:52 / CSS/Core

본 포스팅은 MDN에 있는 변역되지 않은 문서를 번역 봉사에 참여한 후 블로그에 옮겨놓는 포스팅 입니다.



개요EDIT

image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.

예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은 50x50px)이라면, 이미지는 새로운 면적만큼의 특정 알고리즘으로 인해 확대(혹은 축소)됩니다. 스케일링은 사용자의 상호작용(줌기능) 으로 인해 일어날겁니다.

초기값auto
적용대상all elements
상속yes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

문법EDIT

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

Values

auto
기본값입니다.
이미지의 스케일링 알고리즘은 이미지를 최대치로 활용해서 나타냅니다. 특히, 스케일링 알고리즘은 이중선형보간법같은 알고리즘이 보기에 괜찮은 "부드러운"색상을 나타냅니다.  사진같은 종류의 것들을 위해 GEcko엔진 1.9버전(파이어폭스 3.0) 에서는 이중선형 리샘플링(고품질) 을 사용해왔습니다.
crisp-edges
이미지 스케일링 알고리즘은 반드시 색상대조와 이미지의 표준을 맞게 보존해야 합니다. 그리고 smooth 하지 못한 색상 혹은 이미지의 흐림효과 또한 알고리즘 공정에 있어야합니다. 이 속성은 픽셀아트같은 의도되어 만들어진 이미지들에게 필요합니다.
pixelated
이미지 스케일링을 크게 확대할 때는 "nearest neighbor" 혹은 비슷한 알고리즘을 반드시 사용해야 합니다. 그래서 이미지의 큰 픽셀로 구성해서 나타낼 수 있습니다. 이미지를 작게 축소할 때는 "auto" 속성과 같습니다.
The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.

공식 문법

How to read CSS syntax.

auto | crisp-edges | pixelated

예시EDIT

/* applies to GIF and PNG images; avoids blurry edges */

img[src$=".gif"], img[src$=".png"] {
                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
                 }
div { 
        background: url(chessboard.gif) no-repeat 50% 50%;
        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

Live Examples

image-rendering: auto;

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

사양EDIT

SpecificationStatusComment
CSS Image Values and Replaced Content Module Level 3
The definition of 'image-rendering' in that specification.
Candidate RecommendationInitial definition

Though initially close from the SVG image-rendering property, the values are quite different now.

브라우저 지원EDIT

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (auto)(Yes)3.6 (1.9.2)Not supported[1]11.606533.21.1, r86920
crisp-edgesNot supported3.6 (1.9.2)-mozNot supported11.60-o6533.21.1, r86920 with the non-standard name -webkit-optimize-contrast
pixelated41.0Not supported(bug 856337)Not supported26.0Not supported
optimizeQuality,optimizeSpeedNot supported3.6 (1.9.2)Not supported11.606533.21.1, r86920

노트

[1] 인터넷 익스플로러 7 과 8 버전에서는 표준으로 제공하지 않습니다. -ms-interpolation-modeproperty 와 두 속성값입니다. (bicubic 과 nearest-neighbor):

  • 이미지에게만 적용됩니다. (JPG, GIF, PNG, ...)
  • IE7에서는 투명이 아닌 이미지에게만 적용됩니다.
  • 속성이 상속되지 않습니다.
  • IE7에서의 기본값 : nearest-neighbor (저화질)
  • IE8에서의 기본값: bicubic (고화질)
  • IE9에서는 폐지됨

캔버스에서는 수동으로 속임수처럼 조작할 수 있는 방법을 제공합니다.
fallback solution for crisp-edge/optimize-contrast 

MDN 영어 원본 : https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

MDN 원본 번역 : https://developer.mozilla.org/ko/docs/Web/CSS/image-rendering


'CSS > Core' 카테고리의 다른 글

[CSS] image-rendering  (0) 2015.11.20
준돌 Jundol / 2015.06.08 16:32 / CSS/Lib



브라우저의 종류는 여러가지가 있다.

IE , Chrome , FF , Opera , Safari 등 많은 브라우저가 있는데

브라우저마다 CSS속성의 기본값이 전부 제각각이다.

때문에 크로스 브라우징 할 때 퍼블리셔들은 CSS의 늪에 빠지기 쉽다.

그리하여 전부 똑같은 CSS 초기값을 주기 위해 css reset 초기화 라이브러리가 생겨났다.

사용법은 css소스코드를 자신의 프로젝트의 main.css 의 최상단에 넣거나 css를 불러올때 맨 처음 불러오면 된다.


1. Eric Meyer's 의 "Reset CSS" 2.0

출처 : http://meyerweb.com/eric/tools/css/reset/

reset.css


2. HTML5 Doctor CSS Reset

출처 : http://html5doctor.com/html-5-reset-stylesheet/

HTML5doctor_Reset.css


3. Yahoo! (YUI 3) Reset CSS

출처 : http://yui.yahooapis.com/3.18.1/build/cssreset-context/cssreset-context-min.css

yui3_reset.css


4. Universal Selector '*' Reset

출처 : http://cssreset.com/scripts/universal-selector-css-reset/#code-examples

Universal SelectorReset.css


5. normalize.css

출처 : http://necolas.github.io/normalize.css/

normalize3.0.2.css


다섯가지 중 가장 유명한건 1번의 Eric Meyer's 의 Reset.css 와 5번의 normalize.css 이다.

특히 5번의 normalize.css 는 트위터, 깃헙 , 사운드클라우드 , 부트스트랩 등등 다양한 곳에서 검증받고 사용되고있으므로 믿고쓰는 reset.css 이다.


참조 

1. cssreset.com 2015's most popular CSS Reset scripts, all in one place

http://cssreset.com/

2. image 참조

http://123cuss.blogspot.kr/2012/08/collection-css-reset.html

'CSS > Lib' 카테고리의 다른 글

CSS 초기화 도구 5가지  (0) 2015.06.08
준돌 Jundol / 2015.05.13 13:54 / CSS/Framework

Bootstrap Grids System

부트스트랩의 그리드 시스템은 페이지에 열 두개의 컬럼이 존재하는걸로 따르고 있어요.

만약 12개의 컬럼을 전부 사용하지 않고 커스텀으로 사용하려면 그룹으로 묶어서 사용하는 것도 가능해요!



부트스트랩의 그리드 시스템은 스크린의 크기에 따라 자동적으로 재 배치 되며, 반응형으로 움직여요


그리드 클래스

부트스트랩의 그리드 시스템 클래스는 4가지가 있어요 : 

  • xs (스마트폰용)
  • sm(태블릿용)
  • md (데스크탑용)
  • lg (큰 데스크탑용)

부트스트랩 그리드시스템의 기본적인 구조

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>


첫 번째로 한 개의 열을 만듭니다. (<div class="row">) 그다음, 원하는 만큼 행의 숫자를 넣습니다.(.col-*-*) 여기서 중요한 점은 각 행의 숫자가 항상 12를 넘지 말아야 합니다.

예제를 몇개 보도록 하죠.

동일한 세 개의 행
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
코드를 적용 한 후 페이지의 가로 (폭)의 크기를 최대로 늘렸다가 최소로 줄였다를 해보세요.
그럼 스마트폰에서 적용했을 때 와 일반 모니터로 했을 때 다르게 나오는걸 볼 수 있습니다.

1. 폭이 최대(데스크탑)일 때

2. 폭이 최소(스마트폰)일 때

코드를 해석해 보면 클래스 지정자의 col-sm-4 란 뜻은 하나의 행이 전체 12의 크기 중 4의 크기를 가진다. 즉, 1/3의 크기를 갖도록 하는 것입니다.


서로 크기가 다른 두개의 행

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>


자 여기서는 4,8이 입력되었습니다. 즉, 폭 12의 크기중 하나는 4만큼 하나는 8만큼 의 폭을 가지는 두 개의 행을 입력 한 것입니다.

1. 폭이 최대(데스크탑)일 때

2. 폭이 최소(스마트폰)일 때

출처 :

1. w3schools.com

http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp



준돌 Jundol / 2015.05.13 11:34 / CSS/Framework


부트스트랩은 트위터에서 만든 오픈소스 웹 디자인 프레임워크이며 무료로 다운로드를 받을 수 있고 무료로 사용이 가능해요.

부트스트랩?

  • 부트스트랩은 웹 개발에 빠르고 편리한 무료 프론트엔드 프레임워크에요
  • 부트스트랩은 HTML 과 CSS 를 기반으로 디자인한 템플릿과 타이포그래피, 양식, 버튼, 표, 네비게이션, 모달, 이미지 carousels 그리고 다른 훌륭한 자바스크립트 플러그인들을 옵션으로 갖추고 있어요.
  • 부트스트랩은 여러분에게 쉽고 강력한 반응형 웹 디자인을 제공할 거에요.

부트스트랩 역사

  • 부트스트랩은 Mark Otto 와 Jacob Thornton 이 트위터에서 개발했어요. 그리고 2011년 8월 깃헙에 오픈소스 제품으로 공개했죠.

왜 부트스트랩을 쓰나요?
부트스트랩을 썼을 때 얻는 (개)이득 :
  • 사용하기 쉬어요! : HTML 과 CSS에 기본적인 지식이 있는 누구든지 부트스트랩을 사용할 수 있어요.
  • 반응형 특징 : 부트스트랩은 반응형 CSS로 스마트폰, 태블릿 그리고 데스크탑에 적용이 가능해요
  • 휴대용기기를 일순위로 둬요 : 부트스트랩3에서는 휴대기기를 일순위로 두는 코어 프레임워크에요
  • 브라우저 호환성 : 부트스트랩은 최신 브라우저들간의 호환성이 높아요. (크롬,파이어폭스,익스플로러, 사파리 그리고 오페라)

어디서 얻을 수 있나요?
부트스트랩을 얻는 방법은 두 가지가 있어요
  • getbootstrap.com 에서 다운로드 받은 후 직접 제공하는 방법
    만약 직접 다운로드해서 부트스트랩을 직접 호스트하여 제공하려면 위 url에 접속해서 다운받으면 되요.
  • CDN 으로 링크를 포함하는 방법
    부트스트랩은 압축된 CSS와 자바스크립트 파일을 제공하고 있어요. 또한 제이쿼리를 기반으로 개발하였기 때문에 사용하기 위해선 제이쿼리를 써야해요











자 그럼 이제 부트스트랩을 적용한 첫 번째 웹 페이지를 만들어 봅시다.

1. HTML5 문서타입을 추가해주세요.

부트스트랩은 HTML 요소와 CSS 속성들이 HTML5 문서타입을 요구해요.

항상 HTML5 문서타입을 웹페이지의 시작부분에 추가해주세요. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>


2. 부트스트랩3는 휴대기기를 우선으로 둡니다.

 부트스트랩3 는 모바일기기에 반응형으로 적용되도록 설계되었습니다. 휴대기기를 우선 하는 스타일은 코어 프레임워크의 한 부분입니다. 렌더링과 터치 확대를 제공하기 위해서는 <head> 태그 안에 <meta> 태그를 아래와 같이 입력하여야 해요.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 는 페이지의 폭을 휴대기기의 스크린 폭에 맞추도록 하는 부분입니다.

initial-scale=1 는 브라우저에서 처음 웹 페이지를 로딩하였을 때 초기 확대 레벨을 지정하는 부분입니다.


3. 컨테이너(Containers)

부트스트랩은 보통 사이트의 내용들을 컨테이너를 이용하여 감싸 놓습니다.

컨테이너에는 보통 두 개의 컨테이너가 있어요.

(1). .container 클래스는 컨테이너의 폭이 고정되어서 반응하는 클래스 지정자에요

(2). .container-fluid 클래스는 컨테이너의 폭이 페이지의 전체 폭에 맞춰서 반응형으로 제공되요.

주의 : 컨테이너는 중복해서 넣을 수 없어요. 컨테이너 안에 컨테이너를 또 넣을 수 없어요.


두 개의 예제를 보고 차이점이 어떤지 느껴보세요.

1. .container 를 사용한 경우

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container&stacked=h

2. .container-fluid 를 사용한 경우

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_gs_container-fluid&stacked=h


출처 : 

1. w3schools.com

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

2. 엔하위키미러 부트스트랩

https://mirror.enha.kr/wiki/Bootstrap

3. 부트스트랩 공식 홈페이지

http://bootstrapk.com/

© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
207 / 13 / 106,106