본문 바로가기

전체 글

 (76)
[React] CSS 상자 모델 이해하기 CSS의 박스 모델  Box-model (상자 모델)이란?  모든 HTML요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델이라고 한다. 박스 모델은 HTML 구성 요소를 패딩(padding), 테두리(border), 마진(margin), 컨텐츠(content)로 구분한다.   각각의 요소는 width, height 속성을 가진다.  CSS 상자모델 표준은 레벨 1, 2, 3이 있으며 CSS1, CSS2,   CSS3 등의 이름으로 레벨에 따른 CSS를 구분한다.  width와 height 스타일 속성  CSS는 HTML 요소의 넓이와 높이를 의미하는 width와 height라는 스타일 속성을 제공한다.  이 두 속성은 auto, inherit, initial, unset 등의 CSS 키워드 값을..
[React] 테일윈드CSS 리액트 프로젝트 만들기 PostCSS가 탄생한 배경 CSS개발은 역사적으로 브라우저 호환성과 벤더 접두사 같은 문제로 어려움을 많이 겪어왔으며, 이런 어려움을  극복하기 위해 루비 언어로 만든 Sass/SCSS라는 스타일 언어가 생겨나기도 했다.   Sass/SCSS는 for 반복문과 같은 프로그래밍 언어를 일부 지원했고, 벤더 접두사 문제를 해결해 주는 autoprefixer 플러그인도 제공해 지금도 큰 인기를 끌고 있다.  부트스트랩을 비롯해 널리 알려진 CSS 프레임워크는 대부분 Sass/SCSS로 만들어져 있다.  다른 언어들도 계속 발전하듯이 CSS분야에서도 '모듈화된 CSS'라는 가치를 내걸어 PostCSS라는 이름의 새로운 스타일  언어와 이를 동작하게 하는 프로그램이 탄생하였다.  PostCSS는 다양한 플러그인..

티스토리툴바