랄지 IT

CSS방법론 개념: 객제지향의 CSS방법론으로, OOP(Object-oriented programming)의 일반적인 의미에서 결합도 낮추기(decoupling), 단일 책임의 원칙(single responsibility principle), 캡슐화(encapsulation)를 강조하는 방법론입니다 CSS의 역할이 커지면서 CSS를 보다 효율적으로 작성하는 여러가지 아이디어들이 생겼다. SMACSS, BEM, OOCSS 등이 있는데, 개인적으로 각자의 특징을 한 단어로 표현하자면, SMACSS=5형제, BEM=네이밍, OOCSS=재사용이라고 생각한다. https://gomdoreepooh.github.io/notes/smacss-bem-oocss 목적: 코드의 재사용성을 높이자 쉽게 유지보수 하자 확장 ..

CSS는 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. Sass는 CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. * Syntactically Awesome StyleSheets: 구문적으로 멋진 스타일시트 * 전처리기: 입력 데이터를 처리하여 다른 프로그램에 대한 입력으로서 사용되는 출력물을 만들어내는 프로그램 Sass의 기능 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance Sass는 2006년 Ruby로 처음 개발되었고 이후 다양한 포팅 버전이 등장..

CSS 란? CSS는 HTML 문서를 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다. * 랜더링: 코드를 읽은 후, 화면에 시각적으로 표시하게 되는 과정 HTML5에서는 HTML는 정보와 구조화, CSS는 styling의 정의라는 본연의 임무에 충실한 명확한 구분이 이루어졌다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며 HTML은 CSS를 포함할 수 있다. 그러나 HTML없이 단독으로 존재하는 CSS는 의미가 없다. CSS 문법 h1 { color: red; } h1 셀렉터(선택자) {} 선언 블..

HTML이 웹페이지의 '뼈'라면 CSS는 '살'이라고 할 수 있습니다. 즉 HTML이 웹페이지의 정보를 표현한다면, CSS는 HTML을 보기 좋게 디자인하는 역할을 하는 언어입니다. LESS는 CSS의 부족한 기능성을 보강해서 javascript와 같이 동적인 프로그래밍 언어의 기능인 변수, 함수와 같은 기능을 제공합니다. 유지보수의 공수가 드라마틱하게 줄어듭니다. SASS는 LESS의 동일한 기능을 제공하는 다른 솔루션입니다 트위터에서 자신들의 웹서비스를 위해서 사용하던 UI 프래임웍을 오픈소스로 공개한 것이 Bootstrap입니다. 이것을 이용하면 HTML의 엘리먼트에 CSS 클래스 네임만 부여하면 그에 해당하는 디자인이나, 컴포넌트가 생성됩니다. 선택자 CSS 선택자는 주어와 서술어로 선언되어 있다..

CSS를 사용하는 이유 - 중복의 제거 - 효율적 CSS는 클래스 여러개면 가장 나중에 선언된 애의 말을 듣는다 width 발음 위스 height 발음 하이츠 div, span: 무색무취의 태그임 css 최신기술 사용해도 되나? 안되나?를 확인할때 caniuse.com 사이트에서 확인 Can I use... Support tables for HTML5, CSS3, etc caniuse.com 반응형 웹 or 반응형 디자인(responsive web) 이란? - 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것 - 미디어 쿼리 @media(min-width:800px){} 사용해서 작업함 css 링크태그 - 캐시: 파일을 내 컴에 저장함, 효율적임 input 태그 id..