TRstory

CSS 선언 인라인(inline) 방식 html 에서 적용 ... 내장(internal) 방식 html 에서 style 태그로 적용 링크(external) 방식 html 에서 적용 @import(inport) 방식 css 에서 적용 @import url("./css/style.css");

Flex Container CSS Flex Items (ie11) flex-direction: row (기본값) order number 0 플렉스 항목의 순서지정 column flex-grow number 1 아이템 비해 얼마나 커질지 row-reverse flex-shrink number 1 아이템 비해 얼마나 작아질지 column-reverse flex-basis px auto 초기 길이를 지정 flex-wrap: nowrap (기본값) % wrap align-self auto align-items : 설정 재정의 align-content: normal (기본값) stretch center center flex-start flex-start flex-end flex-end space-around ba..

sass 변환 npx sass --watch css/style.scss css/style.css 내장 함수(Built-in Functions) Sass에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있습니다. 모두 소개하지 않고, 주관적 경험에 의거해 필요하거나 필요할 수 있는 함수만 정리했습니다. Sass Built-in Functions에서 모든 내장 함수를 확인할 수 있습니다. []는 선택 가능한 인수(argument)입니다. Zero-based numbering을 사용하지 않습니다. 색상(RGB / HSL / Opacity) 함수 mix($color1, $color2) : 두 개의 색을 섞습니다. lighten($color, $amount) : 더 밝은색을 만듭니다. darken($color,..

# CSS 웹킷 기반 스크롤 슬라이딩 -webkit-overflow-scrolling: touch; # CSS 계산 (ie9+) div { width : calc(100% - 50px); } # CSS 영역 마스크 (ie8+) [상단, 오른쪽, 하단, 왼쪽] div {vclip: rect(0px,50px,200px,10px); } # CSS 마우스 이멘트 막기 (ie11+) [상단, 오른쪽, 하단, 왼쪽] div.ex1 { pointer-events: none; } # display : flex; * flex-wrap: 유연한 항목 줄바꿈 여부. - nowrap (default) : 기본값 - wrap : 유연한 형태 줄바꿈. * flex-direction : 플렉스 - 방향 - row (default)..

한줄말줄임 .one_line { width:300px; outline:1px solid red; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden; } 현지에서도 류현진의 꾸준함을 부각하는 평가가 꾸준하게 나오고 있다. 미국의 전국단위 언론인 CBS는 9일 내셔널리그 신인왕 판도를 분석하는 글에서 류현진을 후보군에 포함시켰다. 선정 이유도 구체적이었다. CBS는 “클레이튼 커쇼가 다저스의 에이스임은 명백하지만 류현진도 안정 장치(stabilizer) 몫을 했다. 다저스의 선발 로테이션이 부상으로 고전할 때 류현진은 꾸준히 자신의 차례를 지켰다”라고 평가했다. 열러줄 말줄임 (웹킷 기반 브라우저만 적용) .multi..

※ IE6~8 브라우저=> respond.js : https://github.com/scottjehl/Respond css3-mediaQueries.js : http://code.google.com/p/css3-mediaqueries-js비교 : http://gionaf.com/playground/mq-fallback/results.html ※ 미디어 쿼리 참고 싸이트 : http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 속성으로 구분하기..............................................................................................................

Background (배경 이미지 관련 속성) 속 성 설 명 값 background background의 여러 가지 속성을 간단하게 한번에 선언하여 사용할수 있다. background-color background-images background-repeat background-attachment background-position background-attachment 페이지 스크롤을 할 때, 페이지와 함께 스크롤 되게 할 것인지 아니면 배경 이미지는 고정되게 할 것인지를 설정할 수 있다. scroll fixed background-color 특정 요소의 배경 색상을 지정할 수 있다. color-rgb color-hex color-name transparent background-images 배경 이미..

# position static 기본값, 기본적으로 설정 되는 값 (top / left 적용되지 않음) absolute 절대값, 브라우저를 기준으로 위치 속성을 사용하며 parent 요소에 의해 하위 위치 기준 relative 상대값, 객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상대값 fixed 고정값 , 화면이 스크롤 되어도 움직이지 않음 .......... ■ ■ ■

# 폰트 임베드 @font-face{ font-family : Graublauweb;src:url('Graublauweb.eot'); /* ie9 호환성 모드 */src:url('Graublauweb.eot?') format('eot'), /* ie6~8 호환성 모드 */url('Graublauweb.woff') format('woff'), /* 현대 브라우저 */url('Graublauweb.ttf') format('truetype'), /* 사파리, 안드로이드 ios */url('Graublauweb.svg#svgGrauweb') format('svg'); /* 레거시 ios */} # 폰트 크기 비교 표 (pt, px, em, %) body { font-size: 62.5%; // 1em =>10p..