Languages/CSS

box-sizing 이란? 너비와 높이 설정시, 테두리를 포함하여 설정할지, 테두리를 제외하고 설정할지 결정하는 것 box-sizing 사용법 1. content-box ( 테두리 제외하고 너비, 높이 설정 / 기본값 ) { box-sizing: content-box; } 2. border-box ( 테두리 포함하여 너비, 높이 설정 ) { box-sizing: border-box; }

reset.css란? 웹브라우저마다 기본적으로 적용되어있는 스타일을 지워주는 용도의 css 파일 reset.css의 필요성 시중에 나와있는 브라우저는 여러가지이고, 모두들 그들만의 기본적인 스타일(css)가 적용되어 있는 경우가 많다. 이를 초기화 하고, 스타일을 적용해주어야 어떤 브라우저에서든지 우리가 원하는 스타일을 보여줄 수 있다. reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,..

1. 그림자 쉽게 만들기 Box Shadow CSS Generator Set the properties of your box shadow to get the CSS style. Use the sliders and the color picker to set the values and watch the live preview html-css-js.com 원하는 그림자를 만들고, 코드를 복사 붙여넣기 하면 끝! 2. 디자인 컬러 조합 보기 Two Color Combinations Two color combination palettes 2colors.colorion.co 예쁘고, 자주 사용하는 컬러조합을 확인 할 수 있다! 3. 무료 아이콘 사용하기 로딩 아이콘을 쉽게 받을 수 있다! ( 무료 / 유료 ) Fl..

PostCSS란? CSS 후처리기이며, CSS 작성을 더 편하게 만들어주는 javascript 도구들(Plugins)이다. javascript를 이용해서, CSS를 변경해준다 전처리기란? [CSS] CSS 전,후 처리기란? / 비교 CSS 전,후 처리기란? CSS 작성을 도와주는 프로그램 CSS 전,후 처리기의 필요성 CSS를 작성할 때 발생하는 여러 번거로움을 줄여준다! ( ex : 중복제거, 유지보수 등등 ) CSS 전,후 처리기들 전처리기 : S defineall.tistory.com PostCSS 공식사이트 PostCSS - a tool for transforming CSS with JavaScript Enforce consistent conventions and avoid errors in yo..

Sass란? CSS 전처리기 중의 하나로, CSS 작성을 더 편하게 만들어주는 도구 전처리기란? [CSS] CSS 전,후 처리기란? / 비교 CSS 전,후 처리기란? CSS 작성을 도와주는 프로그램 CSS 전,후 처리기의 필요성 CSS를 작성할 때 발생하는 여러 번거로움을 줄여준다! ( ex : 중복제거, 유지보수 등등 ) CSS 전,후 처리기들 전처리기 : S defineall.tistory.com Sass 공식사이트 Sass: Documentation Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a f..

CSS 전,후 처리기란? CSS 작성을 도와주는 프로그램 전처리기 : 화면에 보여주기 전에 (렌더링 전에) CSS를 변경해서, 스타일을 보여준다. 사용자가 작성하기 쉬운 코드로 작성 => 기본 CSS로 변환 => 렌더링 후처리기 : 화면에 보여주고 나서, CSS 변경 기본 CSS파일 작성 => 렌더링 => 외부 프로그램 사용해서 스타일 변경 CSS 전,후 처리기의 필요성 CSS를 작성할 때 발생하는 여러 번거로움을 줄여준다! ( ex : 중복제거, 유지보수 등등 ) CSS 전,후 처리기들 전처리기 : Scss, Stylus, Less 후처리기 : PostCSS

사이트 디자인을 손으로 먼저그린다음, flex 형식으로 지정할 데이터를 정해놓고 시작하는 것이 편함 .class > div { } 형식을 사용해, .class 바로 아래있는 div 태그들만 선택하고 스타일을 적용할 수 있다. 조건에 따라 다른 css를 활용할 수 있게 만들수 있을까?

HTML 구조 CSS 구조 .container { /*너비 자동 설정*/ width: auto; /*높이 자동 설정*/ height: auto; } /* container 안에 들어있는 요소들의 크기에 맞춰진다!

CSS란? 웹페이지( HTML, XHTML, XML 등)를 꾸밀 수 있게 해주는 도구 CSS 사용법 /* style.css */ /* html body태그로 감싸진 부분 스타일 지정 */ body { /* 배경 색상 white로 지정 */ background-color : white; } HTML에 CSS 파일 적용하기 CSS파일에 다른 CSS파일 불러오기 @import ''; CSS파일 작성시 유의점 콜론, 세미콜론 사용할 때 실수가 많으므로, 항상 유의하고 스타일이 적용이 안될시 세미콜론 오류먼저 확인해보기 CSS에서 주석 넣기 /* 주석 넣기 */